{"version":3,"sources":["webpack:///./src/templates/products.jsx"],"names":["ProjectTemplate","props","state","selectedImage","product","data","buyOnStripeButton","this","frontmatter","square_checkout","Fragment","class","href","render","title","fields","id","className","to","isActive","toUpperCase","isSize","mobile","tablet","widescreen","images","map","image","index","fluid","childImageSharp","large","tag","type","text","onClick","setState","src","thumbnail","width","height","alt","isColor","teaser","links","data-content","link","parseInt","style","url","target","icon","label","html","isCentered","desktop","renderAs","dangerouslySetInnerHTML","__html","React","Component"],"mappings":"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","file":"component---src-templates-products-jsx-5d72415c69b58e25e5df.js","sourcesContent":["import React from \"react\";\nimport Helmet from \"react-helmet\";\nimport { graphql, Link } from \"gatsby\";\nimport Layout from \"../layout/layout\";\nimport config from \"../../data/SiteConfig\";\nimport Img from \"gatsby-image\";\nimport {\n  Container,\n  Content,\n  Section,\n  Columns,\n  Column,\n  Tag,\n  Breadcrumb,\n  BreadcrumbItem,\n  Icon,\n} from \"bloomer\";\n\nexport default class ProjectTemplate extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      selectedImage: 0,\n      product: props.data.product,\n    };\n  }\n\n  buyOnStripeButton() {\n    if (this.state.product.frontmatter.square_checkout) {\n      return (\n        <React.Fragment>\n          <a\n            class=\"button is-primary is-fullwidth is-large\"\n            href={this.state.product.frontmatter.square_checkout}\n          >\n            <span class=\"icon\">\n              <i class=\"fas fa-shopping-cart\"></i>\n            </span>\n            <span>Buy audio CD</span>\n          </a>\n        </React.Fragment>\n      );\n    }\n    return null;\n  }\n\n  render() {\n    const product = this.state.product;\n\n    return (\n      <Layout>\n        <Helmet>\n          <title>{`Shop | ${product.frontmatter.title} - ${product.fields.id}`}</title>\n        </Helmet>\n        <Section className=\"has-navbar-padding\">\n          <Container>\n            <hr />\n            <Breadcrumb>\n              <ul>\n                <BreadcrumbItem>\n                  <Link to=\"/\">Home</Link>\n                </BreadcrumbItem>\n                <BreadcrumbItem>\n                  <Link to=\"/shop/\">Shop</Link>\n                </BreadcrumbItem>\n                <BreadcrumbItem isActive>\n                  <a>{product.fields.id.toUpperCase()}</a>\n                </BreadcrumbItem>\n              </ul>\n            </Breadcrumb>\n            <Columns className=\"is-vcentered-desktop\">\n              <Column isSize={{ mobile: 12, tablet: 4, widescreen: 6 }}>\n                <div class=\"product-images\">\n                  <div class=\"product-images-display\">\n                    {product.frontmatter.images.map((image, index) => (\n                      <Img\n                        fluid={image.childImageSharp.large}\n                        className={\n                          this.state.selectedImage === index ? \"active\" : \"\"\n                        }\n                      />\n                    ))}\n                    {product.frontmatter.tag ? (\n                      <div class=\"ribbon-wrapper\">\n                        <div\n                          className={`ribbon ${product.frontmatter.tag.type}`}\n                        >\n                          {product.frontmatter.tag.text}\n                        </div>\n                      </div>\n                    ) : null}\n                  </div>\n                  <ul class=\"product-images-thumbnail-list\">\n                    {product.frontmatter.images.map((image, index) => (\n                      <li\n                        className={\n                          this.state.selectedImage === index ? \"active\" : \"\"\n                        }\n                        onClick={() => {\n                          this.setState({ selectedImage: index });\n                        }}\n                      >\n                        <img\n                          src={image.childImageSharp.thumbnail.src}\n                          width=\"75\"\n                          height=\"75\"\n                          alt=\"\"\n                        />\n                      </li>\n                    ))}\n                  </ul>\n                </div>\n              </Column>\n              <Column>\n                <div className=\"product-info-container\">\n                  <div class=\"leveller\">\n                    <p class=\"has-text-centered\">\n                      <Tag isColor=\"light\" isSize=\"small\">\n                        {product.fields.id.toUpperCase()}\n                      </Tag>\n                    </p>\n                    <h1 class=\"title is-1 has-text-centered\">\n                      {product.frontmatter.title}\n                    </h1>\n                    <p class=\"subtitle is-4 has-text-centered has-text-grey\">\n                      {product.frontmatter.teaser}\n                    </p>\n                  </div>\n                  <div class=\"leveller\">\n                    {this.buyOnStripeButton()}\n                    {product.frontmatter.links && product.frontmatter.square_checkout ? (\n                      <div\n                        class=\"is-divider\"\n                        data-content=\"OR LISTEN ONLINE\"\n                      ></div>) : null}\n                    <div class=\"columns is-multiline is-centered\">\n                      {product.frontmatter.links\n                        ? product.frontmatter.links.map((link) => (\n                            <Column\n                              isSize={{\n                                mobile: 12,\n                                tablet: parseInt(link.width),\n                              }}\n                            >\n                              <a\n                                class={`button is-fullwidth ${\n                                  link.style ? link.style : \"is-dark\"\n                                }`}\n                                href={link.url}\n                                target=\"_blank\"\n                              >\n                                <span class=\"icon\">\n                                  <i class={link.icon}></i>\n                                </span>\n                                <span>{link.label}</span>\n                              </a>\n                            </Column>\n                          ))\n                        : null}\n                    </div>\n                  </div>\n                </div>\n              </Column>\n            </Columns>\n          </Container>\n        </Section>\n\n        {product.html !== \"\" ? (\n          <Section>\n            <Container>\n              <Columns isCentered>\n                <Column isSize={{ mobile: 12, desktop: 8 }}>\n                  <Content\n                    renderAs=\"article\"\n                    dangerouslySetInnerHTML={{ __html: product.html }}\n                  />\n                </Column>\n              </Columns>\n            </Container>\n          </Section>\n        ) : null}\n      </Layout>\n    );\n  }\n}\n\nexport const pageQuery = graphql`\n  query RecordingByCatalogueNo($slug: String!) {\n    product: markdownRemark(fields: { slug: { eq: $slug } }) {\n      fields {\n        id\n      }\n      frontmatter {\n        id\n        title\n        teaser\n        price\n        stripe_sku\n        square_checkout\n        images {\n          childImageSharp {\n            large: fluid(maxWidth: 1280) {\n              ...GatsbyImageSharpFluid\n            }\n            thumbnail: fixed(width: 75, height: 75) {\n              ...GatsbyImageSharpFixed\n            }\n          }\n        }\n        links {\n          label\n          url\n          icon\n          width\n        }\n      }\n      html\n    }\n  }\n`;\n"],"sourceRoot":""}