"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.HelpPage = void 0;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

var _react = _interopRequireDefault(require("react"));

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

var _lib = require("@sentecacommerce-theme/lib");

var _router = require("next/router");

var _Contacts = require("./Components/Contacts");

var _Common = require("../Common");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;

var HelpPage = function HelpPage(_ref) {
  var contacts = _ref.contacts;
  var router = (0, _router.useRouter)();

  var _useCmsContent = (0, _lib.useCmsContent)({
    key: router.query.contentKey
  }),
      data = _useCmsContent.data,
      isLoading = _useCmsContent.isLoading;

  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_lib.Link, {
    href: '/help'
  }, /*#__PURE__*/_react["default"].createElement(Title, null, data == null ? void 0 : data.typeName)), /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Content, null, !isLoading ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(TitleContainer, null, /*#__PURE__*/_react["default"].createElement("h2", null, data == null ? void 0 : data.content.name)), /*#__PURE__*/_react["default"].createElement("div", {
    dangerouslySetInnerHTML: {
      __html: data == null ? void 0 : data.content.content
    }
  })) : /*#__PURE__*/_react["default"].createElement(_Common.Spinner, null)), /*#__PURE__*/_react["default"].createElement(ContactsWrapper, null, /*#__PURE__*/_react["default"].createElement(ContactsTitleContainer, null, /*#__PURE__*/_react["default"].createElement("h2", null, contacts == null ? void 0 : contacts.title), /*#__PURE__*/_react["default"].createElement("h5", null, contacts == null ? void 0 : contacts.subtitle)), /*#__PURE__*/_react["default"].createElement(_Contacts.Contacts, {
    contacts: contacts
  }))));
};

exports.HelpPage = HelpPage;

var Container = _styledComponents["default"].div.attrs({
  className: 'd-flex'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media (max-width: ", ") {\n    flex-direction: column;\n  }\n\n  @media (min-width: ", ") {\n    margin: 8rem 12rem;\n    border: 1px solid ", ";\n  }\n"])), function (props) {
  return props.theme.breakpoints.md.max;
}, function (props) {
  return props.theme.breakpoints.lg.min;
}, function (props) {
  return props.theme.palette.grey;
});

var Content = _styledComponents["default"].div.attrs({
  className: 'col py-4'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  padding: 5rem;\n  @media (max-width: ", ") {\n    padding: 3rem;\n  }\n"])), function (props) {
  return props.theme.breakpoints.sm.max;
});

var TitleContainer = _styledComponents["default"].div.attrs({
  className: 'pb-3 mb-3'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Title = _styledComponents["default"].h1.attrs({
  className: 'mt-5 mb-4'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  text-align: center;\n  cursor: pointer;\n"])));

var ContactsWrapper = _styledComponents["default"].div.attrs({
  className: 'col-lg-3 d-flex flex-column'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  padding: 0 5rem;\n\n  @media (min-width: ", ") {\n    border-left: 1px solid ", ";\n    align-items: center;\n    text-align: center;\n  }\n  @media (max-width: ", ") {\n    padding: 0 3rem;\n  }\n"])), function (props) {
  return props.theme.breakpoints.lg.min;
}, function (props) {
  return props.theme.palette.grey;
}, function (props) {
  return props.theme.breakpoints.sm.min;
});

var ContactsTitleContainer = _styledComponents["default"].div.attrs({
  className: 'py-4'
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media (min-width: ", ") {\n    padding: 0 5rem;\n  }\n"])), function (props) {
  return props.theme.breakpoints.lg.min;
});
//# sourceMappingURL=helpPage.component.js.map