{"version":3,"sources":["webpack:///./src/proPages/index.tsx","webpack:///./src/components/support/topicCategories.tsx"],"names":["StyledSingleColumnContainer","styled","SingleColumnContainer","bp","tabletMin","StyledHeading","h2","colors","white","IndexPage","location","data","path","pathname","page","components","sections","map","section","index","internal","type","contentBlock","key","proVersion","heading","description","buttonsGroup","backgroundImageDesktop","backgroundImageTablet","backgroundImageMobile","contentTheme","contentPositionMobile","contentPositionDesktop","showAllButtonsDesktop","showAllButtonsMobile","enableBackgroundColor","contentBackground","mainHeroBlock","contentAlignCenterMobile","length","heightMobile","hero","leftSpanDesk","rightSpanDesk","leftSpanTab","rightSpanTab","level","size","content","imageElement","mobileBackgroundImage","desktopBackgroundImage","borderRadius","bulletInfoSections","ignorePadding","pro","whiteBg","topicsSection","backgroundColor","dark","center","className","endsWith","categories","topics","noTextClip","video","isFullWidth","fullWidth","mobileVideo","tabletVideo","desktopVideo","mobilePlaceholderImage","tabletPlaceholderImage","desktopPlaceholderImage","videoTrackingId","title","metadata","pageQuery","Container","TripleColumnContainer","Topic","div","teal","IconContainer","StyledTopicIcon","id","iconProps","icon","undefined","TopicCategories","category","text","label","onClick","navigate","name","paragraph","slice","MAX_DESC_LENGHT","trim"],"mappings":"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","file":"component---src-pro-pages-index-tsx-6ab154c9a3f7c2d14097.js","sourcesContent":["import React, { Fragment } from \"react\"\nimport { graphql } from \"gatsby\"\nimport styled from \"styled-components\"\n\nimport {\n  HmdConnectProQuery,\n  ParagraphWithRemarkFragment,\n  ContentfulSimpleHero,\n  ContentfulBulletInfoSections,\n  ContentfulBulletInfoSection,\n  ContentfulLink,\n  ContentfulContentBlock,\n  ContentfulImageSetElement,\n  ContentfulTopicsSection,\n  ContentfulTopicCategory,\n  ContentfulVideoSetElement,\n} from \"../../types/graphql-types\"\n\nimport colors from \"../utils/colors\"\nimport ProPage from \"../components/ProPage\"\nimport BulletInfoSections from \"../components/index/bulletInfoSections\"\nimport { SingleColumnContainer, Column, Spacer, breakpoints as bp } from \"../components/layout\"\nimport { NavSpacer } from \"../components/page\"\nimport TopicCategories from \"../components/support/topicCategories\"\nimport ContentBlock from \"../components/ContentBlock\"\nimport ImageContainer from \"../components/ImageContainer\"\nimport Heading from \"../components/heading\"\nimport VideoContainer from \"../components/VideoContainer\"\ninterface Props {\n  location: Location\n  data: HmdConnectProQuery\n}\n\nconst StyledSingleColumnContainer = styled(SingleColumnContainer)`\n  padding: 3rem 0;\n\n  @media (min-width: ${bp.tabletMin}) {\n    padding: 5rem 0;\n  }\n`\n\nconst StyledHeading = styled.h2`\n  color: ${colors.white};\n`\n\nconst IndexPage = ({ location, data }: Props) => {\n  const path = location.pathname\n  const { page } = data\n  const components = page?.sections?.map((section, index) => {\n    switch (section?.internal?.type) {\n      case \"ContentfulContentBlock\":\n        const contentBlock = section as ContentfulContentBlock\n        return (\n          <Fragment key={`contentful-content-block-${index}`}>\n            <ContentBlock\n              proVersion\n              heading={contentBlock.heading?.heading!}\n              description={contentBlock.description as ParagraphWithRemarkFragment}\n              buttonsGroup={contentBlock.buttonsGroup as ContentfulLink[]}\n              backgroundImageDesktop={contentBlock.backgroundImageDesktop!}\n              backgroundImageTablet={contentBlock.backgroundImageTablet!}\n              backgroundImageMobile={contentBlock.backgroundImageMobile!}\n              contentTheme={contentBlock.contentTheme!}\n              contentPositionMobile={contentBlock.contentPositionMobile!}\n              contentPositionDesktop={contentBlock.contentPositionDesktop!}\n              showAllButtonsDesktop={contentBlock.showAllButtonsDesktop!}\n              showAllButtonsMobile={contentBlock.showAllButtonsMobile!}\n              enableBackgroundColor={contentBlock.enableBackgroundColor!}\n              contentBackground={contentBlock.contentBackground ?? \"white\"}\n              mainHeroBlock={contentBlock.mainHeroBlock!}\n              contentAlignCenterMobile={contentBlock.contentAlignCenterMobile ?? false}\n            />\n            {page?.sections && index !== page.sections.length - 1 && <Spacer heightMobile={0.5} />}\n          </Fragment>\n        )\n      case \"ContentfulSimpleHero\":\n        const hero = section as ContentfulSimpleHero\n        return (\n          <Fragment key={`contentful-simple-hero-${index}`}>\n            <SingleColumnContainer>\n              <Column leftSpanDesk={2} rightSpanDesk={2} leftSpanTab={1} rightSpanTab={1}>\n                <Heading level=\"h1\" size=\"h1\" content={hero?.heading?.heading} />\n              </Column>\n            </SingleColumnContainer>\n            <Spacer heightMobile={0.5} />\n          </Fragment>\n        )\n      case \"ContentfulImageSetElement\":\n        const imageElement = section as ContentfulImageSetElement\n        return (\n          <Fragment key={`contentful-image-set-element-${index}`}>\n            <SingleColumnContainer>\n              <Column leftSpanDesk={0} rightSpanDesk={0} leftSpanTab={0} rightSpanTab={0}>\n                {imageElement?.mobileBackgroundImage && imageElement?.desktopBackgroundImage && (\n                  <ImageContainer\n                    mobileBackgroundImage={imageElement.mobileBackgroundImage}\n                    desktopBackgroundImage={imageElement.desktopBackgroundImage}\n                    borderRadius\n                  />\n                )}\n              </Column>\n            </SingleColumnContainer>\n            <Spacer heightMobile={0.5} />\n          </Fragment>\n        )\n      case \"ContentfulBulletInfoSections\":\n        const bulletInfoSections = section as ContentfulBulletInfoSections\n        return (\n          <Fragment key={`contentful-bullet-info-sections-${index}`}>\n            <SingleColumnContainer ignorePadding>\n              <Column leftSpanDesk={0} rightSpanDesk={0} leftSpanTab={0} rightSpanTab={0}>\n                <BulletInfoSections\n                  pro\n                  sections={bulletInfoSections.sections as ContentfulBulletInfoSection[]}\n                  whiteBg\n                />\n              </Column>\n            </SingleColumnContainer>\n            <Spacer heightMobile={0.5} />\n          </Fragment>\n        )\n      case \"ContentfulTopicsSection\":\n        const topicsSection = section as ContentfulTopicsSection\n        return (\n          <Fragment key={`contentful-topics-section-${index}`}>\n            <StyledSingleColumnContainer backgroundColor={colors.dark}>\n              <Column leftSpanDesk={2} rightSpanDesk={2} center>\n                <StyledHeading className=\"h1\">{topicsSection?.heading?.heading}</StyledHeading>\n              </Column>\n              <Column leftSpanDesk={0} rightSpanDesk={0}>\n                <TopicCategories\n                  pathname={!path.endsWith(\"/\") ? `${path}/` : path}\n                  categories={topicsSection.topics! as ContentfulTopicCategory[]}\n                  noTextClip\n                />\n              </Column>\n            </StyledSingleColumnContainer>\n          </Fragment>\n        )\n      case \"ContentfulVideoSetElement\":\n        const video = section as ContentfulVideoSetElement\n        const isFullWidth = index === 0 ? true : false\n        return (\n          <Fragment key={`contentful-video-set-element-${index}`}>\n            <SingleColumnContainer fullWidth={isFullWidth} ignorePadding={isFullWidth}>\n              <Column leftSpanDesk={0} rightSpanDesk={0} leftSpanTab={0} rightSpanTab={0}>\n                <VideoContainer\n                  mobileVideo={video.mobileVideo!}\n                  tabletVideo={video.tabletVideo!}\n                  desktopVideo={video.desktopVideo!}\n                  mobilePlaceholderImage={video.mobilePlaceholderImage}\n                  tabletPlaceholderImage={video.tabletPlaceholderImage}\n                  desktopPlaceholderImage={video.desktopPlaceholderImage}\n                  borderRadius={!isFullWidth ? \"20px\" : \"0px\"}\n                  fullWidth={isFullWidth}\n                  videoTrackingId={video.videoTrackingId!}\n                />\n              </Column>\n            </SingleColumnContainer>\n            <Spacer heightMobile={0.5} />\n          </Fragment>\n        )\n      default:\n        return null\n    }\n  })\n\n  return (\n    <ProPage title=\"HMD Connect PRO\" metadata={page?.metadata}>\n      <NavSpacer />\n      <>{components}</>\n    </ProPage>\n  )\n}\n\nexport default IndexPage\n\nexport const pageQuery = graphql`\n  query HmdConnectPro($locale: String = \"en\") {\n    page: contentfulPage(label: { eq: \"HMD ConnectPro - Home\" }, node_locale: { eq: $locale }) {\n      metadata {\n        ...Metadata\n      }\n      sections {\n        ... on ContentfulHero {\n          internal {\n            type\n          }\n          heading {\n            heading\n          }\n          description {\n            ...ParagraphWithRemark\n          }\n          getSimButton {\n            ...Link\n          }\n          signInButton {\n            ...Link\n          }\n          mobileImage {\n            fluid(maxWidth: 767, quality: 80) {\n              ...GatsbyContentfulFluid_withWebp\n            }\n          }\n          tabletImage {\n            fluid(maxWidth: 991, quality: 80) {\n              ...GatsbyContentfulFluid_withWebp\n            }\n          }\n          desktopImage {\n            fluid(maxWidth: 2000, quality: 80) {\n              ...GatsbyContentfulFluid_withWebp\n            }\n          }\n        }\n        ... on ContentfulImageSetElement {\n          internal {\n            type\n          }\n          mobileBackgroundImage {\n            fluid(maxWidth: 767, quality: 90) {\n              ...GatsbyContentfulFluid_withWebp\n            }\n          }\n          desktopBackgroundImage {\n            fluid(maxWidth: 2000, quality: 90) {\n              ...GatsbyContentfulFluid_withWebp\n            }\n          }\n        }\n        ... on ContentfulSimpleHero {\n          internal {\n            type\n          }\n          heading {\n            heading\n          }\n        }\n        ... on ContentfulBulletInfoSections {\n          internal {\n            type\n          }\n          sections {\n            position\n            heading {\n              heading\n            }\n            description {\n              ...ParagraphWithRemark\n            }\n            image {\n              fluid(maxWidth: 500) {\n                ...GatsbyContentfulFluid\n              }\n            }\n            video {\n              mobileVideo {\n                ...Video\n              }\n              tabletVideo {\n                ...Video\n              }\n              desktopVideo {\n                ...Video\n              }\n              mobilePlaceholderImage {\n                fluid(maxWidth: 767, quality: 80) {\n                  ...GatsbyContentfulFluid_withWebp\n                }\n              }\n              tabletPlaceholderImage {\n                fluid(maxWidth: 991, quality: 80) {\n                  ...GatsbyContentfulFluid_withWebp\n                }\n              }\n              desktopPlaceholderImage {\n                fluid(maxWidth: 2000, quality: 80) {\n                  ...GatsbyContentfulFluid_withWebp\n                }\n              },\n              videoTrackingId\n            }\n            link {\n              ...Link\n            }\n          }\n        }\n        ... on ContentfulContentBlock {\n          internal {\n            type\n          }\n          heading {\n            heading\n          }\n          description {\n            ...ParagraphWithRemark\n          }\n          buttonsGroup {\n            ...Link\n          }\n          backgroundImageMobile {\n            fluid(maxWidth: 767, quality: 80) {\n              ...GatsbyContentfulFluid_withWebp\n            }\n          }\n          backgroundImageTablet {\n            fluid(maxWidth: 991, quality: 80) {\n              ...GatsbyContentfulFluid_withWebp\n            }\n          }\n          backgroundImageDesktop {\n            fluid(maxWidth: 2000, quality: 80) {\n              ...GatsbyContentfulFluid_withWebp\n            }\n          }\n          contentTheme\n          contentPositionMobile\n          contentPositionDesktop\n          showAllButtonsDesktop\n          showAllButtonsMobile\n          enableBackgroundColor\n          contentAlignCenterMobile\n          contentBackground\n          mainHeroBlock\n        }\n        ... on ContentfulTopicsSection {\n          internal {\n            type\n          }\n          heading {\n            heading\n          }\n          topics {\n            label\n            name {\n              heading\n            }\n            description {\n              paragraph {\n                paragraph\n              }\n            }\n            icon\n          }\n        }\n\n        ... on ContentfulVideoSetElement {\n          internal {\n            type\n          }\n          mobileVideo {\n            file {\n              fileName\n              url\n            }\n          }\n          tabletVideo {\n            file {\n              fileName\n              url\n            }\n          }\n          desktopVideo {\n            file {\n              fileName\n              url\n            }\n          },\n          videoTrackingId\n        }\n      }\n    }\n  }\n`\n","import React from \"react\"\nimport styled from \"styled-components\"\nimport { navigate } from \"gatsby\"\n\nimport { ContentfulTopicCategory } from \"../../../types/graphql-types\"\nimport { TripleColumnContainer } from \"../layout\"\nimport colors from \"../../utils/colors\"\n\nimport Icon from \"../Icon\"\n\ninterface Props {\n  pathname: string\n  categories: ContentfulTopicCategory[]\n  noTextClip: boolean\n}\n\ninterface TopicIconProps {\n  id: string\n}\n\nconst Container = styled(TripleColumnContainer)`\n  margin-top: 80px;\n`\n\nconst Topic = styled.div`\n  display: flex;\n  flex-direction: column;\n  min-height: 300px;\n  border-radius: 12px;\n  background-color: ${colors.white};\n  margin-bottom: 24px;\n  padding: 30px;\n  text-align: left;\n  cursor: pointer;\n  z-index: 1;\n\n  .header {\n    color: ${colors.dark};\n    font-size: 40px;\n    margin: 20px 0;\n    font-weight: 600;\n  }\n\n  .description {\n    font-size: 18px;\n  }\n\n  &:hover {\n    color: ${colors.white};\n    background-color: ${colors.teal};\n\n    span {\n      color: ${colors.white};\n    }\n\n    .round {\n      background-color: ${colors.white};\n    }\n\n    .icon {\n      color: ${colors.white};\n      svg .background {\n        fill: ${colors.teal};\n      }\n    }\n  }\n`\n\nconst IconContainer = styled.div`\n  color: ${colors.teal};\n`\n\nconst TopicIcon = ({ id, ...iconProps }: TopicIconProps) => {\n  switch (id) {\n    case \"coverage\":\n      return <Icon icon=\"app-coverage\" {...iconProps} />\n    case \"data\":\n      return <Icon icon=\"app-data\" {...iconProps} />\n    case \"other\":\n      return <Icon icon=\"app-other\" {...iconProps} />\n    case \"percentage-circle\":\n      return <Icon icon=\"app-percentage-circle\" {...iconProps} />\n    case \"receipt\":\n      return <Icon icon=\"app-receipt\" {...iconProps} />\n    case \"sim-card\":\n      return <Icon icon=\"app-sim-card\" {...iconProps} />\n    case \"user\":\n      return <Icon icon=\"app-user\" {...iconProps} />\n    case \"service-features\":\n      return <Icon icon=\"app-service-features\" {...iconProps} />\n    case \"pricing\":\n      return <Icon icon=\"app-pricing\" {...iconProps} />\n    case \"set-up-support\":\n      return <Icon icon=\"app-set-up-support\" {...iconProps} />\n    case \"devices\":\n      return <Icon icon=\"app-devices\" {...iconProps} />\n    case \"user-console\":\n      return <Icon icon=\"app-user-console\" {...iconProps} />\n    case \"pro-coverage\":\n      return <Icon icon=\"app-pro-coverage\" {...iconProps} />\n    case \"5g\":\n      return <Icon icon=\"5g\" {...iconProps} />\n    case \"cost-efficient\":\n      return <Icon icon=\"cost-efficient\" {...iconProps} />\n    case \"world\":\n      return <Icon icon=\"world\" {...iconProps} />\n    default:\n      return <Icon icon={undefined} />\n  }\n}\n\nconst StyledTopicIcon = styled(TopicIcon)`\n  width: 42px;\n  height: 42px;\n`\n\nconst MAX_DESC_LENGHT = 100\nconst getClippedDescription = (text?: string | null) =>\n  text && text.length > MAX_DESC_LENGHT ? `${text.slice(0, MAX_DESC_LENGHT - 1).trim()}...` : text\n\nconst TopicCategories = ({ pathname, categories, noTextClip = false }: Props) => {\n  return (\n    <Container>\n      {categories.map(category => (\n        <Topic key={category.label!} onClick={() => navigate(`${pathname}${category.label}/`)}>\n          <IconContainer className=\"icon\">\n            <StyledTopicIcon id={category.icon!} />\n          </IconContainer>\n          <span className=\"header\">{category.name?.heading}</span>\n          <span className=\"description semi-large\">\n            {noTextClip\n              ? category.description?.paragraph?.paragraph\n              : getClippedDescription(category.description?.paragraph?.paragraph)}\n          </span>\n        </Topic>\n      ))}\n    </Container>\n  )\n}\n\nexport default TopicCategories\n"],"sourceRoot":""}