{"version":3,"sources":["webpack:///./src/pages/help/how-to-set-segment-summary-email.js","webpack:///./src/img/help/segments-notifications/notifications2.png","webpack:///./src/components/help/helpImage/styled.js","webpack:///./src/components/help/helpImage/index.js","webpack:///./src/img/help/segments-notifications/turnoff.png","webpack:///./src/components/ui/image-modal.js","webpack:///./src/img/help/segments-notifications/addNotifications.png","webpack:///./src/img/help/segments-notifications/options.png"],"names":["related","link","title","description","frontmatter","metaTitle","metaDescription","canonical","Wrapped","Article","src","img","lazy","alt","className","role","img1","img2","img3","section","module","exports","Card","styled","div","props","setMarginBottom","media","desktop","CardBody","HelpImage","cardStyle","style","defaultProps","Container","Box","Close","span","ImageWrapped","Image","ImageModal","escFunction","event","showModal","state","keyCode","closeModal","setState","openModal","window","innerWidth","componentDidMount","document","addEventListener","this","componentWillUnmount","removeEventListener","render","imgStyle","imgModalStyle","modal","onClick","loading","React","Component"],"mappings":"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","file":"component---src-pages-help-how-to-set-segment-summary-email-js-b641299d5fd178099483.js","sourcesContent":["import React from 'react';\nimport Article, { SubTitle } from 'components/help/helpArticle';\nimport Image from 'components/help/helpImage';\nimport img from 'img/help/segments-notifications/notifications2.png';\nimport img1 from 'img/help/segments-notifications/addNotifications.png';\nimport img2 from 'img/help/segments-notifications/options.png';\nimport img3 from 'img/help/segments-notifications/turnoff.png';\n\nconst Content = () => {\n  return (\n    <div>\n      <SubTitle>What is segment summary?</SubTitle>\n      <p>\n        Segment summary email can be useful to get daily or weekly updates of the segments that\n        you’re following. It contains a summary of segments (grouped to a website) with number of\n        sessions and percentage change in a daily or weekly period (depending on the your\n        configuration).\n      </p>\n      <Image\n        src={img}\n        lazy\n        alt=\"Segments notifications email - preview\"\n        title=\"Segments summary email\"\n      />\n      <SubTitle>How it works?</SubTitle>\n      <p>\n        Everyday and every Monday (for a weekly notifications) at 5AM UTC we calculate the number of\n        sessions in segments and send you an email with the summary. Depending on your settings, the\n        number of sessions represent:\n      </p>\n      <ul>\n        <li>\n          last day from 00:00 UTC to 23:59 UTC (for a <strong>daily notifications</strong>)\n        </li>\n        <li>\n          last Monday from 00:00 UTC to Sunday 23:59 UTC (for a{' '}\n          <strong>weekly notifications</strong>)\n        </li>\n      </ul>\n      <p className=\"alert alert-primary mb-5 mt-5\" role=\"alert\">\n        <strong>Important</strong>: Values are calculated for a UTC timezone. The number of sessions\n        can vary from the values in application for the same period. LiveSession application shows\n        sessions based on your current timezone.\n      </p>\n\n      <SubTitle>How to add or remove segment?</SubTitle>\n      <p>You can add or remove segments in two different way:</p>\n      <ol>\n        <li>\n          <p>By clicking on the “Add to summary” button on sessions list:</p>\n          <Image\n            src={img1}\n            lazy\n            alt=\"Add to summary - button\"\n            title=\"Add to summary on sessions list\"\n          />\n          <p>Current selected segment will be added for a to segments summary email. </p>\n        </li>\n        <li>\n          <p>\n            By adding or removing a segment from a list of following segments in “Settings &gt;\n            Notifications”:\n          </p>\n        </li>\n      </ol>\n      <Image\n        src={img2}\n        lazy\n        alt=\"LiveSession App - Select segments\"\n        title=\"Select segments from a list\"\n      />\n\n      <p className=\"alert alert-primary mb-5 mt-5\" role=\"alert\">\n        <strong>Important</strong>: Segments are linked with a website. If you want to get segment\n        summary for a multiple websites, you have to add it for each one.\n      </p>\n      <SubTitle>How to change frequency or turn off notifications? </SubTitle>\n      <p>To turn off notifications switch the button in “Settings &gt; Notifications”:</p>\n      <Image\n        src={img3}\n        lazy\n        alt=\"LiveSession App - turn off segments summary\"\n        title=\"Turn off segments notifications\"\n      />\n      <p>\n        To change the frequency, select “<strong>daily</strong>” or “<strong>weekly</strong>”\n        notifications.\n      </p>\n      <p>Confirm the change by clicking “Save changes” button.</p>\n    </div>\n  );\n};\n\nconst related = [\n  {\n    link: '/help/how-to-use-inspect-mode/',\n    title: 'How to use Inspect Mode?',\n    description:\n      'During session replay, pick a specific element and search through recordings to learn how people interact with your website.',\n  },\n  {\n    link: '/help/how-to-record-keystrokes/',\n    title: \"How to record user's keystrokes?\",\n    description: 'See how to enable global keystroke tracking.',\n  },\n];\n\nexport const frontmatter = {\n  metaTitle: 'How to set segment summary email?',\n  metaDescription: 'Get a daily or weekly email summary of segments that you follow. ',\n  canonical: '/help/how-to-set-segment-summary-email/',\n};\n\nconst Wrapped = Article(Content);\n\nexport default () => (\n  <Wrapped related={related} section=\"Product\" title={frontmatter.metaTitle} {...frontmatter} />\n);\n","module.exports = __webpack_public_path__ + \"static/notifications2-da7a38173083604601694c1a03fa3214.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","module.exports = __webpack_public_path__ + \"static/turnoff-f158af423cb9e71a354f93626a17325a.png\";","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/addNotifications-c0659c8075324e972217ae03da6b993c.png\";","module.exports = __webpack_public_path__ + \"static/options-eda230e987260f72a923e67ac37d99d8.png\";"],"sourceRoot":""}