{"version":3,"sources":["webpack:///./src/img/livesessionApp/planbilling.png","webpack:///./src/components/help/helpImage/styled.js","webpack:///./src/components/help/helpImage/index.js","webpack:///./src/components/ui/image-modal.js","webpack:///./src/img/livesessionApp/planbillingquora.png","webpack:///./src/img/livesessionApp/quoralimitex1.svg","webpack:///./src/img/livesessionApp/quoralimitex2.svg","webpack:///./src/pages/help/how-retention-and-quota-limits-work.js"],"names":["module","exports","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","related","link","description","frontmatter","metaTitle","metaDescription","canonical","Wrapped","Article","href","target","rel","planandbillingquora","planandbilling","ex1","boxShadow","margin","border","ex2","section"],"mappings":"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","file":"component---src-pages-help-how-retention-and-quota-limits-work-js-4eb96dcc331d8c037d7b.js","sourcesContent":["module.exports = __webpack_public_path__ + \"static/planbilling-55cefd6b56708ab236529d4648d3e81b.png\";","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/planbillingquora-ae252d1155b36a18889260e4f743507b.png\";","module.exports = __webpack_public_path__ + \"static/quoralimitex1-ed8c59758dbd25138ef1d7c7428f6bb4.svg\";","module.exports = __webpack_public_path__ + \"static/quoralimitex2-ba1543d8fbfece82b4b3a59ffcd49b6c.svg\";","import React from 'react';\nimport Article, { SubTitle } from 'components/help/helpArticle';\nimport Image from 'components/help/helpImage';\nimport planandbilling from 'img/livesessionApp/planbilling.png';\nimport planandbillingquora from 'img/livesessionApp/planbillingquora.png';\nimport ex1 from 'img/livesessionApp/quoralimitex1.svg';\nimport ex2 from 'img/livesessionApp/quoralimitex2.svg';\n\nconst Content = () => {\n  return (\n    <div>\n      <SubTitle>How quota limit works</SubTitle>\n      <p>\n        Every 30 days, you’re assigned a certain number of sessions. For instance, when your plan\n        covers 10 000 sessions, you can record 10 000 sessions within 30 days.\n      </p>\n      <p>\n        If you record the maximum number of sessions before the 30-day period ends, you won’t be\n        able to record more sessions until the quota limit is renewed. Deleting recordings won’t\n        allow you to record more sessions. If you’d like to extend the limit, you can{' '}\n        <a href=\"https://livesession.io/pricing/\" target=\"_blank\" rel=\"noopener noreferrer\">\n          upgrade\n        </a>{' '}\n        to a more extended plan.{' '}\n      </p>\n      <p>\n        You can find information about your current quota limit in Settings &gt; Plan & Billing.\n      </p>\n      <Image\n        src={planandbillingquora}\n        alt=\"Plan & Billing - quora limit\"\n        title=\"Check your current quora limit\"\n      />\n      <SubTitle>How retention works</SubTitle>\n      <p>\n        Every pricing plan comes with a different data retention period. This is why every session\n        recording is stored together with information about its retention option (1, 3, 6 or 12\n        months).\n      </p>\n      <p>\n        Based on this data, the session will be deleted from your LiveSession account after a given\n        period.{' '}\n      </p>\n      <p>\n        Changing your retention option doesn’t change the retention period for sessions that were\n        already recorded. If you know that you’re going to need a longer retention period, it’s\n        better to choose it at the start.\n      </p>\n      <p>\n        You can find more detailed information in the <strong>Settings &gt; Plan & Billing</strong>{' '}\n        section.{' '}\n      </p>\n      <Image\n        src={planandbilling}\n        alt=\"Plan & Billing - data retention\"\n        title=\"Check your data retention\"\n      />\n      <p>\n        <strong>Example 1</strong>: Your retention period is 1 month, your quota limit is 10 000\n        sessions and you’ve used it all on the 29th day. On the 30th day, you’ll be assigned another\n        10 000 sessions. If you use them all on the 30th day, you’ll have 20 000 session recordings\n        on your account. 10 000 of them will be deleted after 29 days, and the other 10 000 – after\n        30 days.{' '}\n      </p>\n      <Image\n        src={ex1}\n        alt=\"Plan & Billing - quora limit - example 1\"\n        title=\"Quora limit\"\n        cardStyle={{ boxShadow: 'none', margin: '2rem 0' }}\n        imgStyle={{ border: 'none' }}\n      />\n      <p>\n        <strong>Example 2</strong>: If your quota is 10 000 sessions and your retention period is 3\n        months, you’re able to record 10 000 sessions every month. By the end of the third month,\n        you can have up to 30 000 session recordings on your account. The first sessions will be\n        deleted after 3 months.\n      </p>\n      <Image\n        src={ex2}\n        alt=\"Plan & Billing - quora limit - example 2\"\n        title=\"Quora limit\"\n        cardStyle={{ boxShadow: 'none', margin: '2rem 0 0' }}\n        imgStyle={{ border: 'none' }}\n      />\n    </div>\n  );\n};\n\nconst related = [\n  {\n    link: '/help/what-is-a-session/',\n    title: 'What is a session?',\n    description: 'A session is a set of the user’s interactions with a website within a timeframe.',\n  },\n];\n\nexport const frontmatter = {\n  metaTitle: 'How retention and quota limits work?',\n  metaDescription: 'Check how retention and quota limit works',\n  canonical: '/help/how-retention-and-quota-limits-work/',\n};\n\nconst Wrapped = Article(Content);\n\nexport default () => (\n  <Wrapped related={related} section=\"Product\" title={frontmatter.metaTitle} {...frontmatter} />\n);\n"],"sourceRoot":""}