{"version":3,"sources":["webpack:///./src/components/gifting/GiftingHero.js","webpack:///./src/templates/routes/gift.js"],"names":["HeroContent","styled","div","HeroTitle","attrs","className","Font","circular","rem","responsive","sm","lg","HeroHeadline","md","dutch","HeroCta","GiftingHero","Color","ritualBlue","render","this","props","title","headline","cta","imageMobile","imageDesktop","backgroundColor","titleMarkdown","childMarkdownRemark","html","replace","intl","t","headlineMarkdown","dangerouslySetInnerHTML","__html","RitualButton","label","React","Component","GiftingContent","GiftingHeader","FeatureWrapper","GiftPage","data","contentfulGiftPage","pageTitle","pageDescription","socialImage","state","seo","pagePath","description","image","url","file","width","details","height","componentDidMount","updatePageData","updateLayoutState","navColor","banner","trackCtaClick","e","preventDefault","metrics","track","category","then","window","location","href","heroTitle","heroHeadline","heroImageDesktop","heroImageMobile","heroBackgroundColor","heroCtaText","featuredArea1","featuredArea1Image","featuredArea2","featuredArea2Image","featuredArea3","featuredArea3Image","featuredArea3CtaText","heroCtaProps","onClick","checkoutUrl","featuredArea3CtaProps","Page","PageHero","id","Text","defaultMessage","align","markdown","centerMobile"],"mappings":"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","file":"component---src-templates-routes-gift-js-159743ce903774d7c41a.js","sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\n\n// Services\nimport intl from \"../../services/intl\";\n\n// Utils\nimport { rem, Color, Font, responsive } from \"../../utils/style\";\n\n// Components\nimport RitualButton from \"../global/RitualButton\";\n\n// Styled Elements\nconst HeroContent = styled.div`\n  text-align: center;\n  z-index: 2;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n`;\n\nconst HeroTitle = styled.div.attrs({\n  className: \"mb-2 mb-md-4\",\n})`\n  margin: 0 auto;\n\n  h1 {\n    ${Font.circular};\n    margin: 0 auto;\n    text-align: center;\n    font-size: ${rem(30)};\n    line-height: ${rem(36)};\n    font-weight: 500;\n    letter-spacing: -0.4px;\n\n    ${responsive.sm`\n      font-size: ${rem(48)};\n      line-height: ${rem(54)};\n      letter-spacing: -1.4px;\n    `};\n\n    ${responsive.lg`\n      font-size: ${rem(66)};\n      line-height: ${rem(72)};\n      letter-spacing: -2px;\n    `};\n  }\n`;\n\nconst HeroHeadline = styled.div.attrs({\n  className: \"mb-4 mb-md-5\",\n})`\n  margin: 0px auto;\n  width: 200px;\n\n  ${responsive.sm`\n    width: 340px;\n    margin-bottom: 36px\n  `};\n\n  ${responsive.md`\n    width: 320px;\n    margin-bottom: 40px\n  `};\n\n  ${responsive.lg`\n    width: 500px;\n  `};\n\n  p {\n    ${Font.dutch};\n    margin: 0;\n    font-size: ${rem(16)};\n    line-height: ${rem(26)};\n    font-weight: normal;\n    letter-spacing: 0;\n\n    ${responsive.md`\n      font-size: ${rem(20)};\n      line-height: ${rem(30)};\n    `};\n  }\n`;\n\nconst HeroCta = styled.div``;\n\nconst HeroRedeem = styled.div`\n  margin-top: 52px;\n  ${responsive.sm`\n    margin-top: 80px;\n  `};\n\n  ${responsive.md`\n    margin-top: 52px;\n  `};\n\n  ${responsive.lg`\n    margin-top: 123px;\n  `};\n\n  a {\n    ${Font.circular}\n    color: ${Color.ritualBlue};\n    font-size: ${rem(16)};\n    line-height: ${rem(26)};\n    font-weight: 500;\n    letter-spacing: 0;\n    cursor: pointer;\n    margin: 0;\n    border-bottom: 2px solid ${Color.ritualBlue};\n  }\n`;\n\nexport default class GiftingHero extends React.Component {\n  render() {\n    let {\n      title,\n      headline,\n      imageMobile,\n      imageDesktop,\n      backgroundColor,\n      cta,\n    } = this.props;\n\n    const titleMarkdown = title.childMarkdownRemark.html.replace(\n      intl.t(\"gifting.title-markdown-replace-gift\", \"Gift \"),\n      intl.t(\"gifting.title-markdown-replace-gift-with\", \"Gift<br /> \"),\n    );\n    const headlineMarkdown = headline.childMarkdownRemark.html;\n\n    return (\n      <HeroContent>\n        <HeroTitle dangerouslySetInnerHTML={{ __html: titleMarkdown }} />\n        <HeroHeadline dangerouslySetInnerHTML={{ __html: headlineMarkdown }} />\n        <HeroCta>\n          <RitualButton className=\"alt-hover\" {...cta}>\n            {cta.label}\n          </RitualButton>\n        </HeroCta>\n        {/* TODO: Add \"Redeem Gift\" for Gift Card v2\n              <HeroRedeem>\n                <MagicLink href=\"\">Redeem Gift</MagicLink>\n              </HeroRedeem>\n              */}\n      </HeroContent>\n    );\n  }\n}\n","import React from \"react\";\nimport { graphql } from \"gatsby\";\nimport styled from \"styled-components\";\n\n// Utils\nimport { rem, responsive } from \"../../utils/style\";\nimport metrics from \"../../utils/metrics\";\n\n// Components\nimport PageSEO from \"../../components/seo/Page\";\nimport GiftingHero from \"../../components/gifting/GiftingHero\";\nimport FeaturedAreaNew from \"../../components/home/FeaturedArea.New\";\nimport PageHero from \"../../components/PageHero\";\nimport Text from \"../../components/Text\";\n\n// Styled Elements\nconst GiftingContent = styled.div.attrs({\n  className: \"d-flex align-items-center justify-content-center flex-column\",\n})``;\n\nconst GiftingHeader = styled.div.attrs({\n  className: \"mt-5 mt-md-9\",\n})`\n  width: 250px;\n\n  h1 {\n    margin: 0;\n    text-align: center;\n    font-size: ${rem(26)};\n    line-height: ${rem(36)};\n    font-weight: 500;\n    letter-spacing: -0.3px;\n\n    ${responsive.md`\n      font-size: ${rem(48)};\n      line-height: ${rem(54)};\n      letter-spacing: -1.4px;\n    `};\n  }\n\n  ${responsive.sm`\n    width: 800px;\n  `};\n`;\n\nconst FeatureWrapper = styled.div.attrs({\n  className: \"mb-3 mb-sm-0\",\n})`\n  width: 100%;\n  margin-top: 32px;\n  ${responsive.md`\n    margin-top: 80px;\n  `};\n`;\n\nexport default class GiftPage extends React.Component {\n  constructor(props) {\n    super(props);\n\n    let {\n      pageTitle,\n      pageDescription,\n      socialImage,\n    } = this.props.data.contentfulGiftPage;\n\n    this.state = {\n      seo: {\n        pagePath: `gift`,\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  componentDidMount() {\n    this.props.updatePageData({\n      label: \"Gift Cards\",\n    });\n\n    this.props.updateLayoutState({\n      navColor: \"#FFFFFF\",\n      banner: false,\n    });\n  }\n\n  trackCtaClick(title, url, e) {\n    e.preventDefault();\n    metrics\n      .track(\"CTA Clicked\", {\n        title: title,\n        category: \"Gift Card\",\n      })\n      .then(() => {\n        window.location.href = url;\n      });\n  }\n\n  render() {\n    let {\n      heroTitle,\n      heroHeadline,\n      heroImageDesktop,\n      heroImageMobile,\n      heroBackgroundColor,\n      heroCtaText,\n      featuredArea1,\n      featuredArea1Image,\n      featuredArea2,\n      featuredArea2Image,\n      featuredArea3,\n      featuredArea3Image,\n      featuredArea3CtaText,\n    } = this.props.data.contentfulGiftPage;\n\n    let checkoutUrl =\n      process.env.GATSBY_CHECKOUT_URL || \"//checkout.ritual.com\";\n    const giftCardPersonalizeUrl = `${checkoutUrl}/gift-card/personalize`;\n\n    // `label` represents the CTA text, the rest of the properties should match\n    // the props passed to `RitualButton`.\n    const heroCtaProps = {\n      label: heroCtaText,\n      title: heroCtaText,\n      onClick: e => {\n        this.trackCtaClick(heroCtaText, giftCardPersonalizeUrl, e);\n      },\n    };\n    const featuredArea3CtaProps = {\n      label: featuredArea3CtaText,\n      title: featuredArea3CtaText,\n      onClick: e => {\n        this.trackCtaClick(featuredArea3CtaText, giftCardPersonalizeUrl, e);\n      },\n    };\n\n    return (\n      <>\n        <PageSEO {...this.state.seo} />\n        <PageHero\n          id=\"gifting\"\n          backgroundColor={heroBackgroundColor}\n          imageMobile={heroImageMobile}\n          imageDesktop={heroImageDesktop}\n        >\n          <GiftingHero\n            title={heroTitle}\n            headline={heroHeadline}\n            cta={heroCtaProps}\n          />\n        </PageHero>\n        <GiftingContent>\n          <GiftingHeader>\n            <h1>\n              <Text\n                id=\"gift.heading\"\n                defaultMessage=\"Give Them Something Good\"\n              />\n            </h1>\n          </GiftingHeader>\n          <FeatureWrapper>\n            <FeaturedAreaNew\n              align=\"right\"\n              image={featuredArea1Image}\n              markdown={featuredArea1.childMarkdownRemark.html}\n              centerMobile={true}\n            />\n            <FeaturedAreaNew\n              align=\"left\"\n              image={featuredArea2Image}\n              markdown={featuredArea2.childMarkdownRemark.html}\n              centerMobile={true}\n            />\n            <FeaturedAreaNew\n              align=\"right\"\n              image={featuredArea3Image}\n              markdown={featuredArea3.childMarkdownRemark.html}\n              cta={featuredArea3CtaProps}\n              centerMobile={true}\n            />\n          </FeatureWrapper>\n        </GiftingContent>\n      </>\n    );\n  }\n}\n\nexport const giftQuery = graphql`\n  query GiftQuery($locale: String!) {\n    contentfulGiftPage(node_locale: { eq: $locale }) {\n      heroTitle {\n        childMarkdownRemark {\n          html\n        }\n      }\n      heroHeadline {\n        childMarkdownRemark {\n          html\n        }\n      }\n      heroImageDesktop {\n        file {\n          url\n        }\n        fluid(maxWidth: 1920, quality: 90) {\n          ...GatsbyContentfulFluid_withWebp_noBase64\n        }\n        description\n      }\n      heroImageMobile {\n        file {\n          url\n        }\n        fluid(maxWidth: 912, quality: 90) {\n          ...GatsbyContentfulFluid_withWebp_noBase64\n        }\n        description\n      }\n      heroBackgroundColor\n      heroCtaText\n      featuredArea1 {\n        childMarkdownRemark {\n          html\n        }\n      }\n      featuredArea1Image {\n        file {\n          url\n        }\n        fluid(maxWidth: 710, quality: 90) {\n          ...GatsbyContentfulFluid_withWebp_noBase64\n        }\n        description\n      }\n      featuredArea2 {\n        childMarkdownRemark {\n          html\n        }\n      }\n      featuredArea2Image {\n        file {\n          url\n        }\n        fluid(maxWidth: 710, quality: 90) {\n          ...GatsbyContentfulFluid_withWebp_noBase64\n        }\n        description\n      }\n      featuredArea3 {\n        childMarkdownRemark {\n          html\n        }\n      }\n      featuredArea3Image {\n        file {\n          url\n        }\n        fluid(maxWidth: 710, quality: 90) {\n          ...GatsbyContentfulFluid_withWebp_noBase64\n        }\n        description\n      }\n      featuredArea3CtaText\n      pageTitle\n      pageDescription\n      socialImage {\n        file {\n          details {\n            image {\n              width\n              height\n            }\n          }\n          url\n        }\n      }\n    }\n  }\n`;\n"],"sourceRoot":""}