@kiwicom/smart-faq
Version:
Smart FAQ
319 lines (261 loc) • 16.2 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.RawContentHeader = 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 _reactRouterDom = require("react-router-dom");
var React = _interopRequireWildcard(require("react"));
var _idx = _interopRequireDefault(require("idx"));
var _TextLink = _interopRequireDefault(require("@kiwicom/orbit-components/lib/TextLink"));
var _Translate = _interopRequireDefault(require("@kiwicom/nitro/lib/components/Translate"));
var _Responsive = require("../Responsive");
var _CloseButton = _interopRequireDefault(require("../buttons/CloseButton"));
var _BackButton = _interopRequireDefault(require("../buttons/BackButton"));
var _SignOutButton = _interopRequireDefault(require("./SignOutButton"));
var _User = require("../../context/User");
var _SelectedBooking = require("../../context/SelectedBooking");
var _responsiveStyleHelperClasses = _interopRequireDefault(require("../responsiveStyleHelperClasses"));
var _MobileBookingHeader = _interopRequireDefault(require("../../MobileBookingHeader/MobileBookingHeader"));
var _SearchBar = _interopRequireDefault(require("../../StaticFAQ/SearchBar"));
var _UserStatus = _interopRequireDefault(require("../../helpers/UserStatus"));
// @flow
var style = new String(".loggedOut{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding:15px 122px 15px 40px;}.header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.HeaderFAQ{width:100%;border-bottom:1px solid #e8edf1;background-color:#ffffff;}@media only screen and (max-width:500px){.header.hide{opacity:0;max-height:0;}}");
style.__hash = "3700769137";
style.__scoped = ".loggedOut.jsx-4290801200{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding:15px 122px 15px 40px;}.header.jsx-4290801200{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.HeaderFAQ.jsx-4290801200{width:100%;border-bottom:1px solid #e8edf1;background-color:#ffffff;}@media only screen and (max-width:500px){.header.hide.jsx-4290801200{opacity:0;max-height:0;}}";
style.__scopedHash = "4290801200";
var loggedInStyle = new String(".helpHeader{font-size:28px;font-weight:bold;color:#171b1e;pointer-events:none;}.loggedIn{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-flex:1;-ms-flex:1;flex:1;padding:15px 122px 15px 40px;}.links{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}a.open-icon{margin-left:12px;}.staticFaqSearch{width:350px;position:absolute;right:260px;top:10px;}@media only screen and (max-width:900px) and (max-height:480px){.loggedIn{display:none;}}@media only screen and (max-width:900px){.loggedIn{padding:15px;}.helpHeader{width:100%;text-align:center;font-size:1.2em;}}");
loggedInStyle.__hash = "64252701";
loggedInStyle.__scoped = ".helpHeader.jsx-2880528156{font-size:28px;font-weight:bold;color:#171b1e;pointer-events:none;}.loggedIn.jsx-2880528156{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-flex:1;-ms-flex:1;flex:1;padding:15px 122px 15px 40px;}.links.jsx-2880528156{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}a.open-icon.jsx-2880528156{margin-left:12px;}.staticFaqSearch.jsx-2880528156{width:350px;position:absolute;right:260px;top:10px;}@media only screen and (max-width:900px) and (max-height:480px){.loggedIn.jsx-2880528156{display:none;}}@media only screen and (max-width:900px){.loggedIn.jsx-2880528156{padding:15px;}.helpHeader.jsx-2880528156{width:100%;text-align:center;font-size:1.2em;}}";
loggedInStyle.__scopedHash = "2880528156";
var loggedOutStyle = new String(".helpHeader{position:absolute;left:0;right:0;text-align:center;font-size:28px;font-weight:bold;color:#171b1e;pointer-events:none;margin:0;}.loggedOut{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:16px;height:66px;}.signInOrBack{height:20px;}[dir='rtl'] .signInOrBack{padding-right:32px;}.backButton{line-height:2;}@media only screen and (max-width:901px){.helpHeader{position:absolute;left:0;right:0;text-align:center;}}");
loggedOutStyle.__hash = "2350839666";
loggedOutStyle.__scoped = ".helpHeader.jsx-2278265907{position:absolute;left:0;right:0;text-align:center;font-size:28px;font-weight:bold;color:#171b1e;pointer-events:none;margin:0;}.loggedOut.jsx-2278265907{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:16px;height:66px;}.signInOrBack.jsx-2278265907{height:20px;}[dir='rtl'] .signInOrBack.jsx-2278265907{padding-right:32px;}.backButton.jsx-2278265907{line-height:2;}@media only screen and (max-width:901px){.helpHeader.jsx-2278265907{position:absolute;left:0;right:0;text-align:center;}}";
loggedOutStyle.__scopedHash = "2278265907";
/*:: type State = {
isHeaderVisible: boolean,
lastScroll: number,
headerHeight: number,
};*/
/*:: type Props = {
renderOnlyLoggedOut: boolean,
onLogin: onLogin,
match: {
params: {
categoryId?: string,
},
},
location: {
pathname: string,
},
};*/
var renderLoggedIn = function renderLoggedIn() {
return React.createElement(React.Fragment, null, React.createElement("div", {
className: "jsx-".concat(loggedInStyle.__scopedHash, " jsx-").concat(_responsiveStyleHelperClasses.default.__scopedHash) + " " + "loggedIn"
}, React.createElement(_SelectedBooking.SelectedBooking.Consumer, null, function (_ref) {
var bookingPage = _ref.bookingPage;
return React.createElement("div", {
className: "jsx-".concat(loggedInStyle.__scopedHash, " jsx-").concat(_responsiveStyleHelperClasses.default.__scopedHash) + " " + "helpHeader"
}, bookingPage === 'ALL_BOOKINGS' ? React.createElement(React.Fragment, null, React.createElement(_Responsive.Mobile, null, React.createElement(_Translate.default, {
t: "smartfaq.mobile_header.title"
})), React.createElement(_Responsive.Desktop, null, React.createElement(_Translate.default, {
t: "smartfaq.header.title"
}))) : React.createElement(_Translate.default, {
t: "smartfaq.header.title"
}));
}), React.createElement(_Responsive.Desktop, null, React.createElement("div", {
className: "jsx-".concat(loggedInStyle.__scopedHash, " jsx-").concat(_responsiveStyleHelperClasses.default.__scopedHash) + " " + "staticFaqSearch"
}, React.createElement(_SearchBar.default, null)), React.createElement("div", {
className: "jsx-".concat(loggedInStyle.__scopedHash, " jsx-").concat(_responsiveStyleHelperClasses.default.__scopedHash) + " " + "links"
}, React.createElement(_SignOutButton.default, null))), React.createElement(_style.default, {
styleId: loggedInStyle.__scopedHash,
css: loggedInStyle.__scoped
}), React.createElement(_style.default, {
styleId: _responsiveStyleHelperClasses.default.__scopedHash,
css: _responsiveStyleHelperClasses.default.__scoped
})), React.createElement(_Responsive.Mobile, null, React.createElement(_MobileBookingHeader.default, null)));
};
var renderLoggedOut = function renderLoggedOut(hasCategory
/*: string | null*/
, isArticle
/*: boolean*/
, comesFromSearch
/*: boolean*/
, renderSignIn
/*: boolean*/
, onLogin
/*: onLogin*/
) {
var signIn = renderSignIn ? React.createElement(_TextLink.default, {
onClick: onLogin,
type: "secondary",
dataTest: "sign-in-link"
}, React.createElement(_Translate.default, {
html: true,
t: "smartfaq.header.sign_in"
})) : null;
return React.createElement("div", {
className: "jsx-".concat(_responsiveStyleHelperClasses.default.__scopedHash, " jsx-").concat(loggedOutStyle.__scopedHash) + " " + "loggedOut"
}, React.createElement("div", {
className: "jsx-".concat(_responsiveStyleHelperClasses.default.__scopedHash, " jsx-").concat(loggedOutStyle.__scopedHash) + " " + "signInOrBack"
}, hasCategory || isArticle ? React.createElement("div", {
className: "jsx-".concat(_responsiveStyleHelperClasses.default.__scopedHash, " jsx-").concat(loggedOutStyle.__scopedHash) + " " + "backButton"
}, React.createElement(_BackButton.default, {
type: comesFromSearch ? 'search' : 'back'
})) : signIn), React.createElement("p", {
className: "jsx-".concat(_responsiveStyleHelperClasses.default.__scopedHash, " jsx-").concat(loggedOutStyle.__scopedHash) + " " + "helpHeader"
}, React.createElement(_Translate.default, {
t: "smartfaq.header.title"
})), React.createElement(_style.default, {
styleId: _responsiveStyleHelperClasses.default.__scopedHash,
css: _responsiveStyleHelperClasses.default.__scoped
}), React.createElement(_style.default, {
styleId: loggedOutStyle.__scopedHash,
css: loggedOutStyle.__scoped
}));
}; // prettier-ignore
/*:: type _SyntheticInputEvent = {
target: { // eslint-disable-line react/no-unused-prop-types
scrollTop: number,
scrollLeft: number,
scrollHeight: number,
clientHeight: number,
},
};*/
var Header =
/*#__PURE__*/
function (_React$Component) {
(0, _inherits2.default)(Header, _React$Component);
function Header() {
var _getPrototypeOf2;
var _this;
(0, _classCallCheck2.default)(this, Header);
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)(Header)).call.apply(_getPrototypeOf2, [this].concat(args)));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "state", {
isHeaderVisible: true,
lastScroll: 0,
headerHeight: 64 // eslint-disable-line react/no-unused-state
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleScroll", function (_ref2) {
var target = _ref2.target;
var tolerance = 6;
var newHeaderHeight = (0, _idx.default)(document.getElementById('SmartFAQ_header'), function (_) {
return _.offsetHeight;
});
var currentScroll = target.scrollTop;
var Body = document.getElementById('SmartFAQ_Body');
var distanceScrolled = Math.abs(_this.state.lastScroll - currentScroll);
if (currentScroll === undefined) {
return;
}
var headerHeight = newHeaderHeight || _this.state.headerHeight;
var hide = function hide() {
_this.setState(function (prevState) {
var headerHeight = newHeaderHeight || prevState.headerHeight;
if (prevState.isHeaderVisible) {
if (currentScroll < headerHeight) {
target.scrollTop += headerHeight;
}
if (Body && screen.width < 900) {
Body.style.marginTop = "".concat(headerHeight, "px");
}
}
return {
isHeaderVisible: false,
headerHeight: headerHeight,
lastScroll: target.scrollTop
};
});
};
var show = function show() {
_this.setState(function (prevState) {
if (Body) {
Body.style.marginTop = '0';
}
return {
isHeaderVisible: true,
headerHeight: newHeaderHeight || prevState.headerHeight,
lastScroll: currentScroll
};
});
};
var isOnTop = currentScroll < headerHeight && currentScroll < _this.state.lastScroll;
if (distanceScrolled <= tolerance || distanceScrolled < 0) {
if (isOnTop) show();
_this.setState({
lastScroll: currentScroll
});
return;
}
if (currentScroll > _this.state.lastScroll) {
hide();
return;
} else {
show();
return;
}
});
return _this;
}
(0, _createClass2.default)(Header, [{
key: "componentDidMount",
value: function componentDidMount() {
if (typeof window === 'undefined') {
return;
} //window.addEventListener('scroll', this.handleScroll, true);
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {//window.removeEventListener('scroll', this.handleScroll, true);
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var hasCategory = (0, _idx.default)(this.props.match, function (_) {
return _.params.categoryId;
}) || null;
var currentpath = this.props.location && this.props.location.pathname;
var isArticle = currentpath.includes('article/');
var comesFromSearch = currentpath.includes('faq/search/');
var renderOnlyLoggedOut = this.props.renderOnlyLoggedOut;
return React.createElement("div", {
id: "SmartFAQ_header",
className: "jsx-".concat(style.__scopedHash) + " " + ((!this.state.isHeaderVisible ? 'header hide' : 'header') || "")
}, React.createElement("div", {
className: "jsx-".concat(style.__scopedHash) + " " + "HeaderFAQ"
}, !renderOnlyLoggedOut && React.createElement(_UserStatus.default.LoggedIn, null, React.createElement(_Responsive.Desktop, null, React.createElement(_CloseButton.default, {
height: "24"
}))), React.createElement(_User.UserContext.Consumer, null, function (_ref3) {
var simpleToken = _ref3.simpleToken,
loginToken = _ref3.loginToken,
kwAuthToken = _ref3.kwAuthToken;
var isLoggedIn = simpleToken || loginToken || kwAuthToken;
var renderCloseButton = !isLoggedIn || renderOnlyLoggedOut;
return React.createElement(React.Fragment, null, renderCloseButton && React.createElement(_CloseButton.default, {
height: "24"
}), isLoggedIn && !renderOnlyLoggedOut ? renderLoggedIn() : renderLoggedOut(hasCategory, isArticle, comesFromSearch, !renderOnlyLoggedOut, _this2.props.onLogin));
})), React.createElement(_style.default, {
styleId: style.__scopedHash,
css: style.__scoped
}));
}
}]);
return Header;
}(React.Component);
var RawContentHeader = Header;
exports.RawContentHeader = RawContentHeader;
var _default = (0, _reactRouterDom.withRouter)((0, _User.withLogin)(Header));
exports.default = _default;