{"version":3,"sources":["webpack:///./src/components/ResourcesComponents/ResourcesCard.tsx","webpack:///./src/pages/resources.tsx"],"names":["getResourceCardColor","text","ResourcesItem","post","index","formatDate","date","formatedMonth","substring","featureImage","resources","featuredImage","localFile","childImageSharp","fluid","FirstPostContainer","FirstImageContainer","FirstImage","TextContainer","FirstPostInfoBar","Pill","color","category","Date","FirstPostTitle","title","FirstDescription","description","ReadMoreLink","to","appendUrlPartnerTracking","slug","src","Arrow","PostCard","SecondaryImage","TextContainerBackground","PostTitle","styled","h3","p","h5","div","Link","props","Img","span","RadioContainer","PageButton","active","ArrowImage","img","left","PaginationRow","GridContainer","Title","h1","data","wpPage","pageContext","allWpPost","renderedBlocks","LazyBlocksFactory","lazy_data","posts","nodes","map","v","categories","resourcePerCategory","reduce","r","e","categorySort","children","push","articlesByCategory","Object","values","useState","filter","setFilter","radioOptions","item","i","ar","indexOf","type","id","name","value","onClick","htmlFor","length","filteredPosts","setFilteredPosts","useEffect","setCurrentPage","totalNumberOfPages","setTotalNumberOfPages","currentPage","pageButtons","setPageButtons","viewingItems","setViewingItems","result","newResults","forEach","isolatedForLandingPage","undefined","slice","Math","floor","items","isHidden","className","noPaddingMobile","noPaddingTablet","url","defaultChecked","key"],"mappings":"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","file":"component---src-pages-resources-tsx-a484792df6ecac3de2ed.js","sourcesContent":["import React from 'react'\nimport styled from 'styled-components'\nimport { Link } from 'gatsby'\nimport Img from 'gatsby-image'\nimport Arrow from '../../images/link-arrow.svg'\nimport { appendUrlPartnerTracking } from '../../util/url'\n\nexport function getResourceCardColor(text: string) {\n  switch (text) {\n    case 'Blog':\n      return '#00A3C7'\n    case 'Events':\n      return '#66C1BF'\n    case 'Downloads':\n      return '#C70F55'\n    case 'White Papers':\n      return '#F7A823'\n    default:\n      return '#00A3C7'\n  }\n}\n\n\ninterface ResourcesCardInterface {\n  post: any\n  index: number\n}\n\nexport const ResourcesItem: React.FC<ResourcesCardInterface> = ({\n  post,\n  index,\n}) => {\n\n\n  function formatDate(date: string){\n      const month = date.substring(5, 7)\n      let formatedMonth =''\n      switch (month){\n        case '01':formatedMonth = 'January'\n        break\n        case '02':formatedMonth = 'February'\n        break\n        case '03':formatedMonth = 'March'    \n        break\n        case '04':formatedMonth = 'April'\n        break\n        case '05':formatedMonth = 'May'    \n        break \n        case '06':formatedMonth = 'June'   \n        break    \n        case '07':formatedMonth = 'July'    \n        break  \n        case '08':formatedMonth = 'August'  \n        break      \n        case '09':formatedMonth = 'September' \n        break      \n        case '10':formatedMonth = 'October'   \n        break    \n        case '11':formatedMonth = 'November'  \n        break\n        case '12':formatedMonth = 'December'\n     break\n      }\n\n      const formatedDay = date.substring(8, 10) \n      const formatedYear = date.substring(0, 4) \n      \n      const formatedDate =  formatedDay + \" \" +formatedMonth + \", \" + formatedYear \n      return formatedDate\n  }\n  let featureImage = null;\n\n  if(post.resources.featuredImage){\n    featureImage= post.resources.featuredImage.localFile.childImageSharp.fluid\n \n  }\n  if (index === 0) {\n       return (\n      <FirstPostContainer>\n        {featureImage && <FirstImageContainer><FirstImage fluid={featureImage} /></FirstImageContainer>}\n        <TextContainer>\n          <FirstPostInfoBar>\n            <Pill color={getResourceCardColor(post.resources.category)}>\n              {post.resources.category}\n            </Pill>\n            <Date>{formatDate(post.date)}</Date>\n          </FirstPostInfoBar>\n          <FirstPostTitle>{post.title}</FirstPostTitle>\n          <FirstDescription>{post.resources.description}</FirstDescription>\n          <ReadMoreLink to={appendUrlPartnerTracking('/resources/' + post.slug)}>\n             <b>Read more </b> <img src={Arrow}/> \n             </ReadMoreLink>\n        </TextContainer>\n      </FirstPostContainer>\n    )\n  } else {\n    return (\n      <PostCard to={appendUrlPartnerTracking('/resources/' + post.slug)}>\n        {featureImage &&(\n\n          <SecondaryImage fluid={featureImage} />\n        )}\n        <TextContainerBackground\n          color={getResourceCardColor(post.resources.category)}\n        >\n          <FirstPostInfoBar>\n            <Pill color={getResourceCardColor(post.resources.category)}>\n              {post.resources.category}\n            </Pill>\n            <Date>{formatDate(post.date)}</Date>\n          </FirstPostInfoBar>\n          <PostTitle>{post.title}</PostTitle>\n          <p>{post.resources.description}</p>\n        </TextContainerBackground>\n      </PostCard>\n    )\n  }\n}\n\nconst FirstPostTitle = styled.h3`\n  font-weight: 700;\n  line-height: 40px;\n  padding-bottom: 16px;\n  color: #1d1e22;\n`\nconst FirstDescription = styled.p`\n  font-weight: 300;\n  line-height: 30px;\n  padding-bottom: 30px;\n  color: #1d1e22;\n`\n\nconst PostTitle = styled.h5`\n  font-weight: 700;\n  font-size: 20px;\n  line-height: 30px;\n  padding-bottom: 16px;\n  color: #1d1e22;\n`\nconst TextContainer = styled.div`\n  flex: 1;\n \n width: 50%;\n @media (max-width: 768px ){\nwidth: 100%;\n}\n`\ninterface TextContainerBackground {\n  color: string\n}\n\nconst ReadMoreLink = styled(Link)`\ndisplay: flex;\nflex-direction: row;\nheight: 20px;\n\nalign-items:center;\n& img{\nheight: 15px;\nmargin-left: 10px;\n}\n`\n\nconst TextContainerBackground = styled.div`\n  flex: 1;\n  background-color: #fafafa;\n  padding-left: 30px;\n  padding-right: 30px;\n  padding-top: 20px;\n  border-top: 3px solid ${(props) => props.color};\n  min-height: 360px;\n  \n  /* max-height: 360px; */\n`\nconst FirstImageContainer = styled.div`\nwidth: 50%;\npadding-right: 49px;\ndisplay:flex;\nalign-items: center;\n@media (max-width: 768px ){\nwidth: 100%;\npadding-right: 0px;\n}\n`\nconst FirstImage = styled(Img)`\n  width: 100%;\n\n`\n\nconst SecondaryImage = styled(Img)`\n  //height: 270px;\n  width:100%;\n // padding: 40px;\n  /* min-width: 420px; */\n  \n`\nconst FirstPostContainer = styled.div`\n    display: flex;\n    border-bottom: 1px solid #dadada;\n\n    flex-direction: row;\n    grid-area: 1 / 1 / 2 / 4;\n    padding-bottom: 50px;\n    margin-bottom: 50px;\n    @media (max-width: 1024px) {\n      grid-area: 1 / 1 / 2 / 3;\n  }\n@media (max-width: 768px ){\nflex-direction: column;\n}\n \n`\n\nconst FirstPostInfoBar = styled.div`\n  padding-top: 20px;\n  padding-bottom: 20px;\n`\n\nconst PostCard = styled(Link)`\n  &:hover {\n    text-decoration: none;\n  }\n`\n\ninterface PillBackground {\n  color: string\n}\nconst Pill = styled.span<PillBackground>`\n  background-color: ${(props) => props.color};\n  padding: 3px 8px;\n  border-radius: 9px;\n  color: white;\n  font-size: 9px;\n  text-transform: uppercase;\n  margin-right: 9px;\n`\nconst Date = styled.span`\n  font-size: 10px;\n  font-weight: 700;\n  color: #1d1e22;\n`\n","import React, { useEffect, useState } from 'react'\nimport Layout from '../components/Layout'\nimport { graphql } from 'gatsby'\nimport { LazyBlocksFactory } from '../components/LazyBlocksFactory/LazyBlocksFactory'\nimport MainGrid from '../components/styling/MainGrid'\nimport Breadcrumb from '../components/shared/Breadcrumb/Breadcrumb'\n\nimport { ResourcesItem } from '../components/ResourcesComponents/ResourcesCard'\nimport styled from 'styled-components'\nimport TrackVisibility from 'react-on-screen'\nimport PromotionBannerAnimation from '../components/PromotionBannerAnimation'\nimport Arrow from '../images/link-arrow.svg'\nimport { resourceLimits } from 'worker_threads'\n\ninterface Props {\n  data: any\n  pageContext: any\n}\n\nconst resources = ({ data, pageContext }: Props) => {\n  //Get Data\n  const { wpPage, allWpPost } = data\n  const renderedBlocks = LazyBlocksFactory(wpPage.lazy_data, wpPage.title)\n  const posts = allWpPost.nodes.map((v) => v)\n\n  //Extract categories, make radio buttons\n  const categories = posts.map((post) => post.resources.category)\n\n  const resourcePerCategory = posts.reduce((r, e) => {\n    // get first letter of name of current element\n    let categorySort = e.resources.category\n    // if there is no property in accumulator with this letter create it\n    if (!r[categorySort]) r[categorySort] = { categorySort, children: [e] }\n    // if there is push current element to children array for that letter\n    else r[categorySort].children.push(e)\n    // return accumulator\n    return r\n  }, {})\n  const articlesByCategory = Object.values(resourcePerCategory)\n  //  console.log('resourcePerCategory')\n  //  console.log(articlesByCategory)\n  const [filter, setFilter] = useState('All')\n  // $.each(categories, (i, el) => {\n  //   if ($.inArray(el, categoriesList) === -1) categoriesList.push(el)\n  // })\n\n  const categoriesList = categories.filter(\n    (item, i, ar) => ar.indexOf(item) === i\n  )\n\n  const radioOptions = categoriesList.map((category, i) => {\n    return (\n      <>\n        <input\n          type=\"radio\"\n          id={'rad-' + i}\n          name=\"employees\"\n          value={filter}\n          onClick={() => {\n            setFilter(category)\n          }}\n        />\n        <label htmlFor={'rad-' + i}>\n          {category} ({articlesByCategory[i].children.length})\n        </label>\n      </>\n    )\n  })\n\n  //Filter posts\n  const [filteredPosts, setFilteredPosts] = useState(posts)\n\n  useEffect(() => {\n    if (filter === 'All') {\n      setFilteredPosts(posts)\n      setCurrentPage(1)\n    } else {\n      setFilteredPosts(posts.filter((v) => v.resources.category === filter))\n      setCurrentPage(1)\n    }\n  }, [filter])\n\n  //pagination\n\n  const postsPerPage = 13\n\n  const [totalNumberOfPages, setTotalNumberOfPages] = useState(1)\n  const [currentPage, setCurrentPage] = useState(1)\n  const [pageButtons, setPageButtons] = useState([])\n  const [viewingItems, setViewingItems] = useState([])\n\n  useEffect(() => {\n    let result = filteredPosts\n\n    // filteredPosts.map((v) => {\n    //   if (\n    //     v.resources.isolatedForLandingPage === null ||\n    //     v.resources.isolatedForLandingPage === false ||\n    //     v.resources.isolatedForLandingPage === undefined\n    //   ) {\n    //     console.log(v)\n    //   }\n    //   if (filteredPosts.length >= currentPage * postsPerPage) {\n    //     result = filteredPosts.slice(\n    //       (currentPage - 1) * postsPerPage,\n    //       currentPage * postsPerPage\n    //     )\n    //   }\n    //   if (\n    //     filteredPosts.length <= currentPage * postsPerPage &&\n    //     filteredPosts.length >= (currentPage - 1) * postsPerPage\n    //   ) {\n    //     result = filteredPosts.slice(\n    //       (currentPage - 1) * postsPerPage,\n    //       filteredPosts.length\n    //     )\n    //   }\n    // })\n\n    let newResults = []\n\n    result.forEach((v) => {\n      if (\n        v.resources.isolatedForLandingPage === null ||\n        v.resources.isolatedForLandingPage === false ||\n        v.resources.isolatedForLandingPage === undefined\n      ) {\n        newResults.push(v)\n      }\n    })\n\n    // console.log(newResults)\n\n    if (newResults.length >= currentPage * postsPerPage) {\n      result = newResults.slice(\n        (currentPage - 1) * postsPerPage,\n        currentPage * postsPerPage\n      )\n    }\n    if (\n      newResults.length <= currentPage * postsPerPage &&\n      newResults.length >= (currentPage - 1) * postsPerPage\n    ) {\n      result = newResults.slice(\n        (currentPage - 1) * postsPerPage,\n        newResults.length\n      )\n    }\n\n    // console.log(newResults)\n\n    setViewingItems(result)\n    // console.log(posts)\n  }, [currentPage, filteredPosts])\n  useEffect(() => {\n    if (filteredPosts.length >= postsPerPage) {\n      setTotalNumberOfPages(Math.floor(filteredPosts.length / postsPerPage))\n    } else {\n      setTotalNumberOfPages(1)\n    }\n  }, [filteredPosts])\n\n  useEffect(() => {\n    if (totalNumberOfPages >= 5) {\n      const items = []\n      for (let i = 0; i < totalNumberOfPages; i++) {\n        let isHidden = true\n        //first one\n        if (i === 0) {\n          isHidden = false\n        }\n        //last one\n        if (i === totalNumberOfPages - 1) {\n          isHidden = false\n        }\n        //within 5 of current\n        if (currentPage - 2 < i + 1 && i + 1 < currentPage + 2) {\n          isHidden = false\n        }\n\n        items.push(\n          <PageButton\n            onClick={() => setCurrentPage(i + 1)}\n            active={i + 1 === currentPage}\n            // hidden={isHidden}\n            className={isHidden ? 'pagination-dots' : ''}\n          >\n            {i + 1}\n          </PageButton>\n        )\n      }\n      setPageButtons(items)\n    }\n  }, [totalNumberOfPages, currentPage])\n\n  useEffect(() => {\n    // console.log(currentPage)\n  }, [currentPage])\n\n  //Breadcrumbs\n  const breadcrumbData = [\n    {\n      title: 'Home',\n      url: '/',\n    },\n    {\n      title: 'Resources',\n      url: '/resources/',\n    },\n  ]\n\n  // const filterOptions = [\"all\"]\n  return (\n    <Layout>\n      <MainGrid noPaddingMobile noPaddingTablet>\n        <Breadcrumb data={breadcrumbData} color={'black'} />\n      </MainGrid>\n\n      {renderedBlocks.map((v) => v)}\n      <MainGrid>\n        <Title>Resources</Title>\n\n        <RadioContainer>\n          <input\n            type=\"radio\"\n            id={'rad-all'}\n            name=\"employees\"\n            value={filter}\n            defaultChecked\n            onClick={() => {\n              setFilter('All')\n            }}\n          />\n          <label htmlFor={'rad-all'}>All</label>\n          {radioOptions.map((v) => v)}\n        </RadioContainer>\n\n        <hr />\n        <GridContainer>\n          {viewingItems.map((v, i) => (\n            <ResourcesItem key={v.id} post={v} index={i} />\n          ))}\n        </GridContainer>\n        {pageButtons.length > 1 ? (\n          <PaginationRow>\n            <ArrowImage\n              src={Arrow}\n              left={true}\n              active={currentPage > 1}\n              onClick={() =>\n                currentPage > 1 ? setCurrentPage(currentPage - 1) : null\n              }\n            />\n\n            {pageButtons.map((v) => v)}\n\n            <ArrowImage\n              src={Arrow}\n              left={false}\n              active={currentPage < totalNumberOfPages}\n              onClick={() =>\n                currentPage < totalNumberOfPages\n                  ? setCurrentPage(currentPage + 1)\n                  : null\n              }\n            />\n          </PaginationRow>\n        ) : null}\n      </MainGrid>\n\n      {/* <resourcesForm /> */}\n      {/* <JobApplicationForm />\n      <PartnerForm /> */}\n    </Layout>\n  )\n}\n\ninterface PageButtonProps {\n  active: boolean\n  // hidden: booelan\n}\nconst RadioContainer = styled.div`\n  > input[type='radio'] + label {\n    margin-right: 10px;\n    position: relative;\n    margin-top: 10px;\n    margin-bottom: 10px !important;\n    /* padding-left: 20px; */\n    cursor: pointer;\n    display: inline-block;\n    color: #c70f55;\n    border-radius: 5px;\n    background-color: white;\n    min-width: 101px;\n    padding-top: 11px;\n    padding-bottom: 11px;\n    border: 1px solid #c70f55;\n    text-align: center;\n    /* min-height: 60px; */\n    /* display: flex; */\n    align-items: center;\n    justify-content: center;\n    transition: all 0.2s;\n    font-size: 13px;\n    padding-left: 20px;\n    padding-right: 20px;\n  }\n\n  > input[type='radio']:checked + label {\n    color: white;\n    background-color: #c70f55;\n  }\n`\n\nconst PageButton = styled.div<PageButtonProps>`\n  font-weight: ${(props) => (props.active ? '600' : '400')};\n  color: ${(props) => (props.active ? '#00A3C7' : '#1d1e22')};\n  font-size: 20px;\n  letter-spacing: 0;\n  line-height: 30px;\n  text-align: center;\n  padding-left: 10px;\n  padding-right: 10px;\n  cursor: pointer;\n`\n\ninterface ArrowImageProps {\n  left: boolean\n  active: boolean\n}\n\nconst ArrowImage = styled.img<ArrowImageProps>`\n  cursor: pointer;\n  width: 48px;\n  height: 15px;\n  transform: ${(props) => (props.left ? 'scaleX(-1)' : 'scaleX(1)')};\n  opacity: ${(props) => (props.active ? '1' : '0.3')};\n`\n\nconst PaginationRow = styled.div`\n  border-top: 1px solid #dadada;\n  margin-top: 60px;\n  padding-top: 50px;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  overflow: hidden;\n`\nconst GridContainer = styled.div`\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n  column-gap: 30px;\n  row-gap: 30px;\n\n  @media (max-width: 768px) {\n    display: flex;\n    flex-direction: column;\n  }\n  @media (max-width: 1024px) {\n    grid-template-columns: 1fr 1fr;\n  }\n`\n\nconst Title = styled.h1`\n  padding-top: 55px;\n  padding-bottom: 55px;\n`\n\nexport default resources\n\nexport const pageQuery = graphql`\n  query resources {\n    wpPage(title: { eq: \"Resources\" }) {\n      id\n      lazy_data\n      title\n    }\n    allWpPost {\n      nodes {\n        id\n        slug\n        lazy_data\n        date\n        title\n        resources {\n          fieldGroupName\n          category\n          description\n          isolatedForLandingPage\n          featuredImage {\n            localFile {\n              childImageSharp {\n                fluid(maxWidth: 1080, toFormat: WEBP) {\n                  ...GatsbyImageSharpFluid\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n`\n"],"sourceRoot":""}