{"version":3,"sources":["webpack://switch-website/./src/images/about/circle.png","webpack://switch-website/./src/components/about/CircleBackground.js","webpack://switch-website/./src/components/common/SEO.js","webpack://switch-website/./src/helpers/hooks/useSiteMetaData.js","webpack://switch-website/./src/pages/about/contact-sales.js"],"names":["circleHeightMultiplier","colors","circle","maxWidth","SEO","title","ogTitle","description","image","isArticle","lang","pathname","useLocation","siteMetadata","useSiteMetadata","defaultTitle","titleTemplate","defaultDescription","defaultImage","siteUrl","seo","url","Helmet","name","content","property","defaultProps","useStaticQuery","site","settings","require","mdBreakpoint","parseInt","breakpoints","TalkWithUsContainer","TalkWithUsCircleContainer","CircleBackground","ContentContainer","H4","fontWeights","Hero","DefaultForm","ContactSalesForm","schema","navigate","useI18next","useState","formData","setFormData","formErrors","setFormErrors","isSubmitting","setIsSubmitting","formElements","map","input","id","required","className","onChange","event","message","fields","getValue","target","value","errorMessages","errorClass","length","element","Select","onSelect","disabled","defaultOption","attributes","placeholder","key","htmlFor","label","messages","submitContactSalesForm","preventDefault","frontendErrors","validateFormData","formPostToHubspot","contactSalesHubspotFormId","Trans","state","contactEmail","SALES_TEAM_EMAIL","P2","type","onClick","useContext","ContrastContext","setContrast","screenSize","ScreenSizeContext","t","useTranslation","contentContainerHeight","setContentContainerHeight","contentContainer","useRef","circleCss","useEffect","width","current","scrollHeight","halfCord","diameter","height","contactSalesFormSchema","getContactSalesFormSchema","css","ref"],"mappings":"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","file":"component---src-pages-about-contact-sales-js-7782170469dd212cd92a.js","sourcesContent":["export default __webpack_public_path__ + \"static/circle-b13a953896a68362be5fb3477b5359be.png\";","import styled from '@emotion/styled';\n\nimport {colors, maxWidth} from '../../styles/theme';\nimport circle from '../../images/about/circle.png';\n\n\n/*\n * Constants\n */\nconst circleImageRatio = 0.692; // Ratio of the circle, to help us calculate its height based on the screen width\nconst circleHeightMultiplier = circleImageRatio * 0.95; // The circle can only use 95% of the total screen width\n\n\n/*\n * Public Elements\n */\nconst CircleBackground = styled.div`\n text-align: center;\n position: relative;\n margin-left: auto;\n margin-right: auto;\n background: ${colors.transparent} url(${circle}) no-repeat scroll center bottom;\n background-size: contain;\n max-width: ${maxWidth}px;\n height: calc(100vw * ${circleHeightMultiplier});\n max-height: calc(${maxWidth}px * ${circleHeightMultiplier});\n`;\n\n\n/*\n * Exports\n */\nexport default CircleBackground;\n","/* eslint-disable i18next/no-literal-string */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport {Helmet} from 'gatsby-plugin-react-i18next';\nimport {useLocation} from '@gatsbyjs/reach-router';\nimport useSiteMetadata from '../../helpers/hooks/useSiteMetaData';\n\n\nfunction SEO({title, ogTitle = null, description, image = null, isArticle = false, lang = 'en'}) {\n const {pathname} = useLocation();\n const siteMetadata = useSiteMetadata();\n\n const {\n defaultTitle,\n titleTemplate,\n defaultDescription,\n defaultImage,\n siteUrl,\n } = siteMetadata;\n\n const seo = {\n title: title || defaultTitle,\n ogTitle: ogTitle || title || defaultTitle,\n description: description || defaultDescription,\n image: `${siteUrl}${image || defaultImage}`,\n url: `${siteUrl}${pathname}`,\n };\n\n // Since Twitter also looks for Open Graph (Facebook) tags instead of only its own, we can avoid duplicated tags\n // See: https://css-tricks.com/essential-meta-tags-social-media/#reconciling-meta-tags\n return (\n \n \n\n \n \n\n {seo.ogTitle && }\n {seo.description && }\n {seo.image && }\n {seo.url && }\n {seo.image && }\n {isArticle && }\n \n );\n}\n\nSEO.defaultProps = {\n ogTitle: null,\n description: null,\n lang: 'en',\n image: null,\n isArticle: false,\n};\n\nSEO.propTypes = {\n title: PropTypes.string.isRequired,\n ogTitle: PropTypes.string,\n description: PropTypes.string,\n lang: PropTypes.string,\n image: PropTypes.string,\n isArticle: PropTypes.bool,\n};\n\n\nexport default SEO;\n","import {useStaticQuery, graphql} from 'gatsby';\n\nconst useSiteMetadata = () => {\n const {site} = useStaticQuery(graphql`\n query {\n site {\n siteMetadata {\n defaultTitle: title\n titleTemplate\n defaultDescription: description\n defaultImage: image\n author\n siteUrl\n }\n }\n }\n `);\n return site.siteMetadata;\n};\n\nexport default useSiteMetadata;\n","/** @jsx jsx */\nimport React, {useContext, useEffect, useRef, useState} from 'react';\nimport PropTypes from 'prop-types';\n\nimport {jsx} from '@emotion/react';\nimport styled from '@emotion/styled';\nimport {Trans, useI18next, useTranslation} from 'gatsby-plugin-react-i18next';\n\nimport {contactSalesHubspotFormId, getContactSalesFormSchema} from '../../helpers/constants/forms';\nimport {ContrastContext, ScreenSizeContext} from '../../helpers/context';\nimport {formPostToHubspot, validateFormData} from '../../helpers/utils/forms';\nimport SEO from '../../components/common/SEO';\nimport {Hero, H4, P2} from '../../components/common/Typography';\nimport {breakpoints, colors, ContentContainer, fontWeights} from '../../styles/theme';\nimport CircleBackground from '../../components/about/CircleBackground';\nimport {PrimaryButton} from '../../components/common/Clickables';\nimport {DefaultForm, FormError, Select} from '../../components/common/Forms';\n\nconst settings = require('../../../settings');\n\n\n/*\n * Constants\n */\nconst mdBreakpoint = parseInt(breakpoints.md.replace('px', ''), 10);\n\n\n/*\n * Private Elements\n */\nconst TalkWithUsContainer = styled.div`\n background-color: ${colors.black};\n`;\n\nconst TalkWithUsCircleContainer = styled.div`\n padding-bottom: 25px;\n\n ${CircleBackground} {\n top: 25px;\n right: 25px;\n max-width: none;\n max-height: none;\n }\n\n ${ContentContainer} {\n position: relative;\n padding-top: 150px;\n padding-left: 25px;\n padding-right: 25px;\n color: ${colors.white};\n\n ${H4} {\n font-weight: ${fontWeights.regular};\n padding-top: 15px;\n }\n }\n\n @media (min-width: 500px) {\n ${CircleBackground} {\n right: 30%;\n }\n }\n\n @media (min-width: 550px) {\n ${CircleBackground} {\n right: 50%;\n }\n }\n\n @media (min-width: 600px) {\n ${CircleBackground} {\n right: 65%;\n }\n }\n\n @media not all and (min-width: ${breakpoints.md}) {\n ${CircleBackground} {\n position: absolute;\n border-radius: 50%;\n background: linear-gradient(to top right, ${colors.darkPurple}, ${colors.black});\n }\n }\n\n @media not all and (min-width: ${breakpoints.lg}) {\n ${ContentContainer} {\n ${Hero} {\n font-size: 34px;\n line-height: 44px;\n font-weight: ${fontWeights.semiBold};\n }\n\n ${H4} {\n font-size: 18px;\n line-height: 26px;\n margin-bottom: 50px;\n }\n }\n }\n\n @media (min-width: ${breakpoints.md}) {\n ${ContentContainer} {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 15vh 65px 0;\n\n ${Hero} {\n margin-top: 10vh;\n }\n }\n\n ${CircleBackground} {\n right: 42%;\n }\n\n ${DefaultForm} {\n .form-group {\n margin-bottom: 15px;\n\n label {\n font-size: 12px;\n line-height: 20px;\n }\n }\n }\n }\n\n @media (min-width: 900px) {\n ${DefaultForm} {\n .form-group {\n label {\n font-size: inherit;\n line-height: inherit;\n }\n }\n }\n }\n\n @media (min-width: 1050px) {\n ${DefaultForm} {\n .form-group {\n margin-bottom: 32px;\n }\n }\n }\n\n @media (min-width: ${breakpoints.lg}) {\n ${ContentContainer} {\n padding-top: 25vh;\n\n ${Hero} {\n margin-top: 0;\n }\n }\n }\n\n @media (min-width: ${breakpoints.xl}) {\n ${ContentContainer} {\n padding-top: 35vh;\n }\n }\n\n @media (min-width: 1800px) {\n ${CircleBackground} {\n right: 45%;\n }\n }\n`;\n\nconst ContactSalesForm = ({schema}) => {\n const {navigate} = useI18next();\n\n const [formData, setFormData] = useState({});\n const [formErrors, setFormErrors] = useState({});\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n const formElements = schema.map(input => {\n const id = `contactSalesForm-${input.name}`;\n const required = input.required ? * : null;\n const onChange = event => {\n // Clean error message when the form values changes\n if (formErrors?.message) {\n formErrors.message = null;\n }\n\n setFormErrors({...formErrors, fields: {...formErrors?.fields, [input.name]: null}});\n setFormData({...formData, [input.name]: input.getValue ? input.getValue(event) : event.target.value});\n };\n\n const errorMessages = formErrors.fields?.[input.name];\n // eslint-disable-next-line i18next/no-literal-string\n const errorClass = errorMessages && errorMessages.length ? 'error' : '';\n\n const element = input.element === Select ? (\n \n ) : (\n \n );\n\n return (\n
\n \n\n {element}\n\n \n
\n );\n });\n\n const submitContactSalesForm = async event => {\n event.preventDefault();\n setIsSubmitting(true);\n setFormErrors({});\n\n try {\n const frontendErrors = validateFormData(formData, schema);\n if (frontendErrors) {\n setFormErrors(frontendErrors);\n return false;\n }\n\n const formPostResult = await formPostToHubspot(contactSalesHubspotFormId, formData);\n if (!formPostResult) {\n setFormErrors({\n message: [Couldn't submit response. Please, try again later.],\n });\n return false;\n }\n return navigate('/about/thank-you', {state: {contactEmail: settings.SALES_TEAM_EMAIL}});\n } finally {\n setIsSubmitting(false);\n }\n };\n\n return (\n \n {formElements}\n \n
\n *required\n \n Contact Sales\n \n
\n \n );\n};\n\nContactSalesForm.propTypes = {\n schema: PropTypes.arrayOf(PropTypes.object.isRequired).isRequired,\n};\n\n\n/*\n * Public Elements\n */\nconst AboutContactSalesPage = () => {\n const setContrast = useContext(ContrastContext);\n setContrast(false);\n const screenSize = useContext(ScreenSizeContext);\n const {t} = useTranslation();\n const [contentContainerHeight, setContentContainerHeight] = useState(0);\n const contentContainer = useRef(null);\n let circleCss = null;\n\n // Update the stored content container height on resize\n useEffect(() => {\n // Only update the state if the screen is smaller than medium, to avoid unecessary re-renders\n if (screenSize.width < mdBreakpoint) {\n setContentContainerHeight(contentContainer.current.scrollHeight);\n }\n }, [screenSize.width]);\n\n if (screenSize.width < mdBreakpoint) {\n // Calculate the diameter of the circle, using the chord's length as the content container height, and width as\n // 95% of the screen size.\n // eslint-disable-next-line max-len\n // More info: https://math.stackexchange.com/questions/564058/calculate-the-radius-of-a-circle-given-the-chord-length-and-height-of-a-segment/1176742#1176742\n const halfCord = contentContainerHeight / 2;\n const width = 0.95 * screenSize.width;\n\n const radius = ((halfCord ** 2) + (width ** 2)) / (2 * width);\n const diameter = 2 * radius;\n circleCss = {\n height: diameter,\n width: diameter,\n };\n }\n\n const contactSalesFormSchema = getContactSalesFormSchema(t);\n\n return (\n <>\n \n\n \n \n \n\n \n
\n
\n We are here to help you.\n\n

\n \n Our sales team will gladly assist you with any questions. Send us a message and\n we will get back to you shortly.\n \n

\n
\n
\n \n
\n
\n \n \n \n \n );\n};\n\n\n/*\n * Exports\n */\nexport default AboutContactSalesPage;\n"],"sourceRoot":""}