{"version":3,"sources":["webpack:///./src/components/legacy/case-studies/Stats.tsx","webpack:///./src/components/case-study/CaseStudyDownloadForm.tsx","webpack:///./src/templates/case-study.tsx"],"names":["Stats","_ref","stats","React","StyledContainer","map","stat","i","stat_value","stat_label","StyledItem","key","toString","StyledValue","$xl","length","StyledLabel","StyledLine","styled","div","withConfig","displayName","componentId","Color","blue","p","darkBlue","cyan","white","CaseStudyDownloadForm","successUrl","pardotForm","createElement","src","width","height","frameBorder","allowTransparency","style","border","CaseStudyTemplate","_data$prismicCaseStud","_caseStudy$preview_lo","_caseStudy$logo_white","_caseStudy$body","_caseStudy$infos","_caseStudy$pardot_for","data","caseStudy","prismicCaseStudy","modalVisible","setModalVisible","logoSrc","preview_logo_image","url","Layout","HelmetSeo","seo_title","company_name","seo_description","preview_text","share_image","Hero","preTitle","preTitleColor","title","hero_title","subTitle","hero_description","button","download_url","Button","label","download_button_label","onClick","backgroundColor","denseContent","offsetBottom","leftLogoSrc","logo_white_image","StyledStatsWrapper","HorizontalContainer","Section","Cols","Col","flex","StyledContentWrap","body","slice","__typename","_slice$primary$conten","primary","Error","FormattedRichText","render","content","raw","StyledBlockquote","quote_content","author","QUOTE_LEFT","className","QUOTE_RIGHT","joinedCss","StyledInfoBox","StyledInfoBoxAreaImage","StyledLogoImg","StyledInfoBoxAreaContent","infos","info","info_label","info_value","to","color","Modal","onDismiss","visible","pardot_form","blockquote","img"],"mappings":"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","file":"component---src-templates-case-study-tsx-54ef9dcabab9866b8ab1.js","sourcesContent":["import * as React from \"react\";\nimport styled from \"styled-components\";\nimport { Color } from \"../../../constants/legacy\";\n\ntype Props = {\n  stats: ReadonlyArray<\n    | undefined\n    | {\n        stat_value: string | undefined;\n        stat_label: string | undefined;\n      }\n  >;\n};\n\nexport default function Stats({ stats }: Props) {\n  return (\n    <StyledContainer>\n      {stats.map((stat, i) => {\n        if (!stat) return null;\n        const { stat_value, stat_label } = stat;\n        if (!stat_value || !stat_label) return null;\n        return (\n          <StyledItem key={i.toString()}>\n            <StyledValue $xl={stat_value.length <= 3}>{stat_value}</StyledValue>\n            <StyledLabel>{stat_label}</StyledLabel>\n            <StyledLine />\n          </StyledItem>\n        );\n      })}\n    </StyledContainer>\n  );\n}\n\nconst BREAKPOINT = 680;\n\nconst StyledContainer = styled.div`\n  background-color: ${Color.blue};\n  display: flex;\n  justify-content: center;\n\n  @media (max-width: ${BREAKPOINT}px) {\n    flex-direction: column;\n    align-items: stretch;\n    padding: 15px 0;\n  }\n`;\n\nconst StyledItem = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  padding: 30px 25px;\n  max-width: 320px;\n\n  @media (max-width: ${BREAKPOINT}px) {\n    padding: 10px 30px;\n    flex-direction: row;\n  }\n`;\n\nconst StyledValue = styled.div<{ $xl: boolean }>`\n  box-sizing: border-box;\n  width: 92px;\n  height: 92px;\n  padding: 5px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: ${(p) => (p.$xl ? \"32px\" : \"24px\")};\n  font-weight: 700;\n  background-color: ${Color.darkBlue};\n  color: ${Color.cyan};\n\n  margin-bottom: 18px;\n\n  @media (max-width: ${BREAKPOINT}px) {\n    margin-bottom: 0;\n    margin-right: 25px;\n  }\n`;\n\nconst StyledLabel = styled.div`\n  font-weight: 600;\n  font-size: 15px;\n  color: ${Color.white};\n  flex: 1;\n\n  @media (max-width: ${BREAKPOINT}px) {\n    text-align: left;\n    max-width: 240px;\n  }\n`;\n\nconst StyledLine = styled.div`\n  width: 100%;\n  max-width: 168px;\n  height: 1px;\n  background-color: ${Color.white};\n  margin-top: 16px;\n\n  @media (max-width: ${BREAKPOINT}px) {\n    display: none;\n  }\n`;\n","import React from \"react\";\nimport { useForm } from \"react-typed-form\";\nimport styled from \"styled-components\";\n\nimport { Column, Grid, Gutter, HorizontalAlign, Text } from \"..\";\nimport { FieldSelect, FieldText, SubmitButton } from \"../../form\";\n\ntype Props = {\n  successUrl: string;\n  pardotForm: string;\n};\n\nexport default function CaseStudyDownloadForm({\n  successUrl,\n  pardotForm,\n}: Props) {\n  return (\n    <iframe src={pardotForm} width=\"100%\" height=\"570\" frameBorder=\"0\" allowTransparency={true} style={{ border: 0 }}></iframe>\n  );\n}\n\nconst StyledTopRow = styled.div`\n  display: flex;\n  align-items: center;\n\n  > span {\n    flex: 1;\n  }\n`;\n","import { graphql } from \"gatsby\";\nimport Img from \"gatsby-image\";\nimport * as React from \"react\";\nimport styled from \"styled-components\";\n\nimport {\n  Layout,\n  HelmetSeo,\n  Hero,\n  Button,\n  Section,\n  HorizontalContainer,\n  Cols,\n  Col,\n  FormattedRichText,\n} from \"../components/legacy\";\nimport { Stats } from \"../components/legacy/case-studies\";\nimport QUOTE_LEFT from \"../../img/pages/home/quote_left.svg\";\nimport QUOTE_RIGHT from \"../../img/pages/home/quote_right.svg\";\nimport { Color } from \"../constants/legacy\";\nimport { Modal } from \"../components\";\nimport { CaseStudyDownloadForm } from \"../components/case-study\";\n\nexport const pageQuery = graphql`\n  query CaseStudy($uid: String!) {\n    prismicCaseStudy(uid: { eq: $uid }) {\n      data {\n        company_name\n        pardot_form\n        preview_text\n        preview_logo_image {\n          alt\n          dimensions {\n            width\n            height\n          }\n          url\n        }\n        logo_white_image {\n          alt\n          dimensions {\n            width\n            height\n          }\n          url\n        }\n        hero_title\n        hero_description\n        download_url\n        download_button_label\n\n        stats {\n          stat_value\n          stat_label\n        }\n\n        infos {\n          info_label\n          info_value\n        }\n\n        cta_text\n        cta_button_label\n\n        body {\n          __typename\n          ... on PrismicCaseStudyBodyText {\n            primary {\n              content {\n                raw\n              }\n            }\n          }\n          ... on PrismicCaseStudyBodyQuote {\n            primary {\n              quote_content\n              author\n            }\n          }\n        }\n\n        seo_title\n        seo_description\n        share_image {\n          alt\n          dimensions {\n            width\n            height\n          }\n          url\n        }\n      }\n    }\n  }\n`;\n\ntype Props = {\n  data: GatsbyTypes.CaseStudyQuery;\n};\n\nexport default function CaseStudyTemplate({ data }: Props) {\n  const caseStudy = data.prismicCaseStudy?.data;\n  if (!caseStudy) {\n    return null;\n  }\n\n  const [modalVisible, setModalVisible] = React.useState<boolean>(false);\n  const logoSrc = caseStudy.preview_logo_image?.url;\n\n  return (\n    <Layout>\n      {/* The case study has enough info to create defaults for all of these,\n            but let the user override them if they want */}\n      <HelmetSeo\n        seo_title={\n          caseStudy.seo_title ||\n          `Case Study: ${caseStudy.company_name} | Shipamax`\n        }\n        seo_description={caseStudy.seo_description || caseStudy.preview_text}\n        share_image={caseStudy.share_image}\n      />\n\n      <Hero\n        preTitle=\"Customer Story\"\n        preTitleColor=\"orange\"\n        title={caseStudy.hero_title || \"\"}\n        subTitle={caseStudy.hero_description}\n        button={\n          caseStudy.download_url && (\n            <Button\n              label={\n                caseStudy.download_button_label || \"Download case study PDF\"\n              }\n              onClick={() => setModalVisible(true)}\n            />\n          )\n        }\n        backgroundColor=\"darkBlue\"\n        denseContent\n        offsetBottom={100}\n        leftLogoSrc={caseStudy.logo_white_image?.url}\n      />\n\n      {caseStudy.stats && (\n        <StyledStatsWrapper>\n          <HorizontalContainer>\n            <Stats stats={caseStudy.stats} />\n          </HorizontalContainer>\n        </StyledStatsWrapper>\n      )}\n\n      <Section>\n        <HorizontalContainer>\n          <Cols>\n            <Col flex={525}>\n              <StyledContentWrap>\n                {caseStudy.body?.map((slice, i) => {\n                  if (!slice) return null;\n                  const key = i.toString();\n                  if (slice.__typename === \"PrismicCaseStudyBodyText\") {\n                    if (!slice.primary) {\n                      throw new Error(\"slice.primary is missing\");\n                    }\n                    return (\n                      <FormattedRichText\n                        key={key}\n                        render={slice.primary.content?.raw}\n                      />\n                    );\n                  } else if (slice.__typename === \"PrismicCaseStudyBodyQuote\") {\n                    if (!slice.primary) {\n                      throw new Error(\"slice.primary is missing\");\n                    }\n                    return (\n                      <StyledBlockquote key={key}>\n                        <p>{slice.primary.quote_content}</p>\n                        <cite>{slice.primary.author}</cite>\n                        <img src={QUOTE_LEFT} className=\"quote-left\" />\n                        <img src={QUOTE_RIGHT} className=\"quote-right\" />\n                      </StyledBlockquote>\n                    );\n                  } else {\n                    throw new Error(\n                      `Unknown slice type: ${(slice as any).__typename}`\n                    );\n                  }\n                })}\n              </StyledContentWrap>\n            </Col>\n            <Col flex={130} />\n            <Col flex={300} joinedCss=\"margin-left: 30px\">\n              <StyledInfoBox>\n                <StyledInfoBoxAreaImage>\n                  {logoSrc && <StyledLogoImg src={logoSrc} />}\n                </StyledInfoBoxAreaImage>\n                <StyledInfoBoxAreaContent>\n                  <b>{caseStudy.company_name}</b>\n                  <dl>\n                    {caseStudy.infos?.map((info, i) => {\n                      if (!info) return null;\n                      return (\n                        <div key={i.toString()}>\n                          <dt>{info.info_label}:</dt> <dd>{info.info_value}</dd>\n                        </div>\n                      );\n                    })}\n                  </dl>\n                </StyledInfoBoxAreaContent>\n              </StyledInfoBox>\n\n              <Button label=\"Contact us\" to=\"/contact\" color=\"cyan\" />\n            </Col>\n          </Cols>\n        </HorizontalContainer>\n      </Section>\n\n      {caseStudy.download_url && (\n        <Modal onDismiss={() => setModalVisible(false)} visible={modalVisible}>\n          <CaseStudyDownloadForm\n            successUrl={caseStudy.download_url}\n            pardotForm={caseStudy.pardot_form ?? \"\"}\n          />\n        </Modal>\n      )}\n    </Layout>\n  );\n}\n\nconst StyledStatsWrapper = styled.div`\n  margin-top: -90px;\n  position: relative;\n  z-index: 2;\n`;\n\nconst StyledContentWrap = styled.div`\n  padding-bottom: 70px;\n`;\n\nconst StyledBlockquote = styled.blockquote`\n  margin: 50px 0;\n  padding: 35px 70px;\n  background-color: #f1f1f1;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  position: relative;\n\n  @media (max-width: 400px) {\n    padding: 35px 25px;\n  }\n\n  p {\n    max-width: 300px;\n    font-size: 18px;\n    margin: 0 0 25px;\n  }\n\n  cite {\n    font-weight: 300;\n    font-style: normal;\n  }\n\n  .quote-left {\n    position: absolute;\n    top: 35px;\n    left: 25px;\n\n    @media (max-width: 400px) {\n      display: none;\n    }\n  }\n\n  .quote-right {\n    position: absolute;\n    top: 35px;\n    right: 25px;\n\n    @media (max-width: 400px) {\n      display: none;\n    }\n  }\n`;\n\nconst StyledInfoBox = styled.div`\n  box-shadow: 0 2px 6px #0006;\n  margin-bottom: 30px;\n`;\n\nconst StyledInfoBoxAreaImage = styled(\"div\")`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 150px;\n  background-color: #f4f4f4;\n`;\n\nconst StyledLogoImg = styled.img`\n  width: 85%;\n  height: 85%;\n  object-fit: contain;\n`;\n\nconst StyledInfoBoxAreaContent = styled.div`\n  padding: 25px;\n\n  b {\n    display: block;\n    font-size: 18px;\n  }\n\n  dl {\n    margin: 0;\n\n    > div {\n      margin: 15px 0 0;\n    }\n\n    dd,\n    dt {\n      display: inline;\n    }\n  }\n`;\n"],"sourceRoot":""}