{"version":3,"file":"73a0b915.js","mappings":"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","sources":["webpack://audioeye-web/./src/components/pageSlices/Feature.jsx"],"sourcesContent":["/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport React, { useState } from 'react'\nimport { graphql } from 'gatsby'\nimport styled from '@emotion/styled'\nimport idx from 'idx'\nimport Modal from '@material-ui/core/Modal'\nimport DialogContent from '@material-ui/core/DialogContent'\nimport { RichText } from 'prismic-reactjs'\nimport GatsbyLink from '../../utils/GatsbyLink'\nimport { theme } from '../../styles'\nimport CrossIcon from '../../../static/icons/misc-icons/close-icon.svg'\nimport Space from '../common/Space'\nimport Text from '../common/Text'\nimport Button from '../common/Button'\nimport TextLink from '../common/TextLink'\nimport AnimatedVideo from '../common/AnimatedVideo'\nimport VimeoIframe from '../common/VimeoIframe'\nimport getImage from '../../utils/getImage'\nimport LottieAnimation from '../LottieAnimation'\nimport violetCheckMarkIcon from '../../../static/icons/check-icons/violet-check-icon.svg'\n\nconst BG = styled.div`\n  position: absolute;\n  width: 500vw;\n  margin-left: -50%;\n  height: 100%;\n  z-index: -1;\n  background-color: ${p => (p.backgroundColor ? theme.color[p.backgroundColor] : theme.color.white)};\n  margin-top: ${p => (p.hasTopPadding ? '-80px' : '0px')};\n\n  @media (max-width: 1050px) {\n    margin-top: ${p => (!p.hasBottomPadding && p.hasTopPadding ? '-56px' : '0px')};\n  }\n`\n\nconst Wrapper = styled.div`\n  display: flex;\n  width: 100%;\n  flex-direction: ${p => (!p.reverse ? 'row' : 'row-reverse')};\n  justify-content: center;\n  min-height: ${p => (p.hasPadding ? '488px' : 'unset')};\n  width: calc(100% + 300px);\n  margin-left: -150px;\n  padding: 0px 150px;\n  padding-top: ${p => (p.hasTopPadding ? '80px' : '0px')};\n  padding-bottom: ${p => (p.hasBottomPadding ? '80px' : '0px')};\n  z-index: 0;\n  position: relative;\n\n  @media (max-width: 1050px) {\n    width: 100%;\n    margin-left: 0px;\n    flex-direction: column;\n    padding-top: ${p => (p.hasTopPadding ? '56px' : '0px')};\n    padding-bottom: ${p => (p.hasBottomPadding ? '56px' : '0px')};\n    padding-left: 16px;\n    padding-right: 16px;\n    height: auto;\n  }\n\n  @media (max-width: 800px) {\n    padding-left: 0px;\n    padding-right: 0px;\n  }\n\n  .hide-desktop {\n    display: none;\n    * {\n      text-align: center;\n    }\n\n    @media (max-width: 800px) {\n      display: block;\n    }\n  }\n  .hide-mobile {\n    display: block;\n    @media (max-width: 800px) {\n      display: none;\n    }\n  }\n`\n\nconst ImageWrapper = styled.div`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n`\n\nconst Image = styled.img`\n  display: flex;\n  width: 100%;\n  object-fit: contain;\n  margin: 0 auto;\n\n  @media (max-width: 1050px) {\n    max-width: 500px;\n    width: ${p => (p.hasVideo ? '80%' : '100%')};\n  }\n\n  @media (max-width: 800px) {\n    width: ${p => (p.hasVideo ? '95%' : '100%')};\n    max-width: unset;\n  }\n`\n\nconst LottieWrapper = styled.div`\n  width: 100%;\n  margin: 0 auto;\n\n  @media (max-width: 1050px) {\n    max-width: 500px;\n  }\n`\n\nconst InfoWrapper = styled.div`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  overflow-wrap: anywhere;\n  max-width: 100%;\n\n  ul {\n    margin-left: 20px;\n    li {\n      text-align: left !important;\n    }\n  }\n\n  @media (max-width: 1050px) {\n    max-width: 700px;\n    * {\n      text-align: center !important;\n      margin-left: auto;\n      margin-right: auto;\n    }\n  }\n`\n\nconst InfoOutWrapper = styled.div`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n`\n\nconst CheckMarkListWrapper = styled(Text)`\n  ul {\n    margin-block-start: 8px;\n    margin-block-end: 8px;\n  }\n  li {\n    padding-inline-start: 12px;\n    list-style-type: none;\n    list-style-image: url(${violetCheckMarkIcon});\n  }\n\n  @media (max-width: 800px) {\n    li {\n      margin-bottom: 16px;\n    }\n  }\n`\n\nexport const ModalWrapper = styled(DialogContent)`\n  height: 100vh;\n  padding: 0px;\n  overflow-y: unset;\n  position: relative;\n`\n\nexport const CloseIcon = styled.img`\n  width: 32px;\n  height: 32px;\n  padding: 9px;\n  position: absolute;\n  right: 20%;\n  top: 22%;\n  background-color: ${theme.color.white};\n  border-radius: 50%;\n  z-index: 9999;\n\n  @media (max-width: 1900px) {\n    top: 29%;\n  }\n\n  @media (max-width: 1300px) {\n    top: 33%;\n  }\n  @media (max-width: 1050px) {\n    top: 28%;\n    right: 4%;\n  }\n\n  @media (max-width: 800px) {\n    top: 31%;\n  }\n`\n\nconst LinkWrapper = styled.div`\n  @media (max-width: 800px) {\n    display: flex;\n    justify-content: center;\n    width: 100%;\n  }\n`\n\nconst Feature = ({ primary }) => {\n  const text = <RichText render={primary.text.richText} serializeHyperlink={GatsbyLink} />\n  const checkMarkList = <RichText render={primary.checkmark_list.richText} serializeHyperlink={GatsbyLink} />\n  const subtitle = <RichText render={primary.subtitle.richText} serializeHyperlink={GatsbyLink} />\n  const title = <RichText render={primary.title.richText} serializeHyperlink={GatsbyLink} />\n  const imageSrc = idx(primary, _ => _.image.url)\n  const reverse = primary.is_revert\n  const video = idx(primary, _ => _.video.url)\n  const animatedVideo = idx(primary, _ => _.animated_video.url)\n  const buttonText = idx(primary, _ => _.button_text.text)\n  const buttonUrl = idx(primary, _ => _.button_link.url)\n  const textLinkText = idx(primary, _ => _.text_link_text.text)\n  const textLinkUrl = idx(primary, _ => _.text_link.url)\n  const backgroundColor = primary.background_color\n  const hasTopPadding = idx(primary, _ => _.has_top_padding)\n  const hasBottomPadding = idx(primary, _ => _.has_bottom_padding)\n  const anchorId = primary.anchor_id\n  const rawLottie = primary.animation && primary.animation.text\n  const lottieAnim = rawLottie ? JSON.parse(primary.animation.text) : null\n  const lottieAriaLabel = idx(primary, _ => _.animation_aria_label)\n\n  const [open, setOpen] = useState(false)\n\n  return (\n    <Wrapper\n      id={anchorId || null}\n      reverse={reverse}\n      hasTopPadding={hasTopPadding === null ? true : hasTopPadding}\n      hasBottomPadding={hasBottomPadding === null ? true : hasBottomPadding}\n      backgroundColor={backgroundColor}\n    >\n      <div className=\"hide-desktop\">\n        {title && idx(title, _ => _.props.render[0].text) && (\n          <>\n            <Text font=\"heading3\" richText>\n              {title}\n            </Text>\n            <Space height={16} mobileHeight={24} />\n          </>\n        )}\n        {subtitle && idx(subtitle, _ => _.props.render[0].text) && (\n          <>\n            <Text font=\"bodyHeavy\" richText>\n              {subtitle}\n            </Text>\n            <Space height={16} />\n          </>\n        )}\n      </div>\n      {(imageSrc || lottieAnim) && !animatedVideo && (\n        <ImageWrapper reverse={reverse}>\n          {video ? (\n            <a\n              tabIndex=\"0\"\n              role=\"button\"\n              aria-label=\"Play AudioEye video opens in a modal\"\n              onKeyDown={e => {\n                if (e.key === 'Enter') setOpen(true)\n              }}\n              onClick={() => video && setOpen(true)}\n              style={{ width: '100%' }}\n            >\n              {getImage(primary.image, Image, { hasVideo: video.length > 0 })}\n            </a>\n          ) : lottieAnim && typeof lottieAnim === 'object' ? (\n            <LottieWrapper>\n              <LottieAnimation lotti={lottieAnim} lottieAriaLabel={lottieAriaLabel} />\n            </LottieWrapper>\n          ) : (\n            getImage(primary.image, Image)\n          )}\n        </ImageWrapper>\n      )}\n      {animatedVideo && <AnimatedVideo videoSrc={animatedVideo} poster={imageSrc} />}\n      {(animatedVideo || imageSrc || video || lottieAnim) && <Space width={80} tabletHeight={24} />}\n      <InfoOutWrapper tabindex=\"-1\" reverse={reverse}>\n        <InfoWrapper>\n          <div className=\"hide-mobile\">\n            {title && idx(title, _ => _.props.render[0].text) && (\n              <>\n                <Text font=\"heading3\" richText>\n                  {title}\n                </Text>\n                <Space height={16} />\n              </>\n            )}\n            {subtitle && idx(subtitle, _ => _.props.render[0].text) && (\n              <>\n                <Text font=\"heading4\" richText>\n                  {subtitle}\n                </Text>\n                <Space height={16} />\n              </>\n            )}\n          </div>\n          {text && idx(text, _ => _.props.render[0].text) && (\n            <>\n              <Text font=\"body\" richText>\n                {text}\n              </Text>\n              {checkMarkList && idx(checkMarkList, _ => _.props.render[0].text) ? (\n                <Space height={4} />\n              ) : (\n                <Space height={12} />\n              )}\n            </>\n          )}\n          {checkMarkList && idx(checkMarkList, _ => _.props.render[0].text) && (\n            <>\n              <CheckMarkListWrapper richText>{checkMarkList}</CheckMarkListWrapper>\n              <Space height={24} />\n            </>\n          )}\n          {textLinkUrl && (\n            <LinkWrapper>\n              <TextLink text={textLinkText} to={textLinkUrl} />\n            </LinkWrapper>\n          )}\n          {buttonUrl && !textLinkUrl && <Button text={buttonText} to={buttonUrl} />}\n        </InfoWrapper>\n      </InfoOutWrapper>\n      {video && (\n        <Modal open={(video && open) === true} onClose={() => video && setOpen(false)} aria-label=\"Video modal\">\n          <ModalWrapper>\n            <CloseIcon\n              tabIndex=\"0\"\n              src={CrossIcon}\n              aria-label=\"close\"\n              role=\"button\"\n              className=\"focus-outline\"\n              onClick={() => video && setOpen(false)}\n              onKeyDown={e => {\n                if (e.key === 'Enter') setOpen(false)\n              }}\n            />\n            <VimeoIframe isModal allowFullScreen video={video} autoPlay={false} />\n          </ModalWrapper>\n        </Modal>\n      )}\n      <BG\n        className=\"bg\"\n        backgroundColor={backgroundColor}\n        hasTopPadding={hasTopPadding === null ? true : hasTopPadding}\n        hasBottomPadding={hasBottomPadding === null ? true : hasBottomPadding}\n      />\n    </Wrapper>\n  )\n}\n\nexport default Feature\n\nexport const query = graphql`\n  fragment Feature on PrismicPageDataBodyFeature {\n    ...SliceBase\n    id\n    primary {\n      background_color\n      has_top_padding\n      has_bottom_padding\n      anchor_id\n      is_revert\n      button_link {\n        uid\n        url\n      }\n      button_text {\n        ...TextContent\n      }\n      text_link {\n        uid\n        url\n      }\n      text_link_text {\n        ...TextContent\n      }\n      video {\n        url\n      }\n      animated_video {\n        url\n      }\n      image {\n        alt\n        url\n        gatsbyImageData(width: 540)\n      }\n      text {\n        ...TextContent\n      }\n      checkmark_list {\n        ...TextContent\n      }\n      subtitle {\n        ...TextContent\n      }\n      title {\n        ...TextContent\n      }\n      animation {\n        ...TextContent\n      }\n      animation_aria_label\n    }\n  }\n\n  fragment PostFeature on PrismicPostDataBodyFeature {\n    ...SliceBase\n    id\n    primary {\n      background_color\n      has_top_padding\n      has_bottom_padding\n      anchor_id\n      is_revert\n      button_link {\n        uid\n        url\n      }\n      button_text {\n        ...TextContent\n      }\n      text_link {\n        uid\n        url\n      }\n      text_link_text {\n        ...TextContent\n      }\n      video {\n        url\n      }\n      animated_video {\n        url\n      }\n\n      image {\n        alt\n        url\n        gatsbyImageData(width: 540)\n      }\n      text {\n        ...TextContent\n      }\n      checkmark_list {\n        ...TextContent\n      }\n      subtitle {\n        ...TextContent\n      }\n      title {\n        ...TextContent\n      }\n      animation {\n        ...TextContent\n      }\n      animation_aria_label\n    }\n  }\n`\n"],"names":["BG","p","backgroundColor","theme","hasTopPadding","hasBottomPadding","Wrapper","reverse","hasPadding","ImageWrapper","Image","hasVideo","LottieWrapper","InfoWrapper","InfoOutWrapper","CheckMarkListWrapper","Text","violetCheckMarkIcon","ModalWrapper","DialogContent","CloseIcon","LinkWrapper","primary","text","RichText","render","richText","serializeHyperlink","GatsbyLink","checkMarkList","checkmark_list","subtitle","title","imageSrc","idx","_","image","url","is_revert","video","animatedVideo","animated_video","buttonText","button_text","buttonUrl","button_link","textLinkText","text_link_text","textLinkUrl","text_link","background_color","has_top_padding","has_bottom_padding","anchorId","anchor_id","lottieAnim","animation","JSON","parse","lottieAriaLabel","animation_aria_label","useState","open","setOpen","id","className","props","font","height","mobileHeight","tabIndex","role","onKeyDown","e","key","onClick","style","width","getImage","length","lotti","videoSrc","poster","tabletHeight","tabindex","to","onClose","src","CrossIcon","isModal","allowFullScreen","autoPlay"],"sourceRoot":""}