{"version":3,"sources":["webpack:///./src/components/HelpPage/HelpPage.jsx","webpack:///./src/pages/help.jsx"],"names":["HelpPage","props","contentfulData","useStaticQuery","query","pageTitle","pageSubtitle","categories","R","extractRichText","category","items","length","subtitle","content","link","extractLink","backgroundImage","textBackgroundImage","TextWrapper","fluid","style","backgroundSize","backgroundOrigin","propTypes","object","useEffect","AOS","init","offset","duration","once","Page","title","Section","aos","map","i","Container100","className","Container5050","data-aos","cx","right","left","item","data-aos-delay","onClick","getTarget","type","window","open","to","navigate","ContentfulLink"],"mappings":"2aAyBA,MAEMA,EAAYC,IAChB,MAAMC,EAAiBC,YAAeC,IAEhC,UAAEC,EAAF,aAAaC,EAAb,WAA2BC,GAAeC,IAC9CA,IAAS,CACPH,UAAWI,IACXH,aAAcG,IACdF,WAAYC,IACVA,IAAUE,GAAaA,EAASC,MAAMC,OAAS,GAC/CJ,IACEA,IAAS,CACPK,SAAUJ,IACVE,MAAOH,IACLA,IACEA,IAAS,CACPM,QAASL,IACTM,KAAMC,OAGVR,IAAY,KAEdS,gBAAiBT,IAAO,SACxBU,oBAAqBV,IAAO,YAGhCA,IAAY,OAGhBA,IAAO,sBAzBuCA,CA0B9CN,GAGIiB,EAAelB,GACXO,IAAQP,EAAMmB,OAWpB,wBAASnB,IAVT,8BACE,cAAC,IAAD,IACMA,EACJoB,MAAO,CACLC,eAAgB,UAChBC,iBAAkB,mBAsB5B,OAdAJ,EAAYK,UAAY,CACtBJ,MAAOK,UAGTC,oBAAU,KAGRC,IAAIC,KAAK,CACPC,OAAQ,IACRC,SAAU,IACVC,MAAM,KAEP,IAGD,cAACC,EAAA,EAAD,CAAMC,MAAM,OAAZ,SACE,cAACC,EAAA,EAAD,CAASC,KAAK,EAAMF,MAAO5B,EAAWQ,SAAUP,EAAhD,SACGC,EAAW6B,IAAI,CAAC1B,EAAU2B,KACzB,MAAM,MACJJ,EADI,SAEJpB,EAFI,MAGJF,EAHI,gBAIJM,EAJI,oBAKJC,GACER,EAEJ,OACE,eAAC4B,EAAA,EAAD,CAA0BC,UAAU,gBAApC,UACE,cAACC,EAAA,EAAD,CACEC,WAAS,UACTF,UAAWG,IAAG,wBAAyB,CACrC,4BAA6BL,EAAI,GAAM,IAEzCM,MACE,cAAC,IAAD,CACEvB,MAAOH,EACPsB,UAAU,oCAGdK,KACE,eAACzB,EAAD,CACEoB,UAAU,wCACVnB,MAAOF,EAFT,UAIE,qBAAKqB,UAAU,uBAAf,SACE,iCAASN,MAEX,qBAAKM,UAAU,0BAAf,SAA0C1B,SAIhD,qBAAK0B,UAAU,uBAAf,SACG5B,EAAMyB,IAAI,CAACS,EAAMR,KAChB,MAAM,MAAEJ,EAAF,QAASnB,EAAT,KAAkBC,GAAS8B,EAEjC,OACE,sBACEN,UAAU,sBAEVE,WAAS,UACTK,iBAAiBT,EAAI,EAAK,IAJ5B,UASE,sBACEE,UAAWG,IAAG,8BAA+B,CAC3C,0CACGlC,IAAQO,KAEbgC,QAAS,KACFvC,IAAQO,KAEkB,WAAzBiC,YAAUjC,EAAKkC,MACjBC,OAAOC,KAAKpC,EAAKqC,GAAI,UAIrBC,YAAStC,EAAKqC,MAbtB,UAkBE,oBAAIb,UAAU,4BAAd,SAA2CN,IAC3C,8BAAMnB,OAGPC,GACC,cAACuC,EAAA,EAAD,IACMvC,EACJwB,UAAU,yBAhCR,GAAEN,KAASI,WA/BRJ,UA8E/BjC,EAASwB,UA1JS,GA2JHxB,QAEf,MAAMI,EAAK,YClLIJ","file":"component---src-pages-help-jsx-a66cc82b1bde472ee279.js","sourcesContent":["import { useEffect } from \"react\";\r\nimport * as R from \"ramda\";\r\nimport { object } from \"prop-types\";\r\nimport { useStaticQuery, graphql, navigate } from \"gatsby\";\r\nimport cx from \"classnames\";\r\nimport {\r\n  extractRichText,\r\n  extractLink,\r\n} from \"../../common/contentful-extract.jsx\";\r\n\r\nimport \"aos/dist/aos.css\";\r\nimport AOS from \"aos\";\r\n\r\nimport \"./help-category.scss\";\r\nimport \"../../scss/global.scss\";\r\n\r\nimport BackgroundImage from \"gatsby-background-image\";\r\nimport ContentfulLink, {\r\n  getTarget,\r\n} from \"../ContentfulLink/ContentfulLink.jsx\";\r\nimport Container100 from \"../Container/Container100.jsx\";\r\nimport Container5050 from \"../Container/Container5050.jsx\";\r\nimport Page from \"../Page/Page.jsx\";\r\nimport Section from \"../Section/Section.jsx\";\r\n\r\nconst propTypes = {};\r\n\r\nconst HelpPage = (props) => {\r\n  const contentfulData = useStaticQuery(query);\r\n\r\n  const { pageTitle, pageSubtitle, categories } = R.compose(\r\n    R.evolve({\r\n      pageTitle: extractRichText,\r\n      pageSubtitle: extractRichText,\r\n      categories: R.compose(\r\n        R.filter((category) => category.items.length > 0), // hide empty sections\r\n        R.map(\r\n          R.evolve({\r\n            subtitle: extractRichText,\r\n            items: R.compose(\r\n              R.map(\r\n                R.evolve({\r\n                  content: extractRichText,\r\n                  link: extractLink,\r\n                }),\r\n              ),\r\n              R.defaultTo([]),\r\n            ),\r\n            backgroundImage: R.prop(\"fluid\"),\r\n            textBackgroundImage: R.prop(\"fluid\"),\r\n          }),\r\n        ),\r\n        R.defaultTo([]),\r\n      ),\r\n    }),\r\n    R.prop(\"contentfulHelpPage\"),\r\n  )(contentfulData);\r\n\r\n  // use a BackgroundImage if we have a \"fluid\" gatsby-image, or just use a div\r\n  const TextWrapper = (props) => {\r\n    return !R.isNil(props.fluid) ? (\r\n      <div>\r\n        <BackgroundImage\r\n          {...props}\r\n          style={{\r\n            backgroundSize: \"contain\",\r\n            backgroundOrigin: \"content-box\",\r\n          }}\r\n        />\r\n      </div>\r\n    ) : (\r\n      <div {...props} />\r\n    );\r\n  };\r\n  TextWrapper.propTypes = {\r\n    fluid: object, // gatsby image\r\n  };\r\n\r\n  useEffect(() => {\r\n    // https://github.com/michalsnik/aos\r\n    // initialize animation on scroll when the page loads\r\n    AOS.init({\r\n      offset: 100,\r\n      duration: 1000,\r\n      once: true,\r\n    });\r\n  }, []);\r\n\r\n  return (\r\n    <Page title=\"Help\">\r\n      <Section aos={true} title={pageTitle} subtitle={pageSubtitle}>\r\n        {categories.map((category, i) => {\r\n          const {\r\n            title,\r\n            subtitle,\r\n            items,\r\n            backgroundImage,\r\n            textBackgroundImage,\r\n          } = category;\r\n\r\n          return (\r\n            <Container100 key={title} className=\"help-category\">\r\n              <Container5050\r\n                data-aos=\"fade-up\"\r\n                className={cx(\"help-category__header\", {\r\n                  \"container--50-50--reverse\": i % 2 === 0,\r\n                })}\r\n                right={\r\n                  <BackgroundImage\r\n                    fluid={backgroundImage}\r\n                    className=\"help-category__background-image\"\r\n                  />\r\n                }\r\n                left={\r\n                  <TextWrapper\r\n                    className=\"help-category__header-text fancy-bold\"\r\n                    fluid={textBackgroundImage}\r\n                  >\r\n                    <div className=\"help-category__title\">\r\n                      <strong>{title}</strong>\r\n                    </div>\r\n                    <div className=\"help-category__subtitle\">{subtitle}</div>\r\n                  </TextWrapper>\r\n                }\r\n              />\r\n              <div className=\"help-category__items\">\r\n                {items.map((item, i) => {\r\n                  const { title, content, link } = item;\r\n\r\n                  return (\r\n                    <div\r\n                      className=\"help-category__item\"\r\n                      key={`${title}-${i}`}\r\n                      data-aos=\"fade-up\"\r\n                      data-aos-delay={(i % 3) * 250}\r\n                    >\r\n                      {/* eslint-note: keyboard navigation is handled by the ContentfulLink\r\n                        this click handler is so the whole \"card\" is clickable */}\r\n                      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\r\n                      <div\r\n                        className={cx(\"help-category__item-content\", {\r\n                          \"help-category__item-content--clickable\":\r\n                            !R.isNil(link),\r\n                        })}\r\n                        onClick={() => {\r\n                          if (!R.isNil(link)) {\r\n                            // for external and media links, open a in a new window\r\n                            if (getTarget(link.type) === \"_blank\") {\r\n                              window.open(link.to, \"_blank\");\r\n                            }\r\n                            // for internal/page links, navigate regularly\r\n                            else {\r\n                              navigate(link.to);\r\n                            }\r\n                          }\r\n                        }}\r\n                      >\r\n                        <h4 className=\"help-category__item-title\">{title}</h4>\r\n                        <div>{content}</div>\r\n                      </div>\r\n\r\n                      {link && (\r\n                        <ContentfulLink\r\n                          {...link}\r\n                          className=\"help-category__btn\"\r\n                        />\r\n                      )}\r\n                    </div>\r\n                  );\r\n                })}\r\n              </div>\r\n            </Container100>\r\n          );\r\n        })}\r\n      </Section>\r\n    </Page>\r\n  );\r\n};\r\n\r\nHelpPage.propTypes = propTypes;\r\nexport default HelpPage;\r\n\r\nconst query = graphql`\r\n  query HelpPage {\r\n    contentfulHelpPage {\r\n      pageTitle {\r\n        raw\r\n      }\r\n      pageSubtitle {\r\n        raw\r\n      }\r\n      categories {\r\n        title\r\n        subtitle {\r\n          raw\r\n        }\r\n        backgroundImage {\r\n          fluid {\r\n            base64\r\n            aspectRatio\r\n            sizes\r\n            src\r\n            srcSet\r\n            srcWebp\r\n            srcSetWebp\r\n          }\r\n        }\r\n        textBackgroundImage {\r\n          fluid {\r\n            base64\r\n            aspectRatio\r\n            sizes\r\n            src\r\n            srcSet\r\n            srcWebp\r\n            srcSetWebp\r\n          }\r\n        }\r\n        items {\r\n          title\r\n          content {\r\n            raw\r\n          }\r\n          link {\r\n            ...Link\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\n","// export { default } from \"../components/OurStoryPage/OurStoryPage.jsx\";\r\n// Gatsby Build Fails when using export { default } syntax\r\n// https://github.com/gatsbyjs/gatsby/issues/12384\r\nimport HelpPage from \"../components/HelpPage/HelpPage.jsx\";\r\nexport default HelpPage;\r\n"],"sourceRoot":""}