{"version":3,"sources":["webpack:///./src/components/help/helpImage/styled.js","webpack:///./src/components/help/helpImage/index.js","webpack:///./src/components/ui/image-modal.js","webpack:///./src/img/help/min-time-duration1.png","webpack:///./src/img/help/min-time-duration2.png","webpack:///./src/pages/help/what-is-minimum-time-on-page.js","webpack:///./src/icons/alertIcons.js","webpack:///./src/components/information/index.js"],"names":["Card","styled","div","props","setMarginBottom","media","desktop","CardBody","HelpImage","cardStyle","className","style","defaultProps","Container","Box","Close","span","ImageWrapped","img","Image","ImageModal","escFunction","event","showModal","state","keyCode","closeModal","setState","openModal","window","innerWidth","componentDidMount","document","addEventListener","this","componentWillUnmount","removeEventListener","render","src","imgStyle","imgModalStyle","alt","title","lazy","modal","onClick","loading","React","Component","module","exports","frontmatter","metaTitle","metaDescription","canonical","Wrapped","Article","color","margin","minTimeDuration","minTimeDuration2","section","warning","width","height","viewBox","fill","xmlns","fillRule","d","clipRule","success","danger","info","cx","cy","r","Alert","Text","p","Information","children","filterIcon","Object","entries","icons","filter","icon","undefined"],"mappings":"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","file":"component---src-pages-help-what-is-minimum-time-on-page-js-fdc790445a121b4b26d2.js","sourcesContent":["import styled from 'styled-components';\nimport { media } from 'theme/breakpoints';\n\nexport const Card = styled.div`\n  margin: ${(props) => (props.setMarginBottom ? '2rem 0' : '2rem 0 3rem')};\n  border: none;\n\n  ${media.desktop} {\n    margin: ${(props) => (props.setMarginBottom ? '1.25rem 0' : '1.25rem 0 2rem')};\n  }\n`;\n\nexport const CardBody = styled.div`\n  box-shadow: 0px 0px 10px #00000029;\n  padding: 0;\n`;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport ImageModal from 'components/ui/image-modal';\nimport * as Styled from './styled';\n\nconst HelpImage = (props) => {\n  const { cardStyle, setMarginBottom } = props;\n  return (\n    <Styled.Card className=\"card\" style={cardStyle} setMarginBottom={setMarginBottom}>\n      <Styled.CardBody className=\"card-body\" style={cardStyle}>\n        <ImageModal {...props} />\n      </Styled.CardBody>\n    </Styled.Card>\n  );\n};\n\nexport default HelpImage;\n\nHelpImage.propTypes = {\n  cardStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n  setMarginBottom: PropTypes.bool,\n};\n\nHelpImage.defaultProps = {\n  cardStyle: null,\n  setMarginBottom: false,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n  top: 0;\n  left: 0;\n  position: fixed;\n  width: 100%;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 99999;\n`;\n\nconst Box = styled.div`\n  background-color: transparent;\n  position: relative;\n  width: 95vw;\n  height: 95vh;\n  padding: 1.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n`;\n\nconst Close = styled.span`\n  position: absolute;\n  font-size: 1.8rem;\n  right: 20px;\n  top: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  background-color: #fff;\n  border-radius: 100px;\n  width: 40px;\n  height: 40px;\n  padding-bottom: 3px;\n  filter: drop-shadow(5px 1px 4px rgba(0, 0, 0, 0.2));\n  z-index: 10;\n`;\n\nconst ImageWrapped = styled.img`\n  max-width: 100%;\n  max-height: 100%;\n  display: block;\n  margin: 0 auto;\n  border: none;\n`;\nconst minWidthToShow = 600;\n\nconst Image = styled.img`\n  border: 1px solid #eaebec;\n  max-width: 100%;\n  height: auto;\n\n  @media (min-width: ${minWidthToShow}px) {\n    cursor: pointer;\n  }\n`;\n\nclass ImageModal extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      showModal: false,\n    };\n  }\n\n  componentDidMount() {\n    document.addEventListener('keydown', this.escFunction, false);\n  }\n\n  componentWillUnmount() {\n    document.removeEventListener('keydown', this.escFunction, false);\n  }\n\n  escFunction = (event) => {\n    const { showModal } = this.state;\n\n    if (event.keyCode === 27 && showModal) {\n      this.closeModal();\n    }\n  };\n\n  closeModal = () => {\n    this.setState({ showModal: false });\n  };\n\n  openModal = () => {\n    if (window.innerWidth >= minWidthToShow) {\n      this.setState({ showModal: true });\n    }\n  };\n\n  render() {\n    const { showModal } = this.state;\n    const { src, imgStyle, imgModalStyle, alt, title, lazy } = this.props;\n\n    const modal = (\n      <Container onClick={this.closeModal}>\n        <Close onClick={this.closeModal}>&times;</Close>\n        <Box onClick={this.closeModal}>\n          <ImageWrapped\n            style={imgModalStyle}\n            src={src}\n            alt={alt}\n            title={title}\n            loading={lazy ? 'lazy' : null}\n          />\n        </Box>\n      </Container>\n    );\n\n    return (\n      <>\n        <Image\n          style={imgStyle}\n          onClick={this.openModal}\n          src={src}\n          alt={alt}\n          title={title}\n          loading={lazy ? 'lazy' : null}\n        />\n        {showModal && modal}\n      </>\n    );\n  }\n}\n\nexport default ImageModal;\n\nImageModal.propTypes = {\n  src: PropTypes.string.isRequired,\n  imgStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.node]),\n  imgModalStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.node]),\n  alt: PropTypes.string.isRequired,\n  title: PropTypes.string.isRequired,\n  lazy: PropTypes.bool,\n};\n\nImageModal.defaultProps = {\n  lazy: false,\n  imgStyle: null,\n  imgModalStyle: null,\n};\n","module.exports = __webpack_public_path__ + \"static/min-time-duration1-095f2dbd888033aafda3c02416b4a2ab.png\";","module.exports = __webpack_public_path__ + \"static/min-time-duration2-f1b6f8322c889500ca47d2f313a8f68c.png\";","import React from 'react';\n\nimport Article, { SubTitle } from 'components/help/helpArticle';\nimport Image from 'components/help/helpImage';\nimport minTimeDuration from 'img/help/min-time-duration1.png';\nimport minTimeDuration2 from 'img/help/min-time-duration2.png';\nimport { Information } from '../../components/information';\n\nconst Content = () => {\n  return (\n    <div>\n      <p>\n        LiveSession gives you an option to choose the minimum length of the recorded sessions. In\n        short, you can cut off all sessions that are shorter than the time you set in your\n        website&apos;s settings.\n      </p>\n\n      <SubTitle>How does it work?</SubTitle>\n      <p>\n        For example, if you choose not to capture sessions shorter than 20 seconds, we won&apos;t\n        save them. That means you won&apos;t see them on the sessions list. By default, recording\n        starts right after the user visits the page. If he leaves it (i.e., by going from your home\n        page to the pricing page) in less than 20 seconds or doesn&apos;t spend the required amount\n        of time on any page, no session will be saved.\n      </p>\n\n      <Information color=\"info\" style={{ margin: '32px 0' }}>\n        Although by default, we start recording immediately after your user visits your website,\n        sessions that don&apos;t meet the minimum time on page criterium won&apos;t lower your\n        monthly sessions quota.\n      </Information>\n\n      <SubTitle>How to set up the minimum time on page?</SubTitle>\n      <p>To start recording only sessions that meet the minimum time on page, do the following:</p>\n\n      <ol>\n        <li>\n          <strong>Go to Settings</strong> &#8594;<strong> Websites</strong>. Find a website you\n          would like to apply the minimum time on page to and click on “edit” on the right side:\n          <Image src={minTimeDuration} alt=\"Pause recording\" title=\"Go to settings\" />\n        </li>\n        <li>\n          In Settings, choose the &quot;Minimum time on page&quot; option and set the minimum\n          session length you&apos;d like to track:\n          <Image src={minTimeDuration2} lazy alt=\"Minimum tim\" title=\"Pop-up window\" />\n        </li>\n        <li>Click on the &quot;Save changes&quot; button.</li>\n      </ol>\n    </div>\n  );\n};\n\nexport const frontmatter = {\n  metaTitle: 'What is minimum time on page?',\n  metaDescription:\n    'Minimum time on page is an option to choose the minimum length of the recorded sessions.',\n  canonical: '/help/what-is-minimum-time-on-page',\n};\n\nconst Wrapped = Article(Content);\n\nexport default () => <Wrapped section=\"Product\" title={frontmatter.metaTitle} {...frontmatter} />;\n","import React from 'react';\n\nexport const warning = (\n  <svg\n    className=\"bi bi-exclamation-triangle\"\n    width=\"1em\"\n    height=\"1em\"\n    viewBox=\"0 0 16 16\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      fillRule=\"evenodd\"\n      d=\"M7.938 2.016a.146.146 0 00-.054.057L1.027 13.74a.176.176 0 00-.002.183c.016.03.037.05.054.06.015.01.034.017.066.017h13.713a.12.12 0 00.066-.017.163.163 0 00.055-.06.176.176 0 00-.003-.183L8.12 2.073a.146.146 0 00-.054-.057A.13.13 0 008.002 2a.13.13 0 00-.064.016zm1.044-.45a1.13 1.13 0 00-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z\"\n      clipRule=\"evenodd\"\n    />\n    <path d=\"M7.002 12a1 1 0 112 0 1 1 0 01-2 0zM7.1 5.995a.905.905 0 111.8 0l-.35 3.507a.552.552 0 01-1.1 0L7.1 5.995z\" />\n  </svg>\n);\nexport const success = (\n  <svg\n    className=\"bi bi-check-circle\"\n    width=\"1em\"\n    height=\"1em\"\n    viewBox=\"0 0 16 16\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      fillRule=\"evenodd\"\n      d=\"M15.354 2.646a.5.5 0 010 .708l-7 7a.5.5 0 01-.708 0l-3-3a.5.5 0 11.708-.708L8 9.293l6.646-6.647a.5.5 0 01.708 0z\"\n      clipRule=\"evenodd\"\n    />\n    <path\n      fillRule=\"evenodd\"\n      d=\"M8 2.5A5.5 5.5 0 1013.5 8a.5.5 0 011 0 6.5 6.5 0 11-3.25-5.63.5.5 0 11-.5.865A5.472 5.472 0 008 2.5z\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n);\nexport const danger = (\n  <svg\n    className=\"bi bi-exclamation-circle\"\n    width=\"1em\"\n    height=\"1em\"\n    viewBox=\"0 0 16 16\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      fillRule=\"evenodd\"\n      d=\"M8 15A7 7 0 108 1a7 7 0 000 14zm0 1A8 8 0 108 0a8 8 0 000 16z\"\n      clipRule=\"evenodd\"\n    />\n    <path d=\"M7.002 11a1 1 0 112 0 1 1 0 01-2 0zM7.1 4.995a.905.905 0 111.8 0l-.35 3.507a.552.552 0 01-1.1 0L7.1 4.995z\" />\n  </svg>\n);\nexport const info = (\n  <svg\n    className=\"bi bi-info-circle\"\n    width=\"1em\"\n    height=\"1em\"\n    viewBox=\"0 0 16 16\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      fillRule=\"evenodd\"\n      d=\"M8 15A7 7 0 108 1a7 7 0 000 14zm0 1A8 8 0 108 0a8 8 0 000 16z\"\n      clipRule=\"evenodd\"\n    />\n    <path d=\"M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588z\" />\n    <circle cx=\"8\" cy=\"4.5\" r=\"1\" />\n  </svg>\n);\n","import React from 'react';\nimport styled from 'styled-components';\n\nimport PropTypes from 'prop-types';\nimport * as icons from '../../icons/alertIcons';\n\nconst Alert = styled.div`\n  margin: 1.5rem 0 1rem;\n  border-radius: 4px;\n  padding: 10px 12px 10px 16px;\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  & svg {\n    align-self: center;\n    line-height: 100%;\n    width: 16px;\n    height: 16px;\n  }\n  &.info {\n    background-color: #cce5ff;\n    border: 1px solid #b8daff;\n  }\n  &.success {\n    background-color: #d4edda;\n    border: 1px solid #c3e6cb;\n  }\n  &.warning {\n    background-color: #fff3cd;\n    border: 1px solid #ffeeba;\n  }\n  &.danger {\n    background-color: #f8d7da;\n    border: 1px solid #f5c6cb;\n  }\n`;\n\nconst Text = styled.p`\n  margin: 0 0 0 16px;\n  width: fit-content;\n  font-weight: 400;\n`;\n\nexport const Information = ({ children, color, style }) => {\n  const [filterIcon] = Object.entries(icons).filter((icon) => {\n    return icon[0] === color ? icon[1] : null;\n  });\n  return (\n    <Alert className={color} style={style}>\n      {filterIcon[1]}\n      <Text>{children}</Text>\n    </Alert>\n  );\n};\n\nInformation.propTypes = {\n  color: PropTypes.string.isRequired,\n  children: PropTypes.node.isRequired,\n  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n};\n\nInformation.defaultProps = {\n  style: undefined,\n};\n"],"sourceRoot":""}