{"version":3,"sources":["webpack:///./src/utils/order.js","webpack:///./src/components/product/CategoryCards.js","webpack:///./src/templates/routes/shop-vitamins.js"],"names":["orderArray","array","order","property","sort","a","b","aIndex","indexOf","bIndex","Grid","styled","div","attrs","p","id","categoryName","responsive","sm","md","MobileNavigation","rem","Color","white","CategoryCards","props","state","selectedIndex","floatNavigation","onScroll","bind","componentDidMount","smoothscroll","polyfill","window","addEventListener","this","componentWillUnmount","removeEventListener","navigationOnScroll","category","element","document","getElementById","topPosition","getBoundingClientRect","top","shouldDisplayFixed","offsetHeight","setState","render","products","dispatchAddProductToCart","key","className","Text","defaultMessage","values","map","product","index","NameMap","name","plain","React","Component","connect","addProductToCart","PageContainer","PageContent","HeroContainer","Font","dutch","ritualBlue","lg","ProductSection","role","CategoriesSection","section","CategorySection","Divider","GraySection","PageColumn","BarrierBustersColumn","ValuePropsSection","circular","BarrierBustersTitle","h2","ProductCategoriesOrder","ShopVitamins","valuePropIcons","orderedProductCategories","_getOrderedCategories","data","allContentfulProductCategory","nodes","seo","pagePath","title","description","allCategoryNodes","barrierBusterItems","intl","unformattedTranslation","renderCategory","isUserDataLoaded","valuePropLabels","Page","OverlayLink","heading","t","subheading","amount","formatCurrency","round","linkDestination","Container","Row","ValueProps","valueProps","icons","BarrierBusters","items","appSelectors"],"mappings":"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","file":"component---src-templates-routes-shop-vitamins-js-014a62ce7ab9c40cc1f0.js","sourcesContent":["export function orderArray(array, order, property) {\n  // Make a copy to ensure we're not modifying the original data.\n  array = [...array];\n\n  return array.sort((a, b) => {\n    const aIndex = order.indexOf(a[property]);\n    const bIndex = order.indexOf(b[property]);\n\n    if (aIndex < 0 && bIndex < 0) return 0;\n    if (aIndex < 0) return 1;\n    if (bIndex < 0) return -1;\n\n    return aIndex - bIndex;\n  });\n}\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport smoothscroll from \"smoothscroll-polyfill\";\n\n// Utils\nimport NameMap from \"../../utils/nameMap\";\nimport { Color, rem, responsive } from \"../../utils/style\";\n\n// Components\nimport { ProductCard } from \"./ProductLandingCards\";\nimport Text from \"../Text\";\n\n// Redux\nimport { connect } from \"react-redux\";\nimport { addProductToCart } from \"../../store/cart/actions\";\n\n// Styled Elements\nconst Grid = styled.div.attrs(p => ({\n  id: `CategoryCards${p.categoryName}`,\n}))`\n  display: flex;\n  align-items: stretch;\n  justify-content: center;\n  flex-wrap: wrap;\n  position: relative;\n  padding-top: 64px;\n\n  ${responsive.sm`\n    padding-top: 0;\n  `};\n\n  ${responsive.md`\n    margin-left: -25px;\n    margin-right: -25px;\n  `}\n`;\n\nconst MobileNavigation = styled.div`\n  position: absolute;\n  top: 0;\n  display: flex;\n  padding: 0 16px 16px;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  width: 335px;\n\n  ${responsive.sm`\n    display: none;\n  `};\n\n  h3 {\n    font-size: ${rem(22)};\n    letter-spacing: -0.2px;\n    line-height: ${rem(32)};\n    text-align: center;\n    display: block !important;\n    margin-bottom: 0;\n\n    ${responsive.sm`\n      display: none;\n    `}\n  }\n\n  &.fixed {\n    position: fixed;\n    top: 52px;\n    left: calc(50% - (335px / 2));\n    right: 0px;\n    z-index: 10;\n    background-color: ${Color.white};\n    padding: 8px 16px 8px;\n    width: 335px;\n  }\n`;\n\nexport const CategoryCards = class CategoryCards extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      selectedIndex: 0,\n      floatNavigation: false,\n    };\n\n    this.onScroll = this.onScroll.bind(this);\n  }\n\n  componentDidMount() {\n    // Adds polyfill for window.scroll({params})\n    // https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll#Browser_Compatibility\n    smoothscroll.polyfill();\n    window.addEventListener(\"scroll\", this.onScroll);\n  }\n\n  componentWillUnmount() {\n    window.removeEventListener(\"scroll\", this.onScroll);\n  }\n\n  onScroll() {\n    this.navigationOnScroll();\n  }\n\n  navigationOnScroll() {\n    const { floatNavigation } = this.state;\n    const { category } = this.props;\n\n    const element = document.getElementById(\n      `CategoryCards${category.categoryName}`,\n    );\n\n    // Distance from top of element to top of viewport\n    const topPosition = element.getBoundingClientRect().top;\n\n    // Determines if we should `absolute: fixed` the navigation\n    //\n    // The 2nd part of this argument is negative as the element has\n    // scrolled past the top of the viewport, so we check if its between\n    // 8px from top of viewport and negative ElementHeight from top of viewport\n    const shouldDisplayFixed =\n      topPosition <= 60 && topPosition >= 0 - element.offsetHeight;\n\n    // Wrapped in statements to protect setting state every px scrolled\n    if (!floatNavigation && shouldDisplayFixed) {\n      this.setState({\n        floatNavigation: true,\n      });\n    } else if (floatNavigation && !shouldDisplayFixed) {\n      this.setState({\n        floatNavigation: false,\n      });\n    }\n  }\n\n  render() {\n    const { floatNavigation } = this.state;\n    const { products, dispatchAddProductToCart, category } = this.props;\n\n    if (!products) return null;\n\n    return (\n      <Grid categoryName={category.categoryName} key={category.categoryName}>\n        <MobileNavigation className={floatNavigation ? \"fixed\" : \"\"}>\n          <h3>\n            <Text\n              id=\"product.category-cards.heading\"\n              defaultMessage=\"Essential for {category}\"\n              values={{\n                category: <em>{category.categoryName}</em>,\n              }}\n            />\n          </h3>\n        </MobileNavigation>\n        {products.map((product, index) => {\n          return (\n            <ProductCard\n              id={index}\n              key={NameMap(product.name).plain}\n              index={index}\n              product={product}\n              dispatchAddProductToCart={dispatchAddProductToCart}\n            />\n          );\n        })}\n      </Grid>\n    );\n  }\n};\n\nexport default connect(null, {\n  dispatchAddProductToCart: addProductToCart,\n})(CategoryCards);\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 { responsive, Font, rem, Color } from \"../../utils/style\";\nimport { orderArray } from \"../../utils/order\";\n\n// Components\nimport PageSEO from \"../../components/seo/Page\";\nimport Container from \"../../components/Container\";\nimport Row from \"../../components/Row\";\nimport ValueProps from \"../../components/product/ValueProps\";\nimport BarrierBusters from \"../../components/product/BarrierBusters\";\nimport CircleNew from \"../../components/home/Circle.New\";\nimport CategoryCards from \"../../components/product/CategoryCards\";\nimport OverlayLink from \"../../components/OverlayLink\";\nimport Text from \"../../components/Text\";\n\n// Redux\nimport { connect } from \"react-redux\";\nimport appSelectors from \"../../store/app/selectors\";\n\nconst PageContainer = styled.div`\n  margin-top: 92px;\n\n  ${responsive.sm`\n    margin-top: 100px;\n  `}\n\n  ${responsive.md`\n    margin-top: 112px;\n  `}\n\n  &.no-whitespace {\n    margin-top: 48px;\n\n    ${responsive.md`\n      margin-top: 60px;\n    `}\n  }\n`;\n\nconst PageContent = styled.div`\n  z-index: 2;\n  position: relative;\n`;\n\nconst HeroContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  margin-bottom: 40px;\n\n  h1 {\n    font-size: ${rem(30)};\n    letter-spacing: -0.4px;\n    line-height: ${rem(36)};\n    text-align: center;\n    margin-bottom: 16px;\n  }\n\n  p {\n    ${Font.dutch};\n    font-size: ${rem(16)};\n    letter-spacing: 0px;\n    line-height: ${rem(26)};\n    margin-bottom: 0;\n  }\n\n  div {\n    height: 4px;\n    width: 40px;\n    display: block;\n    background-color: ${Color.ritualBlue};\n    margin-top: 24px;\n  }\n\n  ${responsive.sm`\n    h1 {\n      max-width: 360px;\n    }\n  `}\n\n  ${responsive.md`\n    margin-bottom: 64px;\n\n    h1 {\n      font-size: ${rem(56)};\n      letter-spacing: -1.61px;\n      line-height: ${rem(64)};\n      margin-bottom: 32px;\n      max-width: 614px;\n    }\n\n    p {\n      font-size: ${rem(18)};\n      letter-spacing: 0px;\n      line-height: ${rem(28)};\n    }\n\n    div {\n      margin-top: 40px;\n    }\n  `}\n\n  ${responsive.lg`\n    h1 {\n      max-width: 670px;\n    }\n  `}\n`;\n\nconst ProductSection = styled.div.attrs({\n  role: \"section\",\n  \"aria-labelledby\": \"product-section-heading\",\n})`\n  position: relative;\n  overflow: hidden;\n\n  ${responsive.sm`\n    padding-bottom: 40px;\n  `}\n\n  ${responsive.md`\n    padding-bottom: 80px;\n  `}\n`;\n\nconst CategoriesSection = styled.section`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n`;\n\nconst CategorySection = styled.div`\n  width: 100%;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  &:last-of-type {\n    margin-bottom: 80px;\n\n    ${responsive.md`\n      margin-bottom: 120px;\n    `}\n  }\n\n  h3 {\n    display: none;\n\n    ${responsive.sm`\n      display: block;\n      margin-bottom: 32px;\n      font-size: ${rem(22)};\n      letter-spacing: -0.2px;\n      line-height: ${rem(32)};\n      text-align: center;\n    `}\n\n    ${responsive.md`\n      font-size: ${rem(48)};\n      letter-spacing: -1.4px;\n      line-height: ${rem(54)};\n    `}\n\n    em {\n      ${Font.dutch};\n    }\n\n    ${responsive.md`\n      margin-bottom: 56px;\n    `}\n  }\n`;\n\nconst Divider = styled.div`\n  display: ${p => (p.category === \"Women\" ? \"none\" : \"flex\")};\n  height: 1px;\n  background-color: rgba(0, 0, 0, 0.16);\n  width: 100%;\n  margin: 56px 0;\n\n  ${responsive.sm`\n    margin: 80px 0;\n  `}\n\n  ${responsive.md`\n    margin-left: -20px;\n    margin-right: -20px;\n    width: 934px;\n  `}\n\n  ${responsive.lg`\n    width: 1170px;\n  `}\n`;\n\nconst GraySection = styled.div.attrs({\n  role: \"section\",\n  \"aria-labelledby\": \"barrier-buster-heading\",\n})`\n  position: relative;\n  overflow: hidden;\n  background-color: rgba(242, 241, 245, 0.56);\n  padding: 80px 0;\n\n  ${responsive.md`\n    padding: 120px 0;\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 ValuePropsSection = styled.section`\n  margin-bottom: 40px;\n\n  ${responsive.sm`\n    margin-bottom: 0;\n    position: relative;\n    z-index: 2;\n  `}\n\n  .divider {\n    display: flex;\n    height: 4px;\n    width: 32px;\n    background-color: ${Color.ritualBlue};\n    margin-bottom: 24px;\n\n    ${responsive.sm`\n      display: none;\n    `}\n  }\n\n  p {\n    ${Font.circular};\n    font-size: ${rem(22)};\n    letter-spacing: -0.2px;\n    line-height: ${rem(32)};\n    text-align: left;\n    margin-bottom: 0;\n\n    ${responsive.sm`\n      text-align: center;\n    `}\n\n    ${responsive.md`\n      margin-bottom: 16px;\n    `}\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\nconst ProductCategoriesOrder = [\n  \"44TmdusDzEH95uGu0URjIr\", // Women\n  \"71526baqpQqVsScHBZpIEl\", // Men\n  \"16dqMm2vfVsgy539guPkkE\", // Kids & Teens\n];\n\nexport class ShopVitamins extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.orderedProductCategories = this._getOrderedCategories(\n      props.data.allContentfulProductCategory.nodes,\n    );\n\n    this.state = {\n      seo: {\n        pagePath: \"/shop-vitamins\",\n        title: \"Multivitamins for every life stage\",\n        description:\n          \"Formulated with what your body needs for all stages of your life.\",\n      },\n    };\n  }\n\n  valuePropIcons = [\"traceable\", \"vegan\", \"gluten\", \"non\", \"fillers\"];\n\n  _getOrderedCategories(allCategoryNodes) {\n    return orderArray(\n      allCategoryNodes,\n      ProductCategoriesOrder,\n      \"contentful_id\",\n    );\n  }\n\n  barrierBusterItems() {\n    return intl.unformattedTranslation(\"shop.barrier-busters\");\n  }\n\n  renderCategory(category) {\n    return (\n      <CategorySection key={category.categoryName}>\n        <Divider category={category.categoryName} />\n        <h3>\n          <Text\n            id=\"product.category-cards.heading\"\n            defaultMessage=\"Essential for {category}\"\n            values={{\n              category: <em>{category.categoryName}</em>,\n            }}\n          />\n        </h3>\n        <CategoryCards products={category.products} category={category} />\n      </CategorySection>\n    );\n  }\n\n  render() {\n    const { isUserDataLoaded } = this.props;\n    const valuePropLabels = intl.unformattedTranslation(\n      \"shop.value-prop-labels\",\n    );\n\n    return (\n      <>\n        <PageSEO {...this.state.seo} />\n        {isUserDataLoaded && (\n          <OverlayLink\n            heading={intl.t(\"shop.overlay.heading\", \"Build Your Bundle\")}\n            subheading={intl.t(\n              \"shop.overlay.subhead\",\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        <PageContainer>\n          <ProductSection>\n            <PageContent>\n              <Container>\n                <Row>\n                  <PageColumn>\n                    <HeroContainer>\n                      <h1 id=\"product-section-heading\">\n                        {intl.t(\n                          \"shop.header-copy.headline\",\n                          \"Multivitamins for different life stages\",\n                        )}\n                      </h1>\n                      <div />\n                    </HeroContainer>\n                    <CategoriesSection>\n                      {this.orderedProductCategories.map(category => {\n                        return this.renderCategory(category);\n                      })}\n                    </CategoriesSection>\n                  </PageColumn>\n                </Row>\n              </Container>\n\n              <ValuePropsSection>\n                <Container>\n                  <Row>\n                    <PageColumn>\n                      <div className=\"divider\" />\n                      <p>\n                        {intl.t(\n                          \"shop.header-copy.value-prop-headline\",\n                          \"A multivitamin should contain key nutrients in absorbable forms—no shady extras.\",\n                        )}\n                      </p>\n                    </PageColumn>\n                  </Row>\n                </Container>\n                <ValueProps\n                  valueProps={valuePropLabels}\n                  icons={this.valuePropIcons}\n                />\n              </ValuePropsSection>\n            </PageContent>\n            <CircleNew className=\"right bottom obscured\" />\n          </ProductSection>\n          <GraySection>\n            <PageContent>\n              <Container>\n                <Row>\n                  <BarrierBustersColumn className=\"col-12 col-sm-10 offset-sm-1\">\n                    <BarrierBustersTitle id=\"barrier-buster-heading\">\n                      <Text\n                        id=\"shop.barrier-buster.title\"\n                        defaultMessage=\"Making healthy habits easy\"\n                      />\n                    </BarrierBustersTitle>\n                    <BarrierBusters items={this.barrierBusterItems()} />\n                  </BarrierBustersColumn>\n                </Row>\n              </Container>\n            </PageContent>\n            <CircleNew className=\"right top lighter\" />\n          </GraySection>\n        </PageContainer>\n      </>\n    );\n  }\n}\n\nconst mapStateToProps = state => {\n  return {\n    isUserDataLoaded: appSelectors.isUserDataLoaded(state),\n  };\n};\n\nexport default connect(mapStateToProps)(ShopVitamins);\n\nexport const query = graphql`\n  query ShopVitaminsQuery($locale: String!) {\n    allContentfulProductCategory(filter: { node_locale: { eq: $locale } }) {\n      nodes {\n        categoryName\n        id\n        contentful_id\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      }\n    }\n  }\n`;\n"],"sourceRoot":""}