@kiwicom/smart-faq
Version:
Smart FAQ
312 lines (258 loc) • 13.9 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 = 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 _classnames = _interopRequireDefault(require("classnames"));
var _Text = _interopRequireDefault(require("@kiwicom/orbit-components/lib/Text"));
var _Close = _interopRequireDefault(require("@kiwicom/orbit-components/lib/icons/Close"));
var _AccountCircle = _interopRequireDefault(require("@kiwicom/orbit-components/lib/icons/AccountCircle"));
var _Trip = _interopRequireDefault(require("@kiwicom/orbit-components/lib/icons/Trip"));
var _Search = _interopRequireDefault(require("@kiwicom/orbit-components/lib/icons/Search"));
var _reactRouterDom = require("react-router-dom");
var _User = require("../context/User");
var _SearchState = require("../context/SearchState");
var _SelectedBooking = require("../context/SelectedBooking");
var _Close2 = _interopRequireDefault(require("../context/Close"));
var _BackButtonMobile = _interopRequireDefault(require("./BackButtonMobile"));
var _MobileNearestBooking = _interopRequireDefault(require("./MobileNearestBooking"));
var _MobileSelectedBooking = _interopRequireDefault(require("./MobileSelectedBooking"));
var _MobileUserDetail = _interopRequireDefault(require("./MobileUserDetail"));
// @flow
var MobileBookingPage = function MobileBookingPage(props
/*: MobileBookingPageProps*/
) {
var bookingPage = props.bookingPage,
selectedBooking = props.selectedBooking;
if (bookingPage === 'SINGLE_BOOKING') {
if (selectedBooking) {
return React.createElement(_MobileSelectedBooking.default, {
bookingId: selectedBooking
});
}
return React.createElement(_MobileNearestBooking.default, null);
}
return null;
};
var MobileBookingSummary = function MobileBookingSummary() {
return React.createElement("div", null, React.createElement(_SelectedBooking.SelectedBooking.Consumer, null, function (_ref) {
var bookingPage = _ref.bookingPage,
selectedBooking = _ref.selectedBooking;
return React.createElement(MobileBookingPage, {
bookingPage: bookingPage,
selectedBooking: selectedBooking
});
}));
};
var MobileBookingHeaderStyle = new String(".MobileBookingHeader{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background-color:#f5f7f9;box-shadow:inset 0 1px 0 0 #e8edf1;}.option{-webkit-flex:1;-ms-flex:1;flex:1;padding:19px;text-align:center;background-color:#fff;border:1px solid #eaeaea;outline:none;}.option.help{display:none;}.option.active{background-color:#f5f7f9;}.openedContent{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background-color:#f5f7f9;box-shadow:inset 0 1px 0 0 #e8edf1;padding:8px 16px;}.openedContent.hidden{display:none;}@media screen and (max-height:480px){.option.help{-webkit-flex:7;-ms-flex:7;flex:7;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}");
MobileBookingHeaderStyle.__hash = "253788474";
MobileBookingHeaderStyle.__scoped = ".MobileBookingHeader.jsx-1860797691{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background-color:#f5f7f9;box-shadow:inset 0 1px 0 0 #e8edf1;}.option.jsx-1860797691{-webkit-flex:1;-ms-flex:1;flex:1;padding:19px;text-align:center;background-color:#fff;border:1px solid #eaeaea;outline:none;}.option.help.jsx-1860797691{display:none;}.option.active.jsx-1860797691{background-color:#f5f7f9;}.openedContent.jsx-1860797691{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background-color:#f5f7f9;box-shadow:inset 0 1px 0 0 #e8edf1;padding:8px 16px;}.openedContent.hidden.jsx-1860797691{display:none;}@media screen and (max-height:480px){.option.help.jsx-1860797691{-webkit-flex:7;-ms-flex:7;flex:7;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}";
MobileBookingHeaderStyle.__scopedHash = "1860797691";
/*:: type Props = {|
match: {
params: {
categoryId: ?string,
},
},
history: {
goBack: () => void,
push: string => void,
location: {
pathname: string,
},
entries: Array<{
pathname: string,
}>,
},
|};*/
/*:: type State = {
activeTab: 'search' | 'summary' | 'account' | null,
};*/
var MobileBookingHeader =
/*#__PURE__*/
function (_React$Component) {
(0, _inherits2.default)(MobileBookingHeader, _React$Component);
function MobileBookingHeader() {
var _getPrototypeOf2;
var _this;
(0, _classCallCheck2.default)(this, MobileBookingHeader);
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)(MobileBookingHeader)).call.apply(_getPrototypeOf2, [this].concat(args)));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "state", {
activeTab: null
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "contextEnableSearch", function () {});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "contextDisableSearch", function () {});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "contextToggleSearch", function () {});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "toggleSearch", function () {
if (_this.isSearchActive()) {
_this.setState({
activeTab: null
});
_this.contextDisableSearch();
} else {
_this.setState({
activeTab: 'search'
});
_this.props.history.push('/faq');
_this.contextEnableSearch();
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "toggleSummary", function () {
_this.setState(function (prevState) {
return {
activeTab: prevState.activeTab === 'summary' ? null : 'summary'
};
});
_this.contextDisableSearch();
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "toggleAccount", function () {
_this.setState(function (prevState) {
return {
activeTab: prevState.activeTab === 'account' ? null : 'account'
};
});
_this.contextDisableSearch();
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "goBack", function () {
var history = _this.props.history;
var pathname = history.location.pathname;
if (pathname.includes('search')) {
return history.push('/faq');
}
if (pathname.includes('article')) {
var url = (0, _idx.default)(pathname.match(/(.*)(?=article)/), function (_) {
return _[0];
}) || '';
return history.push(url);
} else if (pathname.includes('faq')) {
return history.push('/faq');
}
});
return _this;
}
(0, _createClass2.default)(MobileBookingHeader, [{
key: "componentDidMount",
value: function componentDidMount() {
this.contextToggleSearch();
}
}, {
key: "isSearchActive",
value: function isSearchActive() {
return this.state.activeTab === 'search' && this.props.history.location.pathname === '/faq';
}
}, {
key: "render",
value: function render() {
var _this2 = this;
return React.createElement(React.Fragment, null, React.createElement(_SelectedBooking.SelectedBooking.Consumer, null, function (_ref2) {
var closeAllBooking = _ref2.closeAllBooking;
return React.createElement(_SearchState.SearchState.Consumer, null, function (_ref3) {
var disableSearch = _ref3.disableSearch,
enableSearch = _ref3.enableSearch,
toggleSearch = _ref3.toggleSearch;
_this2.contextEnableSearch = enableSearch;
_this2.contextDisableSearch = disableSearch;
_this2.contextToggleSearch = toggleSearch;
var location = _this2.props.history.location;
var currentpath = location && location.pathname;
var isArticle = currentpath.includes('article/');
var hasCategory = (0, _idx.default)(_this2.props.match, function (_) {
return _.params.categoryId;
}) || null;
var buttonEvent = function buttonEvent(eventHandler) {
return function () {
eventHandler();
closeAllBooking();
};
};
return React.createElement("div", {
className: "jsx-".concat(MobileBookingHeaderStyle.__scopedHash) + " " + "MobileBookingHeader"
}, isArticle || hasCategory ? React.createElement("div", {
onClick: buttonEvent(_this2.goBack),
onKeyUp: buttonEvent(_this2.goBack),
role: "button",
tabIndex: "-1",
className: "jsx-".concat(MobileBookingHeaderStyle.__scopedHash) + " " + "option"
}, React.createElement(_BackButtonMobile.default, null)) : null, React.createElement("div", {
className: "jsx-".concat(MobileBookingHeaderStyle.__scopedHash) + " " + "option help"
}, React.createElement(_Text.default, {
type: "primary",
weight: "bold"
}, "Help")), React.createElement("div", {
onClick: buttonEvent(_this2.toggleSearch),
onKeyDown: buttonEvent(_this2.toggleSearch),
role: "button",
tabIndex: "0",
"data-cy": "search-button",
className: "jsx-".concat(MobileBookingHeaderStyle.__scopedHash) + " " + ((_this2.isSearchActive() ? 'option active' : 'option') || "")
}, React.createElement(_Search.default, {
size: "medium",
customColor: "#45505d"
})), React.createElement("div", {
onClick: buttonEvent(_this2.toggleSummary),
onKeyDown: buttonEvent(_this2.toggleSummary),
role: "button",
tabIndex: "0",
"data-cy": "trip-button",
className: "jsx-".concat(MobileBookingHeaderStyle.__scopedHash) + " " + ((_this2.state.activeTab === 'summary' ? 'option active' : 'option') || "")
}, React.createElement(_Trip.default, {
size: "medium",
customColor: "#45505d"
})), React.createElement(_User.UserContext.Consumer, null, function (_ref4) {
var simpleToken = _ref4.simpleToken;
return !simpleToken && React.createElement("div", {
onClick: buttonEvent(_this2.toggleAccount),
onKeyDown: buttonEvent(_this2.toggleAccount),
role: "button",
tabIndex: "0",
className: "jsx-".concat(MobileBookingHeaderStyle.__scopedHash) + " " + ((_this2.state.activeTab === 'account' ? 'option active' : 'option') || "")
}, React.createElement(_AccountCircle.default, {
size: "medium",
customColor: "#45505d"
}));
}), React.createElement(_Close2.default.Consumer, null, function (onClose
/*: () => void*/
) {
return React.createElement("div", {
role: "button",
tabIndex: "0",
onKeyDown: onClose,
onClick: onClose,
className: "jsx-".concat(MobileBookingHeaderStyle.__scopedHash) + " " + "option"
}, React.createElement(_Close.default, {
size: "medium",
customColor: "#45505d"
}));
}));
});
}), React.createElement("div", {
className: "jsx-".concat(MobileBookingHeaderStyle.__scopedHash) + " " + ((0, _classnames.default)('openedContent', {
hidden: this.state.activeTab !== 'summary'
}) || "")
}, React.createElement(MobileBookingSummary, null)), this.state.activeTab === 'account' ? React.createElement("div", {
className: "jsx-".concat(MobileBookingHeaderStyle.__scopedHash) + " " + "openedContent"
}, React.createElement(_MobileUserDetail.default, null)) : null, React.createElement(_style.default, {
styleId: MobileBookingHeaderStyle.__scopedHash,
css: MobileBookingHeaderStyle.__scoped
}));
}
}]);
return MobileBookingHeader;
}(React.Component);
var _default = (0, _reactRouterDom.withRouter)(MobileBookingHeader);
exports.default = _default;