@kiwicom/smart-faq
Version:
Smart FAQ
226 lines (194 loc) • 10.7 kB
JavaScript
"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.UnwrappedArticleContent = exports.THRESHOLD = exports.GUARANTEE_ARTICLE_ID = void 0;
var _style = _interopRequireDefault(require("styled-jsx/style"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
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 _reactRelay = require("react-relay");
var _idx = _interopRequireDefault(require("idx"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Translate = _interopRequireDefault(require("@kiwicom/nitro/lib/components/Translate"));
var _styledComponents = require("styled-components");
var _Markdown = _interopRequireDefault(require("../../../SmartFAQ/common/Markdown"));
var _GuaranteeChat = _interopRequireDefault(require("./GuaranteeChat"));
var _FAQArticleFeedback = _interopRequireDefault(require("../ArticleFeedback/FAQArticleFeedback"));
var _trackers = require("../../helpers/analytics/trackers");
var _GuaranteeChatInfo = require("../../context/GuaranteeChatInfo");
var _User = require("../../../SmartFAQ/context/User");
var _PageVariant = require("../../../SmartFAQ/common/PageVariant");
// @flow
var GUARANTEE_ARTICLE_ID = 'RkFRQXJ0aWNsZToyOA==';
exports.GUARANTEE_ARTICLE_ID = GUARANTEE_ARTICLE_ID;
var THRESHOLD = 4;
/*:: type Props = {
loginToken: ?string,
simpleToken: ?string,
kwAuthToken: ?string,
isInGuaranteeArticle: boolean,
article: ArticleContent_article,
showGuaranteeChat: boolean,
...ThemeProps,
};*/
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;
var _globalStyle = new String(".guaranteeLoggedOut a{color:".concat(props.theme.orbit.colorTextLinkPrimaryHover, ";-webkit-text-decoration:none;text-decoration:none;}.faq-article-text ul{padding-left:43px;list-style:none;}.faq-article-text ul,.faq-article-text ol{margin-left:20px;padding-bottom:20px;margin-bottom:10px;}.faq-article-text li:before{content:'';display:inline-block;margin-right:19px;width:6px;height:6px;margin-bottom:2px;}[dir='rtl'] .faq-article-text li:before{margin-right:0;margin-left:19px;}.faq-article-text ul li:before{background-color:#d5dee7;}.faq-article-text a{color:").concat(props.theme.orbit.colorTextLinkPrimaryHover, ";-webkit-text-decoration:none;text-decoration:none;}.faq-article-text img{width:100%;height:auto;object-fit:contain;}.faq-article-text li{display:list-item;padding-top:10px;text-indent:-25px;}.faq-article-text li,.faq-article-text div{font-size:14px;font-weight:400;line-height:22px;}"));
return React.createElement("div", {
"data-cy": "faq-article-content",
className: "jsx-2066762604" + " " + ((0, _classnames.default)({
articleContentLoggedIn: _isLoggedIn,
articleContentLoggedOut: !_isLoggedIn
}) || "")
}, React.createElement(_Heading.default, {
type: "title2"
}, _article.title || ''), React.createElement("div", {
className: "jsx-2066762604" + " " + "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("hr", {
className: "jsx-2066762604" + " " + "faq-article-delimiter"
}), React.createElement("div", {
className: "jsx-2066762604" + " " + "faq-article-text"
}, React.createElement(_Markdown.default, null, _article.content)), _showGuaranteeChat && React.createElement(_GuaranteeChat.default, null), _showMessage && React.createElement("div", {
className: "jsx-2066762604" + " " + "guaranteeLoggedOut"
}, React.createElement(_Translate.default, {
html: true,
t: "smartfaq.faq.article.guarantee.logged_out",
values: {
guaranteeChatThreshold: THRESHOLD
}
})), React.createElement("hr", {
className: "jsx-2066762604" + " " + "faq-article-delimiter"
}), React.createElement(_FAQArticleFeedback.default, {
articleId: _article.id
}), React.createElement(_style.default, {
styleId: "2066762604",
css: ".articleContentLoggedIn.jsx-2066762604{padding:16px 72px 40px 80px;}.articleContentLoggedOut.jsx-2066762604{padding:16px 36px 40px;}.faq-article-perex.jsx-2066762604{padding:24px 0;line-height:20px;}.faq-article-delimiter.jsx-2066762604{border:0;height:1px;background-color:#e8edf1;margin:0;}.faq-article-text.jsx-2066762604{padding:24px 0;}.guaranteeLoggedOut.jsx-2066762604{margin-bottom:40px;}@media only screen and (max-width:901px){.articleContentLoggedIn.jsx-2066762604,.articleContentLoggedOut.jsx-2066762604{padding:16px;}}"
}), React.createElement(_style.default, {
styleId: _globalStyle.__hash,
css: _globalStyle
}));
}
globalStyle.__hash = "2228725278";
globalStyle.__scoped = ".guaranteeLoggedOut.jsx-3156259359 a.jsx-3156259359{color:".concat(props.theme.orbit.colorTextLinkPrimaryHover, ";-webkit-text-decoration:none;text-decoration:none;}.faq-article-text.jsx-3156259359 ul.jsx-3156259359{padding-left:43px;list-style:none;}.faq-article-text.jsx-3156259359 ul.jsx-3156259359,.faq-article-text.jsx-3156259359 ol.jsx-3156259359{margin-left:20px;padding-bottom:20px;margin-bottom:10px;}.faq-article-text.jsx-3156259359 li.jsx-3156259359:before{content:'';display:inline-block;margin-right:19px;width:6px;height:6px;margin-bottom:2px;}[dir='rtl'] .faq-article-text.jsx-3156259359 li.jsx-3156259359:before{margin-right:0;margin-left:19px;}.faq-article-text.jsx-3156259359 ul.jsx-3156259359 li.jsx-3156259359:before{background-color:#d5dee7;}.faq-article-text.jsx-3156259359 a.jsx-3156259359{color:").concat(props.theme.orbit.colorTextLinkPrimaryHover, ";-webkit-text-decoration:none;text-decoration:none;}.faq-article-text.jsx-3156259359 img.jsx-3156259359{width:100%;height:auto;object-fit:contain;}.faq-article-text.jsx-3156259359 li.jsx-3156259359{display:list-item;padding-top:10px;text-indent:-25px;}.faq-article-text.jsx-3156259359 li.jsx-3156259359,.faq-article-text.jsx-3156259359 div.jsx-3156259359{font-size:14px;font-weight:400;line-height:22px;}");
globalStyle.__scopedHash = "3156259359";
});
var UnwrappedArticleContent = ArticleContent;
exports.UnwrappedArticleContent = UnwrappedArticleContent;
var LogladyTrackedDetail = (0, _trackers.LogladyTracker)((0, _User.withToken)(ArticleContent), 'FAQs', 'articleOpened', function (props
/*: Props*/
) {
return {
articleId: (0, _idx.default)(props.article, function (_) {
return _.originalId;
}) || '',
articleName: (0, _idx.default)(props.article, function (_) {
return _.title;
}) || ''
};
});
var EnterTrackedDetail = (0, _trackers.EnterTracker)(LogladyTrackedDetail, 'smartFAQCategories', function (props
/*: Props*/
) {
return {
action: 'clickOnArticle',
articleId: (0, _idx.default)(props.article, function (_) {
return _.id;
}) || '',
articleName: (0, _idx.default)(props.article, function (_) {
return _.title;
}) || ''
};
});
var LogladyTimeTracked = (0, _trackers.LogladyTimeTracker)(EnterTrackedDetail, 'FAQs', 'articleClosed', function (props
/*: Props*/
) {
return {
articleId: (0, _idx.default)(props.article, function (_) {
return _.id;
}) || '',
articleName: (0, _idx.default)(props.article, function (_) {
return _.title;
}) || ''
};
});
var TimeTrackedDetail = (0, _trackers.TimeTracker)(LogladyTimeTracked, 'smartFAQCategories', function (props
/*: Props*/
) {
return {
action: 'articleClose',
articleId: (0, _idx.default)(props.article, function (_) {
return _.id;
}) || '',
articleName: (0, _idx.default)(props.article, function (_) {
return _.title;
}) || ''
};
});
/*:: type ContainerProps = {
match: {
params: {
articleId: string,
categoryId: string,
[key: string]: ?string,
},
},
};*/
var WrappedArticle = function WrappedArticle(props
/*: Props & ContainerProps*/
) {
return React.createElement(_GuaranteeChatInfo.GuaranteeChatContext.Consumer, null, function (_ref) {
var showGuaranteeChat = _ref.showGuaranteeChat;
// show Guarantee Chat only in Guarantee article
var articleId = (0, _idx.default)(props.match, function (_) {
return _.params.articleId;
});
var isInGuaranteeArticle = articleId === GUARANTEE_ARTICLE_ID;
return React.createElement(TimeTrackedDetail, (0, _extends2.default)({
showGuaranteeChat: showGuaranteeChat && isInGuaranteeArticle,
isInGuaranteeArticle: isInGuaranteeArticle
}, props));
});
};
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;