{"version":3,"sources":["webpack:///./src/img/help/editroles1.png","webpack:///./src/img/help/assignroles2.png","webpack:///./src/img/help/editroles2.png","webpack:///./src/img/help/assignroles1.png","webpack:///./src/pages/help/how-to-assign-and-edit-user-roles.js","webpack:///./src/components/help/helpImage/styled.js","webpack:///./src/components/help/helpImage/index.js","webpack:///./src/components/ui/image-modal.js"],"names":["module","exports","related","frontmatter","metaTitle","metaDescription","canonical","Wrapped","Article","src","assignroles1","alt","title","assignroles2","editroles1","editroles2","section","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","imgStyle","imgModalStyle","lazy","modal","onClick","loading","React","Component"],"mappings":"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","file":"component---src-pages-help-how-to-assign-and-edit-user-roles-js-e71fb59544d5bfd83f28.js","sourcesContent":["module.exports = __webpack_public_path__ + \"static/editroles1-a73f76eda1f4b896d220c38be2662fbe.png\";","module.exports = __webpack_public_path__ + \"static/assignroles2-af509212746a2d128484c7c43301395c.png\";","module.exports = __webpack_public_path__ + \"static/editroles2-35ae290c56cfa16403328244aa19734b.png\";","module.exports = __webpack_public_path__ + \"static/assignroles1-08e36d906a6bc98ac9ed8d36893c7a5b.png\";","import React from 'react';\nimport Article from 'components/help/helpArticle';\nimport Image from 'components/help/helpImage';\nimport assignroles1 from 'img/help/assignroles1.png';\nimport assignroles2 from 'img/help/assignroles2.png';\nimport editroles1 from 'img/help/editroles1.png';\nimport editroles2 from 'img/help/editroles2.png';\n\nconst Content = () => {\n  return (\n    <div>\n      <p>\n        You can <strong>assign different</strong> user roles in LiveSession. Thanks to this, you\n        have more control over your team’s access to the app. You can choose from three different\n        roles:\n      </p>\n      <p>\n        <strong>Owner:</strong>\n      </p>\n      <ul>\n        <li>has full access to all features</li>\n        <li>can add other users and edit user roles</li>\n        <li>can’t be removed from the account</li>\n      </ul>\n      <p>\n        <strong>Admin:</strong>\n      </p>\n      <ul>\n        <li>has full access to all features</li>\n        <li>can add other users and edit user roles</li>\n      </ul>\n      <p>\n        <strong>User:</strong>\n      </p>\n      <ul>\n        <li>can’t add or remove websites</li>\n        <li>can’t access Invoices and Plan & Billing</li>\n        <li>can only see basic plan info and the number of sessions left for the account</li>\n      </ul>\n      <p>\n        Here’s how to <strong>assign user roles</strong> to your teammates:\n      </p>\n      <ol>\n        <li>\n          Go to the Team tab and click on the Invite Teammate button in the top right corner. You’ll\n          see a pop-up window:\n          <Image src={assignroles1} alt=\"Invite teammate\" title=\"Send invitation\" />\n        </li>\n        <li>\n          Enter the teammate’s email and choose their role, either User or Admin:\n          <Image\n            src={assignroles2}\n            alt=\"Choose role and fill an email address\"\n            title=\"Send invitation\"\n          />\n        </li>\n        <li>Click on the “Send Invitation” button.</li>\n      </ol>\n      <p>\n        Here’s how to <strong>edit user roles:</strong>\n      </p>\n      <ol>\n        <li>\n          Go to the Team tab. You’ll see a list of all the users:\n          <Image src={editroles1} alt=\"Edit roles\" title=\"Team tab - list of users\" />\n        </li>\n        <li>\n          Find the user you’d like to edit and select a role from the drop-down menu:{' '}\n          <Image\n            src={editroles2}\n            alt=\"Edit roles - select a role\"\n            title=\"Team tab - list of roles\"\n          />\n        </li>\n        <li>All done! The role is now updated.</li>\n      </ol>\n    </div>\n  );\n};\n\nconst related = [];\n\nexport const frontmatter = {\n  metaTitle: 'How to assign and edit user roles?',\n  metaDescription: 'You can assign different user roles in LiveSession',\n  canonical: '/help/how-to-assign-and-edit-user-roles/',\n};\n\nconst Wrapped = Article(Content);\n\nexport default () => (\n  <Wrapped related={related} section=\"Product\" title={frontmatter.metaTitle} {...frontmatter} />\n);\n","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"],"sourceRoot":""}