{"version":3,"sources":["webpack:///./src/pages/checklist/index.es.js","webpack:///./src/components/pages/Webinars/SelectorBlock.js","webpack:///./src/components/pages/Webinars/IntroBlocks.js","webpack:///./src/components/pages/Webinars/WebinarTitleBlock.js","webpack:///./src/components/pages/Webinars/WebinarProgramBlock.js","webpack:///./src/components/pages/WebinarsPage.js"],"names":["seo","title","keywords","description","props","checklist","pageQuery","StyledGrid","styled","Grid","breakpoint","down","ContentGrid","StyledMenuItem","MenuItem","theme","typography","fontFamily","subtitle2","fontSize","colors","shades","orange","light","StyledSelect","Select","StyledMobileSelect","NativeSelect","SelectorBlock","setSelectValue","webinars","data","selectedWebinar","isChecklist","isWhitepaper","isMobile","window","test","navigator","userAgent","container","justify","alignItems","item","xs","sm","md","lg","value","frontmatter","id","onChange","e","target","displayEmpty","map","web","autoFocusItem","disabled","disableScrollLock","ImagesBlocks","GridIntro","Content","StyledContainer","Container","Title","Typography","purple","IntroBlocks","useState","width","setWidth","heightHeader","setHeightHeader","heightIntro","setHeightIntro","heightTitleIntro","setHeightTitleIntro","updateDimensions","headerNav","document","getElementById","heightIntroDim","heightTitleIntroDim","innerWidth","offsetHeight","useEffect","addEventListener","removeEventListener","heightBackground","heightTitle","spacing","dangerouslySetInnerHTML","__html","dataIntroBlockTitle","html","variant","SubIntroBackground","widthWindow","StyledTypography","StyledButton","Button","WebinarTitleBlock","lang","openModal","setOpenModal","subtitle","duration","size","color","mt","onClick","FormModal","open","handleClose","type","FORM_TYPES","toUpperCase","webinar","WebinarProgramList","WebinarProgramBlock","style","textAlign","program","replace","LinkGrid","WebinarsPage","selectValue","allImages","allWebinars","nodes","linkBlocksData","markdownContent","dataBlockLinkBody","find","node","images","image","base","location","whitepaper","pageContext","langKey","ResourcesBlocks","LinkBlocks","LinkBlockBackground"],"mappings":"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","file":"component---src-pages-checklist-index-es-js-a2a60a32c45efa0c45d0.js","sourcesContent":["import React from 'react';\nimport { graphql } from 'gatsby';\nimport WebinarsPage from 'components/pages/WebinarsPage';\n\nconst seo = {\n  title:\n    'Conviértase en un experto en experiencia del cliente con las listas de comprobación de Q°emotion.',\n  keywords: [],\n  description:\n    'Explore nuestras listas de comprobación y utilice las emociones para optimizar los recorridos de sus clientes mediante el análisis semántico.',\n};\n\nexport default props => <WebinarsPage {...props} seo={seo} checklist />;\n\nexport const pageQuery = graphql`\n  query {\n    dataIntroBlockTitle: markdownRemark(\n      frontmatter: {\n        pageType: { eq: \"checklists\" }\n        blockType: { eq: \"introBlock\" }\n        component: { eq: \"title\" }\n        lang: { eq: \"es\" }\n      }\n    ) {\n      html\n    }\n    allImages: allFile(filter: { relativeDirectory: { eq: \"bubbleImages\" } }) {\n      nodes {\n        base\n        childImageSharp {\n          fluid(maxWidth: 550, quality: 100) {\n            presentationWidth\n            ...GatsbyImageSharpFluid_withWebp_noBase64\n          }\n        }\n      }\n    }\n    allWebinars: allMarkdownRemark(\n      filter: {\n        frontmatter: {\n          pageType: { eq: \"checklists\" }\n          blockType: { eq: \"webinarBlock\" }\n          lang: { eq: \"es\" }\n        }\n      }\n      sort: { fields: [frontmatter___index] }\n    ) {\n      nodes {\n        frontmatter {\n          title\n          id\n          subtitle\n          program\n        }\n        html\n      }\n    }\n    dataBlockLinkBody: allMarkdownRemark(\n      filter: {\n        frontmatter: {\n          pageType: { eq: \"clientCase\" }\n          blockType: { eq: \"linkBlock\" }\n          lang: { eq: \"es\" }\n        }\n      }\n      sort: { fields: [frontmatter___idBlock] }\n    ) {\n      nodes {\n        rawMarkdownBody\n        frontmatter {\n          subTitle\n          color\n          link\n          buttonText\n        }\n      }\n    }\n  }\n`;\n","import React from 'react';\nimport styled from 'styled-components';\nimport {\n  Grid,\n  Typography,\n  Select,\n  NativeSelect,\n  MenuItem\n} from '@material-ui/core';\nimport { breakpoint } from 'utils/mediaQueries';\nimport ImagesBlocks from 'components/pages/ClientCase/ProblematicBlocks/ImagesBlocks';\nimport { colors } from 'styles';\nimport { FormattedMessage } from 'react-intl';\n\nconst StyledGrid = styled(Grid)`\n  height: 15rem;\n  padding-top: 3%;\n  ${breakpoint.down('lg')`\n   margin-top: 7%`};\n`;\n\nconst ContentGrid = styled(Grid)`\n  width: 100%;\n  text-align: center;\n  padding-top: 2rem;\n`;\n\nconst StyledMenuItem = styled(MenuItem)`\n  font-family: ${props => `${props.theme.typography.fontFamily}`};\n  font-size: ${props => `${props.theme.typography.subtitle2.fontSize}px`};\n  &:focus {\n    background-color: transparent !important;\n    color: white;\n  }\n  &:hover {\n    background-color: ${colors.shades.orange.light} !important;\n    color: white;\n  }\n`;\n\nconst StyledSelect = styled(Select)`\n  text-overflow: ellipsis !important;\n  overflow: hidden;\n  width: 33em;\n  ${breakpoint.down('sm')`\n   width: 20em;`};\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  outline: none;\n  background-color: rgba(173, 147, 160, 0.1);\n  border-radius: 1rem;\n  > div {\n    display: flex;\n    flex-direction: row;\n    text-overflow: ellipsis !important;\n  }\n  > div > div {\n    text-overflow: ellipsis !important;\n    width: 100%;\n    ${breakpoint.down('sm')`\n    width: 75%; text-overflow: ellipsis;`};\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    padding-left: 1rem;\n    font-family: ${props => `${props.theme.typography.fontFamily}`};\n    font-size: ${props => `${props.theme.typography.subtitle2.fontSize}px`};\n    &:focus {\n      background-color: transparent;\n    }\n  }\n  > div > svg {\n    padding-left: 0.5em;\n    color: ${colors.orange};\n    width: 3rem;\n    height: 3rem;\n    top: -0.4rem;\n    right: 0;\n    position: absolute;\n  }\n  &:before {\n    content: none;\n  }\n  &:after {\n    content: none;\n  }\n`;\n\nconst StyledMobileSelect = styled(NativeSelect)`\n  text-overflow: ellipsis !important;\n  width: 33em;\n  ${breakpoint.down('sm')`\n   width: 20em;`};\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  outline: none;\n  background-color: rgba(173, 147, 160, 0.1);\n  border-radius: 1rem;\n  > div {\n    display: flex;\n    flex-direction: row;\n    text-overflow: ellipsis !important;\n  }\n  > div > div {\n    text-overflow: ellipsis !important;\n    width: 100%;\n    ${breakpoint.down('sm')`\n    width: 75%; text-overflow: ellipsis;`};\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    padding-left: 1rem;\n    font-family: ${props => `${props.theme.typography.fontFamily}`};\n    font-size: ${props => `${props.theme.typography.subtitle2.fontSize}px`};\n    &:focus {\n      background-color: transparent;\n    }\n  }\n  > div > svg {\n    padding-left: 0.5em;\n    color: ${colors.orange};\n    width: 3rem;\n    height: 3rem;\n    top: -0.4rem;\n    right: 0;\n    position: absolute;\n  }\n  &:before {\n    content: none;\n  }\n  &:after {\n    content: none;\n  }\n`;\n\nconst SelectorBlock = ({\n  setSelectValue,\n  webinars,\n  data,\n  selectedWebinar,\n  isChecklist,\n  isWhitepaper,\n}) => {\n  const isMobile =\n    typeof window !== 'undefined' &&\n    /iPhone|iPad|iPod|Android/i.test(window.navigator.userAgent);\n  return (\n    <StyledGrid container justify={'center'} alignItems={'flex-start'}>\n      <ContentGrid\n        container\n        item\n        xs={10}\n        sm={8}\n        md={6}\n        lg={5}\n        alignItems=\"center\"\n        justify=\"center\"\n      >\n        {isMobile ? (\n          <StyledMobileSelect\n            value={selectedWebinar?.frontmatter.id}\n            onChange={e => setSelectValue(e.target.value)}\n            displayEmpty\n          >\n            {webinars.map(web => (\n              <option value={web.frontmatter.id}>\n                {web.frontmatter.title}\n              </option>\n            ))}\n          </StyledMobileSelect>\n        ) : (\n          <StyledSelect\n            value={selectedWebinar?.frontmatter.id}\n            onChange={e => setSelectValue(e.target.value)}\n            displayEmpty\n            autoFocusItem={false}\n          >\n            <StyledMenuItem value=\"\" disabled>\n              <Typography>\n                <b>\n                  <FormattedMessage\n                    id={\n                      isChecklist\n                        ? 'checklists.listOfChecklists'\n                        : isWhitepaper\n                        ? 'whitepapers.listOfWhitepapers'\n                        : 'webinars.listOfWebinars'\n                    }\n                  />\n                </b>\n              </Typography>\n            </StyledMenuItem>\n            {webinars.map(web => (\n              <StyledMenuItem disableScrollLock value={web.frontmatter.id}>\n                <Typography>{web.frontmatter.title}</Typography>\n              </StyledMenuItem>\n            ))}\n          </StyledSelect>\n        )}\n      </ContentGrid>\n      <ImagesBlocks data={data} />\n    </StyledGrid>\n  );\n};\n\nexport default SelectorBlock;\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { Typography, Grid } from '@material-ui/core';\nimport { Container, Content } from 'components/basics';\nimport { colors } from 'styles';\nimport { breakpoint } from 'utils/mediaQueries';\nimport SubIntroBackground from 'components/pages/Solution/Marketing/SubIntroBackground';\nimport SelectorBlock from 'src/components/pages/Webinars/SelectorBlock';\n\nconst GridIntro = styled(Grid)`\n  ${Content};\n  max-width: 1080px;\n  padding: 0 2rem;\n  ${breakpoint.down('lg')`\n  padding:1rem 2rem;`};\n`;\nconst StyledContainer = styled(Container)`\n  padding-top: 2rem;\n  ${breakpoint.down('md')`\n  padding-top: 0; \n  `}\n`;\n\nconst Title = styled(Typography)`\n  & span {\n    color: ${colors.purple};\n  }\n  width: 75%;\n  ${breakpoint.down('lg')`\n  font-size: 3em; width: 100%;`};\n`;\n\nconst IntroBlocks = ({ data, setSelectValue, webinars, selectedWebinar, isChecklist, isWhitepaper }) => {\n  const [width, setWidth] = useState(200);\n  const [heightHeader, setHeightHeader] = useState(0);\n  const [heightIntro, setHeightIntro] = useState(0);\n  const [heightTitleIntro, setHeightTitleIntro] = useState(0);\n\n  const updateDimensions = () => {\n    const headerNav = document.getElementById('headerNav');\n    const heightIntroDim = document.getElementById('introBlock');\n    const heightTitleIntroDim = document.getElementById('titleIntroBlock');\n    setWidth(window.innerWidth);\n    setHeightHeader(headerNav && headerNav.offsetHeight);\n    setHeightIntro(heightIntroDim && heightIntroDim.offsetHeight);\n    setHeightTitleIntro(\n      heightTitleIntroDim && heightTitleIntroDim.offsetHeight\n    );\n  };\n\n  useEffect(() => {\n    const headerNav = document.getElementById('headerNav');\n    if (headerNav) {\n      updateDimensions();\n    }\n  }, [heightHeader]);\n\n  useEffect(() => {\n    window.addEventListener('resize', updateDimensions);\n    return () => window.removeEventListener('resize', updateDimensions);\n  }, []);\n\n  const heightBackground = heightHeader + heightIntro + 216;\n  const heightTitle = heightTitleIntro + heightHeader + 96;\n  return (\n    <StyledContainer id=\"introBlock\">\n      <GridIntro container spacing={24} sm={2} id=\"titleIntroBlock\">\n        <Title\n          dangerouslySetInnerHTML={{ __html: data.dataIntroBlockTitle.html }}\n          variant=\"h1\"\n        />\n      </GridIntro>\n      <SelectorBlock\n        setSelectValue={setSelectValue}\n        webinars={webinars}\n        data={data}\n        selectedWebinar={selectedWebinar}\n        isChecklist={isChecklist}\n        isWhitepaper={isWhitepaper}\n      />\n      <SubIntroBackground\n        widthWindow={width}\n        heightBackground={heightBackground}\n        heightTitle={heightTitle}\n      />\n    </StyledContainer>\n  );\n};\n\nexport default IntroBlocks;\n","import React, { useState } from 'react';\nimport { Grid, Typography, Button } from '@material-ui/core';\nimport styled from 'styled-components';\nimport { breakpoint } from 'src/utils/mediaQueries';\nimport { FormattedMessage } from 'react-intl';\nimport FormModal from 'components/pages/Index/FormModals/FormModal';\nimport { FORM_TYPES } from 'components/pages/Index/FormModals/formConfigs';\n\nconst StyledGrid = styled(Grid)`\n  height: 17.5rem;\n  ${breakpoint.down('sm')`\n   margin-top: -20%`};\n`;\n\nconst ContentGrid = styled(Grid)`\n  width: 100%;\n  text-align: center;\n`;\n\nconst StyledTypography = styled(Typography)`\n  font-size: 2em !important;\n`;\n\nconst StyledButton = styled(Button)`\n  margin-top: 3.5em;\n  ${breakpoint.down('lg')`\n   margin-top: 1em`};\n`;\n\nconst WebinarTitleBlock = ({\n  selectedWebinar,\n  lang,\n  isChecklist,\n  isWhitepaper,\n}) => {\n  const [openModal, setOpenModal] = useState(false);\n  return (\n    <StyledGrid container justify={'center'} alignItems={'flex-start'}>\n      <ContentGrid\n        container\n        item\n        xs={10}\n        sm={8}\n        md={6}\n        lg={5}\n        alignItems=\"center\"\n        justify=\"center\"\n      >\n        {selectedWebinar && selectedWebinar.frontmatter && (\n          <div>\n            <StyledTypography variant=\"h4\">\n              {selectedWebinar.frontmatter.subtitle ||\n                `\"${selectedWebinar.frontmatter.title}\"`}\n            </StyledTypography>\n            {selectedWebinar.frontmatter.duration && (\n              <Typography>\n                <FormattedMessage id=\"webinars.duration\" /> :{' '}\n                {selectedWebinar.frontmatter.duration}\n              </Typography>\n            )}\n            <StyledButton\n              size=\"large\"\n              variant=\"contained\"\n              color=\"primary\"\n              mt={2}\n              onClick={() => setOpenModal(!openModal)}\n            >\n              <FormattedMessage\n                id={\n                  isChecklist\n                    ? 'button.downloadChecklist'\n                    : isWhitepaper\n                    ? 'button.discoverWhitepaper'\n                    : 'button.watchWebinar'\n                }\n              />\n            </StyledButton>\n            <FormModal\n              lang={lang}\n              open={openModal}\n              handleClose={() => setOpenModal(!openModal)}\n              type={\n                FORM_TYPES[\n                  `${\n                    isChecklist\n                      ? 'CHECKLIST'\n                      : isWhitepaper\n                      ? 'WHITEPAPER'\n                      : 'WEBINAR'\n                  }_${lang.toUpperCase()}`\n                ]\n              }\n              webinar={selectedWebinar.frontmatter.id}\n            />\n          </div>\n        )}\n      </ContentGrid>\n    </StyledGrid>\n  );\n};\n\nexport default WebinarTitleBlock;\n","import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { Grid, Typography } from '@material-ui/core';\nimport { breakpoint } from 'src/utils/mediaQueries';\nimport { Button } from 'components/basics';\nimport { FormattedMessage } from 'react-intl';\nimport FormModal from 'components/pages/Index/FormModals/FormModal';\nimport { FORM_TYPES } from 'components/pages/Index/FormModals/formConfigs';\n\nconst StyledGrid = styled(Grid)`\n  min-height: 20rem;\n  margin-bottom: 3%;\n  ${breakpoint.down('lg')`\n   margin-top: 10%`};\n`;\n\nconst ContentGrid = styled(Grid)`\n  width: 100%;\n`;\n\nconst WebinarProgramList = styled(Typography)`\n  & li ul li {\n    font-size: 1.5rem !important;\n  }\n  margin-top: ${({ isChecklist }) => (isChecklist ? '2em' : '1em')};\n  ${breakpoint.down('lg')`\n  font-size: 1.5em;\n  `}\n  & ol li {\n    font-size: 1.5em;\n    padding: 0.5em 0;\n  }\n`;\n\nconst WebinarProgramBlock = ({\n  selectedWebinar,\n  lang,\n  isChecklist,\n  isWhitepaper,\n}) => {\n  const [openModal, setOpenModal] = useState(false);\n  return (\n    <StyledGrid container justify={'center'} alignItems={'flex-start'}>\n      <ContentGrid\n        container\n        item\n        xs={10}\n        sm={8}\n        md={6}\n        lg={5}\n        alignItems=\"center\"\n        justify=\"center\"\n      >\n        <Typography variant=\"h5\" style={{ textAlign: 'center' }}>\n          {isChecklist || isWhitepaper ? (\n            selectedWebinar?.frontmatter?.program\n          ) : (\n            <FormattedMessage id=\"webinars.program\" />\n          )}\n        </Typography>\n        <br />\n        <WebinarProgramList isChecklist={isChecklist || isWhitepaper}>\n          <div\n            dangerouslySetInnerHTML={{\n              __html: selectedWebinar?.html.replace(\n                /\\s(?=[\\?!]*(\\?|!))/g,\n                '&nbsp;'\n              ),\n            }}\n          />\n        </WebinarProgramList>\n        <Button\n          size=\"large\"\n          variant=\"contained\"\n          color=\"primary\"\n          mt={2}\n          onClick={() => setOpenModal(!openModal)}\n        >\n          <FormattedMessage\n            id={\n              isChecklist\n                ? 'button.downloadChecklist'\n                : isWhitepaper\n                ? 'button.discoverWhitepaper'\n                : 'button.watchWebinar'\n            }\n          />\n        </Button>\n        <FormModal\n          lang={lang}\n          open={openModal}\n          handleClose={() => setOpenModal(!openModal)}\n          type={\n            FORM_TYPES[\n              `${\n                isChecklist\n                  ? 'CHECKLIST'\n                  : isWhitepaper\n                  ? 'WHITEPAPER'\n                  : 'WEBINAR'\n              }_${lang.toUpperCase()}`\n            ]\n          }\n          webinar={selectedWebinar?.frontmatter?.id}\n        />\n      </ContentGrid>\n    </StyledGrid>\n  );\n};\n\nexport default WebinarProgramBlock;\n","import React, { useState } from 'react';\nimport Layout from 'components/layout';\nimport IntroBlocks from 'components/pages/Webinars/IntroBlocks';\nimport styled from 'styled-components';\nimport { Grid } from '@material-ui/core';\nimport WebinarTitleBlock from 'components/pages/Webinars/WebinarTitleBlock';\nimport { find } from 'lodash';\nimport WebinarProgramBlock from 'src/components/pages/Webinars/WebinarProgramBlock';\nimport LinkBlocks from 'components/LinkBlock/LinkBlocks';\nimport LinkBlockBackground from 'components/pages/Solution/Marketing/LinkBlockBackground';\nimport { breakpoint } from 'utils/mediaQueries';\nimport ResourcesBlocks from 'components/pages/Webinars/ResourcesBlocks';\n\nconst LinkGrid = styled(Grid)`\n  margin-top: -4rem;\n  position: relative;\n  padding-top: 10rem;\n  padding-bottom: 4rem;\n  background-position: top;\n  ${breakpoint.down('lg')`\n  padding-top: 6rem;padding-bottom: 2rem;margin-top: 0;`}\n  ${breakpoint.down('md')`\n  padding-bottom: 4rem;`}\n  ${breakpoint.down('sm')`padding-top:0;padding-bottom: 6rem;`};\n`;\n\nconst WebinarsPage = props => {\n  const [selectValue, setSelectValue] = useState('');\n  const {\n    dataIntroBlockTitle,\n    allImages,\n    allWebinars: { nodes: webinars },\n    dataBlockLinkBody,\n  } = props.data;\n\n  const linkBlocksData = {\n    markdownContent: dataBlockLinkBody,\n  };\n  const selectedWebinar =\n    find(webinars, node => node.frontmatter.id === selectValue) || webinars[0];\n  const images = [\n    find(allImages.nodes, image => image.base === 'manGreen.png'),\n    find(allImages.nodes, image => image.base === 'girlBlue.png'),\n  ];\n  return (\n    <Layout location={props.location} seo={{ ...props.seo }}>\n      <IntroBlocks\n        data={{ dataIntroBlockTitle, images }}\n        selectValue={selectValue}\n        setSelectValue={setSelectValue}\n        webinars={webinars}\n        selectedWebinar={selectedWebinar}\n        isChecklist={props.checklist}\n        isWhitepaper={props.whitepaper}\n      />\n      <WebinarTitleBlock\n        selectedWebinar={selectedWebinar}\n        lang={props.pageContext.langKey}\n        isChecklist={props.checklist}\n        isWhitepaper={props.whitepaper}\n      />\n      <WebinarProgramBlock\n        selectedWebinar={selectedWebinar}\n        lang={props.pageContext.langKey}\n        isChecklist={props.checklist}\n        isWhitepaper={props.whitepaper}\n      />\n      <ResourcesBlocks lang={props.pageContext.langKey} />\n      <LinkGrid>\n        <LinkBlocks\n          data={linkBlocksData.markdownContent.nodes}\n          lang={props.pageContext.langKey}\n        />\n        <LinkBlockBackground />\n      </LinkGrid>\n    </Layout>\n  );\n};\n\nexport default WebinarsPage;\n"],"sourceRoot":""}