{"version":3,"sources":["webpack:///./src/templates/productpage.tsx"],"names":["ProductPage","inject","componentWillMount","data","this","props","squidexProductPage","materialId","iv","undefined","visitorStore","spot","logEvent","PAGE_VIEW_EVENT","location","pageType","render","qualities","getLanguageValue","headerImage","getFluidImageSharp","examplesHeader","galleryHeader","title","examples","gallery","spotlights","react__WEBPACK_IMPORTED_MODULE_1__","components__WEBPACK_IMPORTED_MODULE_4__","subTitle","id","className","nodes","gatsby_image__WEBPACK_IMPORTED_MODULE_2___default","a","fluid","clickToEnlargeText","squidexTexts","txtClickToEnlarge","navigate","TraumwandPageComponent","query"],"mappings":"iPAgBqBA,EADpBC,YAAO,oHAENC,mBAAA,WACE,IAAMC,EAAOC,KAAKC,MAAMF,KAAKG,mBACvBC,EAAaJ,EAAKI,WAAaJ,EAAKI,WAAWC,QAAKC,EACtDF,GACFH,KAAKC,MAAMK,aAAaC,KAAKJ,GAE/BH,KAAKC,MAAMK,aAAaE,SAASC,IAAiB,CAChDC,SAAUV,KAAKC,MAAMS,SACrBC,SAAU,eAGdC,OAAA,WACE,IAAMb,EAAOC,KAAKC,MAAMF,KAAKG,mBACvBW,EAAYd,EAAKc,UAAYC,YAAiBf,EAAKc,WAAa,GAChEE,EAAcC,YAAmBjB,EAAKgB,aACtCE,EAAiBlB,EAAKkB,eAAiBH,YAAiBf,EAAKkB,gBAAkB,GAC/EC,EAAgBnB,EAAKmB,cAAgBJ,YAAiBf,EAAKmB,eAAiB,GAC5EC,EAAQpB,EAAKoB,MAAQL,YAAiBf,EAAKoB,OAAS,GACpDhB,EAAaJ,EAAKI,WAAaJ,EAAKI,WAAWC,QAAKC,EAElDe,EAAkCrB,EAAlCqB,SAAUC,EAAwBtB,EAAxBsB,QAASC,EAAevB,EAAfuB,WAE3B,OACEC,EAAA,cAAAA,EAAA,cACEA,EAAA,cAACC,EAAA,EAAD,CAAKC,SAAUN,IACfI,EAAA,wBAAKJ,GACLI,EAAA,yBAASG,GAAG,QAAQC,UAAU,6DAC5BJ,EAAA,qBAAKI,UAAU,2CACbJ,EAAA,cAACC,EAAA,EAAD,CAAkBI,MAAOf,KAE3BU,EAAA,qBAAKI,UAAU,eACbJ,EAAA,cAACM,EAAAC,EAAD,CAAKC,MAAOhB,MAGhBQ,EAAA,yBAASG,GAAG,SACVH,EAAA,cAACC,EAAA,EAAD,CAAYI,MAAON,KAErBC,EAAA,yBAASG,GAAG,WAAWC,UAAU,uBAC/BJ,EAAA,wBAAKN,GACLM,EAAA,cAACC,EAAA,EAAD,CAAQG,UAAU,kBAAkBC,MAAOR,EAAUY,mBAAoBlB,YAAiBd,KAAKC,MAAMF,KAAKkC,aAAaC,sBAEzHX,EAAA,yBAASG,GAAG,WACVH,EAAA,wBAAKL,GACLK,EAAA,cAACC,EAAA,EAAD,CAASI,MAAOP,EAASc,SAAUnC,KAAKC,MAAMkC,SAAUhC,WAAYA,KAEtEoB,EAAA,qBAAKI,UAAU,aA9CkBS,SAoD5BC,EAAK","file":"component---src-templates-productpage-tsx-8f20f613c4481fd1ba74.js","sourcesContent":["\r\nimport * as React from \"react\";\r\nimport { graphql } from \"gatsby\";\r\nimport Img from \"gatsby-image\";\r\nimport { inject } from \"mobx-react\";\r\n\r\nimport { Slider, Gallery, Seo, ProductQualities, Spotlights } from \"components\"\r\nimport { PAGE_VIEW_EVENT, TraumwandPageComponent, getLanguageValue, getFluidImageSharp } from \"utils\";\r\nimport { SquidexProductPage, SquidexTexts } from 'generated/gatsbyApiTypes';\r\n\r\nexport interface QueryData {\r\n  squidexProductPage: SquidexProductPage\r\n  squidexTexts: SquidexTexts\r\n}\r\n\r\n@inject(\"visitorStore\")\r\nexport default class ProductPage extends TraumwandPageComponent<QueryData> {\r\n  componentWillMount() {\r\n    const data = this.props.data.squidexProductPage;\r\n    const materialId = data.materialId ? data.materialId.iv : undefined;\r\n    if (materialId) {\r\n      this.props.visitorStore.spot(materialId);\r\n    }\r\n    this.props.visitorStore.logEvent(PAGE_VIEW_EVENT, {\r\n      location: this.props.location,\r\n      pageType: \"product\"\r\n    });\r\n  }\r\n  render() {\r\n    const data = this.props.data.squidexProductPage;\r\n    const qualities = data.qualities ? getLanguageValue(data.qualities) : [];\r\n    const headerImage = getFluidImageSharp(data.headerImage);\r\n    const examplesHeader = data.examplesHeader ? getLanguageValue(data.examplesHeader) : \"\";\r\n    const galleryHeader = data.galleryHeader ? getLanguageValue(data.galleryHeader) : \"\";\r\n    const title = data.title ? getLanguageValue(data.title) : \"\";\r\n    const materialId = data.materialId ? data.materialId.iv : undefined;\r\n\r\n    const { examples, gallery, spotlights } = data;\r\n\r\n    return (\r\n      <>\r\n        <Seo subTitle={title} />\r\n        <h1>{title}</h1>\r\n        <section id=\"intro\" className=\"h-100 flex flex-row-ns flex-column-reverse justify-around\">\r\n          <div className=\"w-100 w-third-ns mt3 mt0-ns self-center\">\r\n            <ProductQualities nodes={qualities} />\r\n          </div>\r\n          <div className=\"w-100 w6-ns\">\r\n            <Img fluid={headerImage} />\r\n          </div>\r\n        </section>\r\n        <section id=\"about\">\r\n          <Spotlights nodes={spotlights} />\r\n        </section>\r\n        <section id=\"examples\" className=\"bt-ns b--light-gray\">\r\n          <h3>{examplesHeader}</h3>\r\n          <Slider className=\"mb3 w-90 center\" nodes={examples} clickToEnlargeText={getLanguageValue(this.props.data.squidexTexts.txtClickToEnlarge)} />\r\n        </section>\r\n        <section id=\"gallery\">\r\n          <h3>{galleryHeader}</h3>\r\n          <Gallery nodes={gallery} navigate={this.props.navigate} materialId={materialId} />\r\n        </section>\r\n        <div className=\"mb4\" />\r\n      </>\r\n    )\r\n  }\r\n}\r\n\r\nexport const query = graphql`\r\nquery($id: String!) {\r\n  squidexTexts(identity: {eq: \"squidextexts\"}) {\r\n    txtClickToEnlarge {\r\n      de\r\n      nl\r\n      en\r\n    }\r\n  }\r\n  squidexProductPage(id: { eq: $id }) {\r\n    title {\r\n      de\r\n      nl\r\n      en\r\n    }\r\n    materialId {\r\n      iv\r\n    }\r\n    qualities {\r\n      de {\r\n        text,\r\n        positive\r\n      }\r\n      nl {\r\n        text,\r\n        positive\r\n      }\r\n      en {\r\n        text,\r\n        positive\r\n      }\r\n    }\r\n    headerImage {\r\n      childImageSharp {\r\n        fluid { \r\n          ...GatsbyImageSharpFluid_noBase64\r\n        }\r\n      }\r\n    }\r\n    spotlights {\r\n      text {\r\n        de {\r\n          html\r\n        }\r\n        nl {\r\n          html\r\n        }\r\n        en {\r\n          html\r\n        }\r\n      }\r\n      image {\r\n        childImageSharp {\r\n          fluid(maxWidth: 200, maxHeight: 200, cropFocus: NORTH) {\r\n            ...GatsbyImageSharpFluid_noBase64\r\n          }\r\n        }\r\n      }\r\n    }\r\n    examplesHeader {\r\n      de\r\n      nl\r\n      en\r\n    }\r\n    examples {\r\n      childImageSharp {\r\n        fixed(width: 250) {\r\n          ...GatsbyImageSharpFixed_noBase64\r\n        }\r\n      }\r\n    }\r\n    galleryHeader {\r\n      de\r\n      nl\r\n      en\r\n    }\r\n    gallery {\r\n        name {\r\n        iv\r\n      }\r\n      description {\r\n        iv\r\n      }\r\n      image {\r\n        childImageSharp {\r\n          fluid {\r\n            ...GatsbyImageSharpFluid_noBase64\r\n          }\r\n          original {\r\n            src\r\n            width\r\n            height\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n`\r\n"],"sourceRoot":""}