{"version":3,"sources":["webpack:///./src/components/forms/form.ts","webpack:///./src/components/anchor.ts","webpack:///./src/components/index/instruction.tsx","webpack:///./src/components/forms/labels.ts","webpack:///./src/components/get-started/instructionSections.tsx","webpack:///./src/components/coverage/letterNavigator.tsx","webpack:///./src/components/coverage/letterContainer.tsx","webpack:///./src/components/coverage/zoneNavigator.tsx","webpack:///./src/proPages/coverage.tsx","webpack:///./src/components/forms/input.tsx"],"names":["FormElementBaseStyles","css","FormElementContainer","styled","div","InputStyles","colors","gray","black","green","red","redLight","gray30","Form","form","Anchor","a","bp","mobileMax","nav","mobile","tabletMin","desktop","Container","breakpoints","desktopMin","tabletMax","Instruction","children","heading","noNumber","networkPage","className","clsx","network","level","size","content","LabelStyles","label","InputLabel","DescriptionLabel","span","gray60","ErrorLabel","MainContainer","tealLight","StepImg","RoundedContainer","Section","dark","gray5","Button","GridRoot","white","SizedColumn","GooglePlayButton","AppStoreButton","hr","Paragraph","Small","teal","padding","Legend","props","color","Zone","button","SemiLarge","hexToRgba","isSelected","tealGradient","LetterNavigator","zones","selected","onSelect","map","zone","index","key","onClick","legendColor","zoneName","Header","Heading","QuinColumnContainerLeftAlign","QuinColumnContainer","centered","LetterContainer","letter","items","useState","windowWidth","setWindowWidth","countryChunks","parseInt","useEffect","rearrangeLetters","window","outerWidth","addEventListener","removeEventListener","dispatchEvent","Event","length","chunk","Math","ceil","topToBottomItems","item","ZoneNavigatorContainer","Navigator","MapImageContainer","ZoneRow","SearchBarIcon","Icon","ZoneNavigator","countries","selectedZone","onZoneSelected","RegExp","countryFilter","setCountryFilter","searchBar","mapImageUrl","file","url","countryGroups","groupBy","filter","name","exec","uniqueLetters","Object","keys","sort","leftSpanDesk","rightSpanDesk","center","value","src","onChange","e","target","replace","left","icon","type","placeholder","id","CoverageFirstHeading","CoverageInstructionContainer","pageQuery","Coverage","location","data","page","countryZones","queryParams","qs","parse","search","ignoreQueryPrefix","parsedZone","Number","isNaN","getZoneFromQuery","nodes","toString","push","navigate","pathname","sections","section","internal","HeadingComponent","pro","header","isPro","isLarge","instruction","description","paragraph","image","ProPage","title","activeTab","relatedNavLink","undefined","metadata","hasBottomMargin","InputContainer","InputElement","input","LeftIcon","RightIcon","top","right","SubmitButton","Input","isMail","hasSubmit","error","success","submitDisabled","identifier","descIdentifier","htmlFor","aria-describedby","disabled"],"mappings":"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","file":"component---src-pro-pages-coverage-tsx-23bd7409da03cd6665d3.js","sourcesContent":["import styled, { css } from \"styled-components\"\nimport colors from \"../../utils/colors\"\n\nexport interface InputProps {\n  label?: string\n  success?: boolean\n  error?: string\n  description?: string\n}\n\nexport const FormElementBaseStyles = css`\n  display: block;\n  width: 100%;\n  margin-bottom: 1rem;\n`\n\nexport const FormElementContainer = styled.div`\n  ${FormElementBaseStyles}\n`\n\nexport const InputStyles = css`\n  width: 100%;\n  height: 56px;\n  border-radius: 8px;\n  border: 2px solid ${colors.gray};\n  padding: 15px;\n  box-sizing: border-box;\n  font-size: 16px;\n\n  &:focus {\n    outline: none;\n    border-color: ${colors.black};\n\n    &.success {\n      border-color: ${colors.green};\n    }\n    &.error {\n      border-color: ${colors.red};\n    }\n  }\n\n  &:invalid {\n    border-color: ${colors.redLight};\n  }\n\n  &.error {\n    border-color: ${colors.redLight};\n  }\n\n  &.has-left {\n    padding-left: 66px;\n  }\n\n  &::placeholder {\n    /* Chrome, Firefox, Opera, Safari 10.1+ */\n    color: ${colors.gray30};\n  }\n\n  &:-ms-input-placeholder {\n    /* Internet Explorer 10-11 */\n    color: ${colors.gray30};\n  }\n\n  &::-ms-input-placeholder {\n    /* Microsoft Edge */\n    color: ${colors.gray30};\n  }\n`\n\nconst Form = styled.form`\n  width: 100%;\n  text-align: left;\n\n  button {\n    ${FormElementBaseStyles}\n  }\n`\n\nexport default Form\n","import styled from \"styled-components\"\n\nimport { nav, breakpoints as bp } from \"./layout\"\n\nconst Anchor = styled.a`\n  display: block;\n  position: relative;\n  visibility: hidden;\n\n  @media (max-width: ${bp.mobileMax}) {\n    top: -${nav.mobile};\n  }\n  @media (min-width: ${bp.tabletMin}) {\n    top: -${nav.desktop};\n  }\n`\n\nexport default Anchor\n","import React, { ReactNode } from \"react\"\nimport styled from \"styled-components\"\nimport clsx from \"clsx\"\n\nimport Heading from \"../../components/heading\"\nimport { breakpoints } from \"../layout\"\n\ninterface Props {\n  children?: ReactNode\n  noNumber?: boolean\n  heading: string\n  networkPage?: boolean\n}\n\nconst Container = styled.div`\n  padding: 0 0 24px 0;\n  text-align: left;\n\n  h3 {\n    font-size: 1.5rem;\n    margin-bottom: 0;\n    margin-top: 0.5em;\n\n    em {\n      font-weight: inherit;\n    }\n  }\n  h4 {\n    font-size: 1.125rem;\n    font-weight: bold;\n    letter-spacing: 0.4px;\n    line-height: 1.35rem;\n  }\n  width: 100%;\n  @media (min-width: ${breakpoints.tabletMin}) {\n    padding: 92px 0 24px 0;\n    width: 50%;\n  }\n  @media (min-width: ${breakpoints.desktopMin}) {\n    padding: 124px 48px 24px 0px;\n    width: calc(50% - 72px);\n  }\n\n  &.noNumber {\n    @media (min-width: ${breakpoints.desktopMin}) {\n      padding: 48px 48px 24px 0px;\n    }\n  }\n\n  &.network {\n    @media (max-width: ${breakpoints.tabletMax}) {\n      width: 100%;\n    }\n\n    @media (min-width: ${breakpoints.desktopMin}) {\n      padding: 48px 48px 24px 48px;\n    }\n  }\n`\n\nconst Instruction = ({ children, heading, noNumber, networkPage }: Props) => (\n  <Container className={clsx({ noNumber, network: networkPage })}>\n    <Heading level=\"h2\" size=\"h4\" content={heading} />\n    {children}\n  </Container>\n)\n\nexport default Instruction\n","import styled, { css } from \"styled-components\"\n\nimport colors from \"../../utils/colors\"\n\nexport const Label = styled.label`\n  display: flex;\n`\n\nexport const LabelStyles = css`\n  display: block;\n  font-size: 12px;\n`\n\nexport const InputLabel = styled.label`\n  ${LabelStyles}\n  padding-bottom: 0.5rem;\n  color: ${colors.black};\n`\n\nexport const DescriptionLabel = styled.span`\n  ${LabelStyles}\n  padding-top: 0.5rem;\n  color: ${colors.gray60};\n`\n\nexport const ErrorLabel = styled.span`\n  ${LabelStyles}\n  padding-top: 0.5rem;\n  color: ${colors.red};\n`\n","import React, { useState } from \"react\"\nimport styled from \"styled-components\"\nimport { navigate } from \"gatsby\"\n\nimport {\n  ContentfulHeading,\n  ContentfulInstructionSection,\n  ContentfulParagraph,\n  ContentfulSelectOption,\n} from \"../../../types/graphql-types\"\nimport {\n  Column,\n  Section,\n  breakpoints as bp,\n  nav,\n  GridRoot,\n  breakpoints,\n  SingleColumnContainer,\n  SizedColumn,\n} from \"../layout\"\nimport Instruction from \"../index/instruction\"\nimport Button from \"../forms/button\"\nimport colors from \"../../utils/colors\"\nimport Paragraph from \"../paragraph\"\nimport GooglePlayButton from \"../forms/googlePlayButton\"\nimport { Small } from \"../globalStyle\"\nimport AppStoreButton from \"../forms/appStoreButton\"\n\ninterface Props {\n  heading?: ContentfulHeading | null\n  description?: ContentfulParagraph | null\n  options?: ContentfulSelectOption[] | null\n  instructionSections: {\n    [key: string]: ContentfulInstructionSection[]\n  }\n}\n\nexport const MainContainer = styled.div`\n  background: ${colors.tealLight};\n  border-top-left-radius: 50px;\n  border-top-right-radius: 50px;\n  @media (min-width: ${bp.tabletMin}) {\n    border-top-left-radius: 75px;\n    border-top-right-radius: 75px;\n  }\n  @media (min-width: ${bp.desktopMin}) {\n    border-top-left-radius: 100px;\n    border-top-right-radius: 100px;\n  }\n`\n\nexport const StepImg = styled.div`\n  width: 100%;\n  width: calc(100% + 48px);\n  margin: 0 -24px;\n  order: -1;\n  @media (min-width: ${breakpoints.tabletMin}) {\n    margin-left: 0;\n    margin-right: -48px;\n    width: 50%;\n    order: unset;\n  }\n`\n\nconst Header = styled(Section)`\n  color: ${colors.dark};\n\n  padding-top: 1.5rem;\n  @media (min-width: ${bp.tabletMin}) {\n    padding-top: 2rem;\n  }\n  @media (min-width: ${bp.tabletMin}) {\n    padding-top: 3rem;\n  }\n`\n\nconst OptionsContainer = styled.div`\n  border-radius: 84px;\n  border: 1px solid ${colors.gray5};\n  display: flex;\n  flex-flow: row;\n  flex-direction: row;\n  margin: 0 auto;\n  padding: 0.5rem;\n`\n\nconst OptionsButton = styled(Button)`\n  border-radius: 84px;\n  padding: 10px 20px;\n  &:not(:first-child) {\n    margin-left: 0.5rem;\n  }\n`\n\nexport const RoundedContainer = styled(GridRoot)`\n  position: relative;\n  width: 100%;\n  background: ${colors.white};\n  border-radius: 1rem;\n  margin: 0 0 2rem 0;\n  overflow: hidden;\n  padding-bottom: 15px;\n  @media (min-width: ${bp.tabletMin}) {\n    margin: 0 0 2rem 0;\n    padding-bottom: 50px;\n  }\n  @media (min-width: ${bp.desktopMin}) {\n    margin: 0 8.333333% 2rem 8.333333%;\n  }\n\n  overflow: hidden;\n`\n\nconst SubInstructionsContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  width: calc(100% + 48px);\n  padding-bottom: 1rem;\n  justify-content: space-between;\n  p {\n    line-height: 1.875rem;\n  }\n  flex-wrap: wrap;\n`\n\nconst SubInstruction = styled(SizedColumn)`\n  text-align: left;\n  padding-bottom: 1.5rem;\n`\n\nconst StyledButton = styled(Button)`\n  font-size: 1rem;\n  height: 48px;\n  padding: 4px 20px;\n  margin: 0;\n`\n\nconst StyledGooglePlayButton = styled(GooglePlayButton)`\n  font-size: 1rem;\n  height: 48px;\n  padding: 4px 20px;\n  margin: 1rem 0;\n`\n\nconst StyledAppStoreButton = styled(AppStoreButton)`\n  font-size: 1rem;\n  height: 48px;\n  padding: 4px 20px;\n  margin: 1rem 0;\n`\n\nconst Hr = styled.hr`\n  border: none;\n  border-top: 2px solid ${colors.gray5};\n  margin: 24px -48px;\n  width: calc(100% + 96px);\n`\n\nconst Disclaimer = styled(Paragraph)`\n  color: ${colors.gray60};\n  margin-bottom: 10px;\n  text-align: left;\n  p {\n    margin-top: 0;\n    ${Small}\n  }\n`\n\nconst InstructionNumber = styled.div`\n  border-radius: 28px;\n  font-size: 1.75rem;\n  font-weight: bold;\n  text-align: center;\n\n  border: 2px solid ${colors.gray};\n  position: absolute;\n  line-height: 40px;\n  width: 40px;\n  height: 40px;\n  color: ${colors.white};\n  top: 1.625rem;\n  left: 1.625rem;\n  background-color: ${colors.dark};\n\n  @media (min-width: ${breakpoints.tabletMin}) {\n    width: 56px;\n    height: 56px;\n    line-height: 56px;\n    top: 48px;\n    left: 48px;\n    background-color: unset;\n    color: ${colors.teal};\n  }\n\n  @media (min-width: ${breakpoints.desktopMin}) {\n    top: 80px;\n  }\n`\n\nconst InstructionSections = ({ heading, description, options, instructionSections }: Props) => {\n  const [instructionSection, setInstructionSections] = useState(\"androidInstructions\")\n  return (\n    <MainContainer>\n      <Header>\n        <SingleColumnContainer>\n          {heading?.heading && (\n            <Column leftSpanDesk={2} rightSpanDesk={2} center>\n              <p className=\"h2\">{heading.heading}</p>\n            </Column>\n          )}\n          {description?.paragraph && (\n            <Column leftSpanDesk={3} rightSpanDesk={3} center>\n              {description?.paragraph?.childMarkdownRemark?.html && (\n                <Paragraph isLarge content={description} />\n              )}\n            </Column>\n          )}\n\n          {options && (\n            <Column leftSpanDesk={3} rightSpanDesk={3} center>\n              <OptionsContainer>\n                {options.map((option, key) => (\n                  <React.Fragment key={key}>\n                    <OptionsButton\n                      transparent={instructionSection !== option?.value}\n                      inverted={instructionSection !== option?.value}\n                      data-gtm-cta={\"android-instructions\"}\n                      onClick={() => {\n                        setInstructionSections(option?.value!)\n                      }}\n                    >\n                      {option?.label}\n                    </OptionsButton>\n                  </React.Fragment>\n                ))}\n              </OptionsContainer>\n            </Column>\n          )}\n        </SingleColumnContainer>\n      </Header>\n      {instructionSections &&\n        instructionSections[instructionSection] &&\n        instructionSections[instructionSection].map((item, index) => {\n          return (\n            <GridRoot key={index}>\n              <RoundedContainer>\n                <InstructionNumber>{index + 1}</InstructionNumber>\n                <Instruction heading={item.heading?.heading!}>\n                  <>\n                    {item.description?.paragraph && (\n                      <Paragraph isSemiLarge content={item.description} />\n                    )}\n                    {item.link && !item.link.preset && (\n                      <Button\n                        type=\"button\"\n                        transparent\n                        onClick={() => navigate(item.link?.url!)}\n                        data-gtm-cta={item.link?.gtm!}\n                      >\n                        {item.link.heading}\n                      </Button>\n                    )}\n                    {item?.link?.preset === \"google-play\" && (\n                      <StyledGooglePlayButton\n                        transparent\n                        onClick={() => (window.location.href = item.link?.url!)}\n                        data-gtm-cta={item.link?.gtm!}\n                      >\n                        {item.link.heading}\n                      </StyledGooglePlayButton>\n                    )}\n                    {item?.link?.preset === \"app-store\" && (\n                      <StyledAppStoreButton\n                        transparent\n                        onClick={() => (window.location.href = item.link?.url!)}\n                        data-gtm-cta={item.link?.gtm!}\n                      >\n                        {item.link.heading}\n                      </StyledAppStoreButton>\n                    )}\n                  </>\n                </Instruction>\n                {item.image?.file?.url && <StepImg>{<img src={item.image.file.url} />}</StepImg>}\n                {item.subInstructions && (\n                  <>\n                    <Hr />\n                    <SubInstructionsContainer>\n                      {item.subInstructions.map((subInstruction, idx) => (\n                        <SubInstruction colSizeDesk={4} colSizeTab={6} key={index + \"-\" + idx}>\n                          {subInstruction?.image?.file?.url && (\n                            <img src={subInstruction?.image?.file?.url} />\n                          )}\n                          <h4>{subInstruction?.heading?.heading}</h4>\n                          {subInstruction?.description && (\n                            <Paragraph className=\"gray\" content={subInstruction.description} />\n                          )}\n                          {subInstruction?.link && subInstruction?.link?.preset === \"google-play\" && (\n                            <StyledGooglePlayButton\n                              transparent\n                              onClick={() => navigate(subInstruction.link?.url!)}\n                              data-gtm-cta={subInstruction.link?.gtm!}\n                            >\n                              {subInstruction.link.heading}\n                            </StyledGooglePlayButton>\n                          )}\n                          {subInstruction?.link && subInstruction?.link?.preset === \"app-store\" && (\n                            <StyledAppStoreButton\n                              transparent\n                              onClick={() => navigate(subInstruction.link?.url!)}\n                              data-gtm-cta={subInstruction.link?.gtm!}\n                            >\n                              {subInstruction.link.heading}\n                            </StyledAppStoreButton>\n                          )}\n                          {subInstruction?.link && !subInstruction?.link?.preset && (\n                            <StyledButton\n                              type=\"button\"\n                              transparent\n                              onClick={() => navigate(subInstruction.link?.url!)}\n                              data-gtm-cta={subInstruction.link?.gtm!}\n                            >\n                              {subInstruction?.link?.heading}\n                            </StyledButton>\n                          )}\n                        </SubInstruction>\n                      ))}\n                    </SubInstructionsContainer>\n                  </>\n                )}\n                {item.disclaimer?.paragraph?.childMarkdownRemark?.html && (\n                  <>\n                    <Hr />\n                    <Disclaimer content={item.disclaimer} />\n                  </>\n                )}\n              </RoundedContainer>\n            </GridRoot>\n          )\n        })}\n    </MainContainer>\n  )\n}\n\nexport default InstructionSections\n","import React from \"react\"\nimport styled from \"styled-components\"\nimport { breakpoints as bp, padding } from \"../layout\"\n\nimport { ContentfulZone, ContentfulHeading } from \"../../../types/graphql-types\"\nimport colors, { hexToRgba } from \"../../utils/colors\"\nimport { SemiLarge } from \"../globalStyle\"\n\ninterface Props {\n  zones: ContentfulZone[]\n  selected?: number\n  onSelect(value: number): void\n}\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  box-sizing: border-box;\n  max-width: 100%;\n  border-radius: 29px;\n  padding: 12px 10px;\n\n  @media (min-width: ${bp.desktopMin}) {\n    border: 2px solid ${colors.gray5};\n  }\n\n  @media (max-width: ${bp.tabletMax}) {\n    width: calc(100vw - ${padding.desktop} * 2);\n  }\n\n  @media (max-width: ${bp.mobileMax}) {\n    width: calc(100vw - ${padding.mobile} * 2);\n  }\n`\n\nconst Legend = styled.span<{ color: string }>`\n  width: 20px;\n  height: 20px;\n  border-radius: 10px;\n  display: inline-block;\n  vertical-align: text-top;\n\n  ${props => `\n    background-color: ${props.color}\n  `}\n`\n\nconst Zone = styled.button<{ isSelected?: boolean }>`\n  ${SemiLarge}\n  margin: 0 auto 0.888em;\n  min-width: 120px;\n  height: 2.222em;\n  line-height: 1;\n  background-color: ${hexToRgba(colors.white, 0)};\n  border: 2px solid ${colors.gray5};\n  border-radius: 29px;\n  padding: 0 20px;\n  font-family: inherit;\n\n  font-weight: 500;\n  cursor: pointer;\n\n  &:focus {\n    outline: none;\n  }\n\n  @media (min-width: ${bp.desktopMin}) {\n    border: none;\n    margin: 0 5px;\n  }\n\n  ${props =>\n    props.isSelected\n      ? `\n          border: none;\n          color: ${colors.white};\n          background: ${colors.tealGradient};\n          box-shadow: 0 16px 32px -16px ${colors.teal};\n\n          @media (min-width: ${bp.desktopMin}) {\n            background: ${colors.teal};\n            box-shadow: none;\n          }\n        `\n      : `\n          &:hover {\n            color: ${colors.teal};\n          }\n        `}\n`\n\nconst LetterNavigator = ({ zones, selected, onSelect }: Props) => {\n  return (\n    <Container>\n      {zones.map((zone: ContentfulZone, index) => (\n        <Zone key={index} isSelected={index === selected} onClick={() => onSelect(index)}>\n          {zone?.legendColor && <Legend color={zone.legendColor} />}{\" \"}\n          {zone.zoneName && zone.zoneName.heading!}\n        </Zone>\n      ))}\n    </Container>\n  )\n}\n\nexport default LetterNavigator\n","import React, { useState, useEffect } from \"react\"\nimport styled from \"styled-components\"\nimport { chunk } from \"lodash\"\n\nimport { QuinColumnContainer, Column, breakpoints as bp } from \"../layout\"\n\nimport Heading from \"../../components/heading\"\n\ninterface Props {\n  letter: string\n  items: string[]\n}\n\nconst Container = styled.div`\n  text-align: left;\n`\n\nconst Header = styled(Heading)`\n  font-size: 2rem;\n  margin: auto 0;\n\n  @media (min-width: ${bp.desktopMin}) {\n    text-align: center;\n  }\n`\n\nconst QuinColumnContainerLeftAlign = styled(QuinColumnContainer)<{ centered?: boolean }>`\n  padding: 10px 0 !important;\n  justify-content: flex-start;\n  align-items: ${props => (props.centered ? \"center\" : \"flex-start\")};\n\n  > h3 {\n    @media (max-width: ${bp.tabletMax}) {\n      flex: 0 0 100%;\n      margin-bottom: 0.75em;\n    }\n  }\n\n  .itemContainer {\n    margin-bottom: ${props => (props.centered ? \"0\" : \"0.5em\")};\n  }\n`\n\nconst LetterContainer = ({ letter, items }: Props) => {\n  const [windowWidth, setWindowWidth] = useState<number>(0)\n  const countryChunks: number = windowWidth < parseInt(bp.desktopMin, 10) ? 2 : 4\n\n  useEffect(() => {\n    const rearrangeLetters = () => setWindowWidth(window.outerWidth)\n    window.addEventListener(\"resize\", rearrangeLetters)\n\n    return () => {\n      window.removeEventListener(\"resize\", rearrangeLetters)\n    }\n  }, [setWindowWidth])\n\n  useEffect(() => {\n    window.dispatchEvent(new Event(\"resize\"))\n  }, [])\n\n  return (\n    <Container>\n      <QuinColumnContainerLeftAlign centered={items.length <= countryChunks}>\n        <Header level=\"h3\" size=\"h3\" content={letter} />\n        {chunk(items, Math.ceil(items.length / countryChunks)).map((topToBottomItems, index) => (\n          <Column key={index}>\n            {topToBottomItems.map(item => (\n              <div className=\"itemContainer\" key={item}>\n                {item}\n              </div>\n            ))}\n          </Column>\n        ))}\n      </QuinColumnContainerLeftAlign>\n    </Container>\n  )\n}\n\nexport default LetterContainer\n","import React, { ChangeEvent, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { groupBy } from \"lodash\"\n\nimport {\n  ContentfulZoneNavigator,\n  ContentfulHeading,\n  ContentfulZone,\n} from \"../../../types/graphql-types\"\nimport {\n  SingleColumnContainer,\n  Column,\n  Section,\n  breakpoints as bp,\n  padding,\n} from \"../../components/layout\"\nimport Heading from \"../../components/heading\"\nimport Input from \"../../components/forms/input\"\nimport Anchor from \"../../components/anchor\"\nimport colors, { hexToRgba } from \"../../utils/colors\"\nimport Icon from \"../Icon\"\nimport LetterNavigator from \"./letterNavigator\"\nimport LetterContainer from \"./letterContainer\"\n\nexport interface Country {\n  name?: string\n}\n\ninterface Props {\n  content: ContentfulZoneNavigator\n  countries: Country[]\n  /**\n   * Starts with 0 as the index, because we need in newsletters for Zone 1 to be ?zone=1\n   * Zone 2 to be ?zone=2, etc. So World wide would always be ?zone=0 in URLs\n   */\n  selectedZone?: number\n  onZoneSelected?(selectedZone: number): void\n}\n\nconst ZoneNavigatorContainer = styled(Section)`\n  margin-top: 10px;\n  padding-top: 0;\n  background-color: ${colors.white};\n\n  .zones-heading {\n    display: none;\n  }\n\n  @media (min-width: ${bp.desktopMin}) {\n    padding-top: 50px;\n    margin-top: 25px;\n\n    .zones-heading {\n      display: block;\n    }\n  }\n`\n\nconst Navigator = styled.div`\n  margin-top: 30px;\n`\n\nconst MapImageContainer = styled(Section)`\n  display: none;\n  margin-bottom: 15px;\n  img {\n    width: 100%;\n  }\n\n  @media (min-width: ${bp.desktopMin}) {\n    display: block;\n  }\n`\n\nconst ZoneRow = styled.div`\n  margin: 0 -${padding.mobile};\n  padding: 0 calc(${padding.mobile} + 16px);\n\n  &:nth-child(odd) {\n    background-color: ${colors.tealLight};\n  }\n\n  @media (min-width: ${bp.tabletMin}) {\n    margin: 0 -${padding.desktop};\n    padding: 0 calc(${padding.desktop} + 16px);\n  }\n\n  @media (min-width: ${bp.desktopMin}) {\n    margin: 0;\n    padding: 0;\n\n    &:first-child {\n      margin-top: 40px;\n    }\n  }\n`\n\nconst SearchBarIcon = styled(Icon)`\n  width: 1.1rem;\n  margin-right: 0.31rem;\n  color: ${hexToRgba(colors.black, 0.18)};\n`\n\nconst ZoneNavigator = ({\n  content,\n  countries,\n  selectedZone = 0,\n  onZoneSelected = () => null,\n}: Props) => {\n  const [countryFilter, setCountryFilter] = useState<RegExp>(new RegExp(\".+\"))\n  const { zones, heading, searchBar } = content\n  const mapImageUrl: string | null = zones?.[selectedZone]?.map?.file?.url || null\n\n  const countryGroups = groupBy(\n    countries.filter(item => item!.name && countryFilter.exec(item.name)).map(item => item!.name!),\n    item => item[0]\n  )\n  const uniqueLetters = Object.keys(countryGroups).sort()\n\n  const onCountrySearch = (e: ChangeEvent<any>): void => {\n    setCountryFilter(\n      new RegExp(\n        `(${e.target.value.replace(/ /, \"\").replace(/(.)/g, \"(^| )$1.+\")})|(.*${e.target.value}.*)`,\n        \"i\"\n      )\n    )\n  }\n\n  return (\n    <ZoneNavigatorContainer>\n      <SingleColumnContainer>\n        <Column leftSpanDesk={2} rightSpanDesk={2} center>\n          <Heading\n            level=\"h3\"\n            size=\"h3\"\n            className=\"zones-heading\"\n            content={(heading as ContentfulHeading).heading}\n          />\n          <Navigator>\n            <LetterNavigator\n              zones={zones as ContentfulZone[]}\n              selected={selectedZone}\n              onSelect={value => onZoneSelected(value)}\n            />\n          </Navigator>\n        </Column>\n      </SingleColumnContainer>\n      <MapImageContainer>{mapImageUrl && <img src={mapImageUrl} />}</MapImageContainer>\n      {searchBar && (\n        <SingleColumnContainer>\n          <Column leftSpanDesk={3} rightSpanDesk={3}>\n            <Input\n              onChange={onCountrySearch}\n              left={<SearchBarIcon icon=\"search\" />}\n              type=\"text\"\n              name=\"country_search\"\n              placeholder={searchBar?.placeholder || \"\"}\n            />\n          </Column>\n        </SingleColumnContainer>\n      )}\n      <SingleColumnContainer>\n        <Column leftSpanDesk={1} rightSpanDesk={1}>\n          {uniqueLetters.map(letter => (\n            <ZoneRow key={letter}>\n              <Anchor id={`letter-${letter}`} />\n              <LetterContainer letter={letter} items={countryGroups[letter]} />\n            </ZoneRow>\n          ))}\n        </Column>\n      </SingleColumnContainer>\n    </ZoneNavigatorContainer>\n  )\n}\n\nexport default ZoneNavigator\n","import React from \"react\"\nimport styled from \"styled-components\"\nimport { graphql, navigate } from \"gatsby\"\nimport qs from \"qs\"\n\nimport {\n  CoverageQuery,\n  ContentfulParagraph,\n  ContentfulInstructionSection,\n  ContentfulZoneNavigator,\n  ContentfulHeading,\n  QueryRestCountryZonesArgs,\n} from \"../../types/graphql-types\"\nimport colors from \"../utils/colors\"\nimport Instruction from \"../components/index/instruction\"\nimport { RoundedContainer, StepImg } from \"../components/get-started/instructionSections\"\nimport { SingleColumnContainer, Column, GridRoot, Section } from \"../components/layout\"\nimport Heading from \"../components/heading\"\nimport ZoneNavigator, { Country } from \"../components/coverage/zoneNavigator\"\nimport Paragraph from \"../components/paragraph\"\nimport ProPage from \"../components/ProPage\"\nimport { NavSpacer } from \"../components/page\"\n\ninterface Props {\n  location: Location\n  data: CoverageQuery\n}\n\nconst Container = styled(Section)`\n  background-color: ${colors.tealLight};\n  padding-bottom: 0;\n`\n\nconst CoverageFirstHeading = styled(Heading)`\n  margin-top: 1.25em;\n  margin-bottom: 0;\n`\n\nconst CoverageInstructionContainer = styled(GridRoot)`\n  margin-top: 40px;\n`\n\nconst getZoneFromQuery = (countryZones: QueryRestCountryZonesArgs[], zone: string = \"0\") => {\n  const parsedZone = Number.parseInt(zone, 10)\n  if (Number.isNaN(parsedZone) || parsedZone > countryZones.length - 1) {\n    return 1\n  }\n  return parsedZone\n}\n\nconst Coverage = ({ location, data }: Props) => {\n  const { page, countryZones } = data\n  const queryParams = qs.parse(location.search, { ignoreQueryPrefix: true })\n  const zone = getZoneFromQuery(\n    countryZones.nodes as QueryRestCountryZonesArgs[],\n    (queryParams?.zone || \"0\").toString()\n  )\n\n  const countries: Country[] = []\n  countries.push(...(countryZones.nodes[zone].countries! as Country[]))\n\n  const onZoneSelected = (selectedZone: number) => {\n    navigate(location.pathname.replace(/\\/?$/, `/?zone=${selectedZone}`), { replace: true })\n  }\n\n  const sections = page?.sections?.map((section, index) => {\n    switch (section?.internal?.type) {\n      case \"ContentfulHeading\":\n        const HeadingComponent = index === 0 ? CoverageFirstHeading : Heading\n\n        return (\n          <SingleColumnContainer key={index}>\n            <Column leftSpanDesk={2.8} rightSpanDesk={2.8} center>\n              <HeadingComponent\n                pro\n                level=\"h2\"\n                size=\"h2\"\n                content={(section as { header: string } & ContentfulHeading).header}\n              />\n            </Column>\n          </SingleColumnContainer>\n        )\n      case \"ContentfulParagraph\":\n        return (\n          <SingleColumnContainer key={index}>\n            <Column leftSpanDesk={2.8} rightSpanDesk={2.8} center>\n              <Paragraph isPro isLarge content={section as ContentfulParagraph} />\n            </Column>\n          </SingleColumnContainer>\n        )\n      case \"ContentfulZoneNavigator\":\n        return (\n          <ZoneNavigator\n            key={index}\n            content={section as ContentfulZoneNavigator}\n            countries={countries}\n            onZoneSelected={onZoneSelected}\n            selectedZone={zone}\n          />\n        )\n      case \"ContentfulInstructionSection\":\n        const instruction: ContentfulInstructionSection = section as ContentfulInstructionSection\n\n        return (\n          <CoverageInstructionContainer key={index}>\n            <RoundedContainer>\n              <Instruction heading={instruction.heading?.heading!} noNumber>\n                {instruction.description?.paragraph && (\n                  <Paragraph isPro className=\"gray\" content={instruction.description} />\n                )}\n              </Instruction>\n              {instruction.image?.file?.url && (\n                <StepImg>{<img src={instruction.image.file.url} />}</StepImg>\n              )}\n            </RoundedContainer>\n          </CoverageInstructionContainer>\n        )\n      default:\n        return <div key={index}>NOT FOUND {section?.internal?.type}</div>\n    }\n  })\n\n  return (\n    <ProPage\n      title=\"Coverage\"\n      activeTab={page?.relatedNavLink?.heading || undefined}\n      metadata={page?.metadata}\n      hasBottomMargin\n    >\n      <NavSpacer />\n      <Container>{sections}</Container>\n    </ProPage>\n  )\n}\n\nexport default Coverage\n\nexport const pageQuery = graphql`\n  query CoveragePro($locale: String = \"en\") {\n    page: contentfulPage(\n      label: { eq: \"Hmd connect pro coverage page\" }\n      node_locale: { eq: $locale }\n    ) {\n      metadata {\n        ...Metadata\n      }\n      sections {\n        ... on ContentfulHeading {\n          header: heading\n          internal {\n            type\n          }\n        }\n        ... on ContentfulParagraph {\n          ...ParagraphWithRemark\n          internal {\n            type\n          }\n        }\n        ... on ContentfulZoneNavigator {\n          heading {\n            heading\n          }\n          zones {\n            ...Zone\n          }\n          searchBar {\n            name\n            placeholder\n          }\n          internal {\n            type\n          }\n        }\n        ... on ContentfulInstructionSection {\n          ...InstructionSection\n          internal {\n            type\n          }\n        }\n      }\n    }\n    countryZones: allRestCountryZonesPro {\n      nodes {\n        name\n        countries {\n          name\n          countryCode\n        }\n      }\n    }\n  }\n`\n","import React from \"react\"\nimport styled from \"styled-components\"\nimport clsx from \"clsx\"\n\nimport { InputLabel, DescriptionLabel, ErrorLabel } from \"./labels\"\nimport { InputProps, InputStyles, FormElementContainer } from \"./form\"\n\nimport Icon from \"../Icon\"\nimport colors from \"../../utils/colors\"\n\ninterface Props {\n  isMail?: boolean\n  hasSubmit?: boolean\n  submitDisabled?: boolean\n  left?: string | JSX.Element | JSX.Element[]\n}\n\nconst InputContainer = styled.div`\n  position: relative;\n`\n\nconst InputElement = styled.input`\n  padding-right: 60px;\n  ${InputStyles}\n`\n\nconst LeftIcon = styled.div`\n  position: absolute;\n  top: 12px;\n  left: 17px;\n  height: 32px;\n  border-right: 2px solid ${colors.gray};\n\n  svg {\n    padding-top: 4px;\n    padding-right: 12px;\n  }\n`\n\nconst RightIcon = styled.div<{ top?: string; right?: string }>`\n  position: absolute;\n  ${props => `top: ${props.top ? props.top : \"17px\"};`}\n  ${props => `right: ${props.right ? props.right : \"17px\"};`}\n`\n\nconst SubmitButton = styled.button`\n  padding-top: 5px;\n  background-color: transparent;\n  border: none;\n`\n\nconst Input = ({\n  id,\n  name,\n  isMail,\n  hasSubmit,\n  label,\n  error,\n  success,\n  description,\n  submitDisabled,\n  left,\n  ...props\n}: React.InputHTMLAttributes<HTMLInputElement> & InputProps & Props) => {\n  const identifier = id || name\n  const descIdentifier = identifier ? `${identifier}-description` : undefined\n  return (\n    <FormElementContainer>\n      {label && <InputLabel htmlFor={identifier}>{label}</InputLabel>}\n      <InputContainer>\n        {(isMail || left) && <LeftIcon>{isMail ? <Icon icon=\"mail\" /> : left}</LeftIcon>}\n        <InputElement\n          className={clsx({ error, success, \"has-left\": isMail || left })}\n          id={identifier}\n          name={name}\n          aria-describedby={descIdentifier}\n          {...props}\n        />\n        {(success || error) && !isMail && (\n          <RightIcon>\n            <Icon icon={success ? \"success\" : \"error\"} />\n          </RightIcon>\n        )}\n        {hasSubmit && (\n          <RightIcon top=\"11px\" right=\"11px\">\n            <SubmitButton type=\"submit\" disabled={submitDisabled}>\n              <Icon icon=\"arrow-right\" />\n            </SubmitButton>\n          </RightIcon>\n        )}\n      </InputContainer>\n      {error && <ErrorLabel>{error}</ErrorLabel>}\n      {description && <DescriptionLabel id={descIdentifier}>{description}</DescriptionLabel>}\n    </FormElementContainer>\n  )\n}\n\nexport default Input\n"],"sourceRoot":""}