{"version":3,"sources":["webpack:///./src/store/banners/selectors.js","webpack:///./src/templates/shopLandingPage.js"],"names":["bannerType","createSelector","state","banners","WhiteWrapper","styled","div","responsive","sm","md","GreyWrapper","PageContent","ProductContent","PageColumn","attrs","className","BarrierBustersColumn","PageTitle","h1","Font","circular","rem","dutch","BodyParagraph","p","Color","ritualBlue","lg","BarrierBustersTitle","h2","ShopLandingPageTemplate","props","data","allContentfulShopLandingPage","edges","node","slug","pageTitle","pageDescription","socialImage","productAttributes","products","map","product","index","productId","getProductIdForSku","sku","planId","getPlanIdForProductSku","getProductAttributes","seo","pagePath","title","description","image","url","file","width","details","height","name","price","product_id","variant","NameMap","plain","currency","quantity","process","image_url","nonInteraction","componentDidMount","this","updatePageData","label","updateLayoutState","banner","productCategory","type","productListViewed","position","metrics","track","category","categoryName","render","isUserDataLoaded","header","body","productLabels","valuePropLabels","valuePropIcons","barrierBusterTitle","barrierBusters","barrierBustersParsed","JSON","parse","childMarkdownRemark","rawMarkdownBody","heading","intl","t","subheading","amount","formatCurrency","round","linkDestination","dangerouslySetInnerHTML","__html","html","replace","valueProps","icons","items","React","Component","connect","appSelectors","bannersSelectors"],"mappings":"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","file":"component---src-templates-shop-landing-page-js-f59d1df5aeefaaf860ce.js","sourcesContent":["import { createSelector } from \"reselect\";\n\nconst banners = state => state.banners;\n\nconst bannerType = createSelector(banners, banners => banners.bannerType);\n\nexport default {\n  bannerType,\n};\n","import React from \"react\";\nimport { graphql } from \"gatsby\";\nimport styled from \"styled-components\";\n\n// Services\nimport intl from \"../services/intl\";\n\n// Utils\nimport {\n  getProductIdForSku,\n  getPlanIdForProductSku,\n} from \"../utils/planToProduct\";\nimport { Font, Color, rem, responsive } from \"../utils/style\";\nimport NameMap from \"../utils/nameMap\";\nimport metrics from \"../utils/metrics\";\n\n// Components\nimport Container from \"../components/Container\";\nimport Row from \"../components/Row\";\nimport PageSEO from \"../components/seo/Page\";\nimport CircleNew from \"../components/home/Circle.New\";\nimport ValueProps from \"../components/product/ValueProps\";\nimport BarrierBusters from \"../components/product/BarrierBusters\";\nimport ProductLandingCards from \"../components/product/ProductLandingCards\";\nimport OverlayLink from \"../components/OverlayLink\";\n\n// Redux\nimport { connect } from \"react-redux\";\nimport appSelectors from \"../store/app/selectors\";\nimport bannersSelectors from \"../store/banners/selectors\";\n\n// Styled Elements\nconst WhiteWrapper = styled.div`\n  position: relative;\n  overflow: hidden;\n  min-height: 500px;\n\n  margin-top: 52px;\n\n  ${responsive.sm`\n    margin-top: 60px;\n  `}\n\n  ${responsive.md`\n    margin-top: 72px;\n  `}\n`;\n\nconst GreyWrapper = styled(WhiteWrapper)`\n  background-color: rgba(242, 241, 245, 0.56);\n  padding: 80px 0;\n\n  margin-top: 0;\n\n  ${responsive.sm`\n    margin-top: 0;\n  `}\n\n  ${responsive.md`\n    padding: 120px 0;\n    margin-top: 0;\n  `};\n`;\n\nconst PageContent = styled.div`\n  z-index: 2;\n  position: relative;\n`;\n\nconst ProductContent = styled(PageContent)`\n  padding-bottom: 40px;\n\n  ${responsive.md`\n    padding-bottom: 80px;\n  `};\n`;\n\nconst PageColumn = styled.div.attrs({\n  className: \"col\",\n})`\n  padding-left: 20px;\n  padding-right: 20px;\n\n  ${responsive.sm`\n    padding: 0;\n  `}\n`;\n\nconst BarrierBustersColumn = styled(PageColumn)`\n  ${responsive.sm`\n    padding-left: 0;\n    padding-right: 0;\n  `};\n`;\n\nconst PageTitle = styled.h1`\n  ${Font.circular};\n  text-align: center !important;\n  font-size: ${rem(22)};\n  line-height: ${rem(32)};\n  letter-spacing: -0.2px;\n  margin: 16px 0 24px;\n\n  em {\n    ${Font.dutch};\n    font-style: italic;\n  }\n\n  ${responsive.sm`\n    margin-bottom: 32px;\n    font-size: ${rem(30)};\n    line-height: ${rem(40)};\n  `};\n\n  ${responsive.md`\n    font-size: ${rem(56)};\n    line-height: ${rem(72)};\n    letter-spacing: -2px;\n    margin-top: 40px;\n    margin-bottom: 56px;\n  `};\n`;\n\nconst BodyParagraph = styled.p`\n  position: relative;\n  ${Font.circular};\n  font-size: ${rem(22)};\n  line-height: ${rem(32)};\n  letter-spacing: -0.2px;\n  font-weight: 500;\n  margin: 0;\n  padding-top: 28px;\n  text-align: left;\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 32px;\n    height: 4px;\n    background-color: ${Color.ritualBlue};\n  }\n\n  ${responsive.sm`\n    padding-top: 0;\n    text-align: center !important;\n\n    &::before {\n      display: none;\n    }\n  `};\n\n  ${responsive.md`\n    max-width: 774px;\n    margin: 0 auto 16px;\n  `};\n\n  ${responsive.lg`\n    max-width: 970px;\n  `};\n`;\n\nconst BarrierBustersTitle = styled.h2`\n  ${Font.circular};\n  font-size: ${rem(30)};\n  line-height: ${rem(36)};\n  font-weight: 500;\n  letter-spacing: -0.4px;\n  color: ${Color.ritualBlue};\n  text-align: center !important;\n  margin: 0;\n\n  ${responsive.md`\n    font-size: ${rem(66)};\n    line-height: ${rem(72)};\n    letter-spacing: -2px;\n    margin-bottom: 24px;\n  `};\n`;\n\nexport class ShopLandingPageTemplate extends React.Component {\n  constructor(props) {\n    super(props);\n    let {\n      slug,\n      pageTitle,\n      pageDescription,\n      socialImage,\n      products,\n    } = props.data.allContentfulShopLandingPage.edges[0].node;\n\n    // Create productAttributes array\n    const productAttributes = products.map((product, index) => {\n      const productId = getProductIdForSku(product.sku);\n      const planId = getPlanIdForProductSku(product.sku);\n\n      return this.getProductAttributes(product, planId, productId);\n    });\n\n    this.state = {\n      productAttributes,\n      seo: {\n        pagePath: `${slug}`,\n        title: pageTitle,\n        description: pageDescription,\n        image: {\n          url: socialImage.file.url,\n          width: socialImage.file.details.image.width,\n          height: socialImage.file.details.image.height,\n        },\n      },\n    };\n  }\n\n  getProductAttributes(product, planId, productId) {\n    let { sku, name, price, slug, socialImage } = product;\n    let productAttributes = {\n      product_id: productId,\n      variant: planId,\n      sku: sku,\n      name: NameMap(name).plain,\n      currency: \"USD\",\n      price: price,\n      quantity: 1,\n      url: `${process.env.GATSBY_URL}/products/${slug}`,\n      image_url: `https:${socialImage.file.url}`,\n      nonInteraction: 0,\n    };\n    return productAttributes;\n  }\n\n  componentDidMount() {\n    this.props.updatePageData({\n      label: \"Shop Landing\",\n    });\n\n    if (this.props.bannerType === \"BUNDLE\") {\n      this.props.updateLayoutState({\n        banner: true,\n      });\n    }\n\n    const { productAttributes } = this.state;\n    const {\n      products,\n      productCategory,\n      type,\n    } = this.props.data.allContentfulShopLandingPage.edges[0].node;\n\n    const productListViewed = products.map((product, index) => {\n      return {\n        position: index + 1,\n        ...productAttributes[index],\n      };\n    });\n\n    metrics.track(\"Product List Viewed\", {\n      category: `${type} for ${productCategory &&\n        productCategory.categoryName}`,\n      products: productListViewed,\n    });\n  }\n\n  render() {\n    const { isUserDataLoaded } = this.props;\n    const {\n      header,\n      body,\n      productLabels,\n      products,\n      valuePropLabels,\n      valuePropIcons,\n      barrierBusterTitle,\n      barrierBusters,\n    } = this.props.data.allContentfulShopLandingPage.edges[0].node;\n\n    const barrierBustersParsed = JSON.parse(\n      barrierBusters.childMarkdownRemark.rawMarkdownBody,\n    );\n\n    const title = NameMap({\n      name: header.childMarkdownRemark.rawMarkdownBody,\n    });\n\n    return (\n      <>\n        <PageSEO {...this.state.seo} />\n        {isUserDataLoaded && (\n          <OverlayLink\n            heading={intl.t(\n              \"templates.shop.overlay-header\",\n              \"Build Your Bundle\",\n            )}\n            subheading={intl.t(\n              \"templates.shop.overlay-subheading\",\n              \"Get {amount} off your first bundled order of 2 or more products\",\n              { amount: intl.formatCurrency(10, { round: true }) },\n            )}\n            linkDestination=\"/build-a-bundle\"\n          />\n        )}\n        <WhiteWrapper>\n          <ProductContent>\n            <Container>\n              <Row>\n                <PageColumn>\n                  <PageTitle\n                    dangerouslySetInnerHTML={{\n                      __html: title.html,\n                    }}\n                  />\n                  <ProductLandingCards\n                    productLabels={productLabels}\n                    products={products}\n                  />\n                  <BodyParagraph\n                    dangerouslySetInnerHTML={{\n                      __html: body.childMarkdownRemark.html\n                        .replace(\"<p>\", \"\")\n                        .replace(\"</p>\", \"\"),\n                    }}\n                  />\n                </PageColumn>\n              </Row>\n            </Container>\n            <ValueProps valueProps={valuePropLabels} icons={valuePropIcons} />\n          </ProductContent>\n          <CircleNew className=\"right bottom obscured\" />\n        </WhiteWrapper>\n        <GreyWrapper>\n          <PageContent>\n            <Container>\n              <Row>\n                <BarrierBustersColumn className=\"col-12 col-sm-10 offset-sm-1\">\n                  <BarrierBustersTitle>\n                    {barrierBusterTitle}\n                  </BarrierBustersTitle>\n                  <BarrierBusters items={barrierBustersParsed} />\n                </BarrierBustersColumn>\n              </Row>\n            </Container>\n          </PageContent>\n          <CircleNew className=\"right top lighter\" />\n        </GreyWrapper>\n      </>\n    );\n  }\n}\n\nconst mapStateToProps = state => {\n  return {\n    isUserDataLoaded: appSelectors.isUserDataLoaded(state),\n    bannerType: bannersSelectors.bannerType(state),\n  };\n};\n\nexport default connect(mapStateToProps)(ShopLandingPageTemplate);\n\nexport const query = graphql`\n  query ShopLandingQuery($locale: String!, $slug: String!) {\n    allContentfulShopLandingPage(\n      filter: { node_locale: { eq: $locale }, slug: { eq: $slug } }\n    ) {\n      edges {\n        node {\n          slug\n          header {\n            childMarkdownRemark {\n              rawMarkdownBody\n            }\n          }\n          body {\n            childMarkdownRemark {\n              html\n            }\n          }\n          productCategory {\n            categoryName\n          }\n          productLabels\n          products {\n            ...ProductCardFragment\n            price\n            sku\n            stockStatus\n            alternateThumbnail {\n              fixed(width: 204, height: 204, quality: 90) {\n                ...GatsbyContentfulFixed_withWebp_noBase64\n              }\n              description\n            }\n            socialImage {\n              file {\n                details {\n                  image {\n                    width\n                    height\n                  }\n                }\n                url\n              }\n            }\n          }\n          valuePropLabels\n          valuePropIcons\n          barrierBusterTitle\n          barrierBusters {\n            childMarkdownRemark {\n              rawMarkdownBody\n            }\n          }\n          pageTitle\n          pageDescription\n          socialImage {\n            file {\n              details {\n                image {\n                  width\n                  height\n                }\n              }\n              url\n            }\n          }\n          type\n        }\n      }\n    }\n  }\n`;\n"],"sourceRoot":""}