{"version":3,"file":"component---src-pages-support-tsx-bf4f9e5b4432e1eb3a9e.js","mappings":"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","sources":["webpack://marketing/./src/components/Banner.tsx","webpack://marketing/./src/pages/support.tsx"],"sourcesContent":["import React, { FC } from \"react\"\r\nimport BackgroundImage from \"gatsby-background-image\"\r\nimport useMediaQuery from \"@material-ui/core/useMediaQuery\"\r\nimport {makeStyles} from \"@material-ui/styles\";\r\nimport NuliaLogo from \"./icons/NuliaLogo\";\r\nimport {Theme, useTheme} from \"@material-ui/core\";\r\nimport {FluidObject} from \"gatsby-image\";\r\n\r\nconst useStyles = makeStyles((theme: Theme) => ({\r\n    banner: {\r\n        backgroundColor: \"#6d57a8\",\r\n        width: \"100%\",\r\n        height: 351\r\n    },\r\n    bannerContent: {\r\n        height: \"100%\",\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        justifyContent: \"center\",\r\n        alignItems: \"center\",\r\n        color: \"#fff\"\r\n    },\r\n    bannerTitle: {\r\n        fontFamily: \"Ubuntu\",\r\n        fontStyle: \"normal\",\r\n        fontWeight: \"normal\",\r\n        fontSize: 48,\r\n        lineHeight: \"96px\",\r\n        margin: 0,\r\n        [theme.breakpoints.down('md')]: {\r\n            fontSize: 32,\r\n            lineHeight: \"48px\"\r\n        }\r\n    },\r\n    bannerSubtitle: {\r\n        fontFamily: \"Ubuntu\",\r\n        fontStyle: \"normal\",\r\n        fontWeight: \"normal\",\r\n        fontSize: 20,\r\n        letterSpacing: 0.25,\r\n        lineHeight: \"24px\",\r\n        margin: 0,\r\n        [theme.breakpoints.down('md')]: {\r\n            fontSize: 20,\r\n            lineHeight: \"24px\"\r\n        }\r\n    }\r\n}))\r\n\r\ninterface IProps {\r\n    desktopImage: FluidObject\r\n    mobileImage: FluidObject\r\n    alt: string\r\n}\r\nconst Banner: FC<IProps> = ({ desktopImage, mobileImage, alt }) => {\r\n    const theme = useTheme()\r\n    const classes = useStyles(theme)\r\n    const isMobile = useMediaQuery(\"(max-width:959px)\")\r\n\r\n    return (\r\n        <div className={classes.banner}>\r\n            <BackgroundImage\r\n                Tag=\"div\"\r\n                fluid={isMobile ? mobileImage : desktopImage}\r\n                alt={alt}\r\n                durationFadeIn={250}\r\n                style={{\r\n                    height: \"100%\",\r\n                    backgroundPosition: \"top center\",\r\n                    backgroundRepeat: \"none\",\r\n                    backgroundSize: \"cover\",\r\n                    position: \"relative\"\r\n                }}\r\n            >\r\n                <div className={classes.bannerContent}>\r\n                    <NuliaLogo />\r\n                    <h4 className={classes.bannerTitle}>Welcome to Nulia</h4>\r\n                    <h5 className={classes.bannerSubtitle}>The world that works</h5>\r\n                </div>\r\n            </BackgroundImage>\r\n        </div>\r\n    )\r\n}\r\n\r\nexport default Banner\r\n","import React, { useState, FC } from \"react\"\r\nimport { useStaticQuery, graphql } from \"gatsby\"\r\nimport Layout from \"../components/Layout\"\r\nimport SEO from \"../components/SEO\"\r\nimport PurpleAccentHero from \"../components/PurpleAccentHero\"\r\nimport Banner from \"../components/Banner\"\r\nimport Button from \"../components/Button\"\r\nimport { TextField } from \"@material-ui/core\"\r\nimport { API_URL } from \"../utils/constants\"\r\nimport axios from \"axios\"\r\nimport CookiesSnackbar from \"../components/CookiesSnackbar\"\r\nimport {makeStyles} from \"@material-ui/styles\";\r\nimport DiscoverMoreBanner from \"../components/DiscoverMoreBanner\"\r\n\r\nconst useStyles = makeStyles({\r\n    titleHeadingGradientWrapper: {\r\n        width: \"100%\",\r\n        height: \"100%\",\r\n        background: \"linear-gradient(110.11deg, #FFFFFF 38%, rgba(255, 255, 255, 0) 67.89%)\",\r\n        \"@media(max-width: 959px)\": {\r\n            background: \"rgba(255, 255, 255, 0) 67.89%)\"\r\n        }\r\n    },\r\n    titleHeadingText: {\r\n        marginLeft: 100,\r\n        maxWidth: 360,\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        justifyContent: \"center\",\r\n        alignItems: \"flex-start\",\r\n        height: \"100%\",\r\n        color: \"rgba(0, 0, 0, 0.8)\",\r\n        letterSpacing: \"0.25px\",\r\n        \"@media (max-width: 959px)\": {\r\n            width: \"100%\",\r\n            maxWidth: \"100%\",\r\n            marginLeft: 0,\r\n            padding: 24\r\n        }\r\n    },\r\n    body: {\r\n        width: \"100%\",\r\n        display: \"flex\",\r\n        justifyContent: \"center\",\r\n        alignItems: \"center\",\r\n        marginBottom: 48,\r\n        padding: 24\r\n    },\r\n    bodyContent: {\r\n        width: 600\r\n    },\r\n    bodyTitle: {\r\n        fontFamily: \"Ubuntu\",\r\n        fontStyle: \"normal\",\r\n        fontWeight: 500,\r\n        fontSize: 32,\r\n        lineHeight: 4,\r\n        letterSpacing: 0.25,\r\n        marginBottom: \"16px !important\"\r\n    },\r\n    feedback: {\r\n        fontFamily: \"Ubuntu\",\r\n        fontStyle: \"normal\",\r\n        fontWeight: \"normal\",\r\n        fontSize: 24,\r\n        lineHeight: 1.25,\r\n        letterSpacing: 0.25,\r\n        marginBottom: \"16px !important\"\r\n    },\r\n    form: {\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        justifyContent: \"flex-start\",\r\n        alignItems: \"flex-start\"\r\n    }\r\n})\r\n\r\nconst RequestDemoPage: FC = () => {\r\n    const classes = useStyles()\r\n    const [name, setName] = useState(\"\")\r\n    const [nameError, setNameError] = useState(false)\r\n    const [email, setEmail] = useState(\"\")\r\n    const [emailError, setEmailError] = useState(false)\r\n    const [message, setMessage] = useState(\"\")\r\n    const [submitted, setSubmitted] = useState(false)\r\n\r\n    const data = useStaticQuery(graphql`\r\n        query {\r\n            desktopHeroImage: file(relativePath: { eq: \"demo/demo-hero-desktop.jpg\" }) {\r\n                childImageSharp {\r\n                    fluid(quality: 75, maxWidth: 2160) {\r\n                        ...GatsbyImageSharpFluid_withWebp\r\n                    }\r\n                }\r\n            }\r\n            mobileHeroImage: file(relativePath: { eq: \"demo/demo-hero-mobile.jpg\" }) {\r\n                childImageSharp {\r\n                    fluid(quality: 75, maxWidth: 960) {\r\n                        ...GatsbyImageSharpFluid_withWebp\r\n                    }\r\n                }\r\n            }\r\n            desktopBannerImage: file(relativePath: { eq: \"banner-desktop.png\" }) {\r\n                childImageSharp {\r\n                    fluid(quality: 75, maxWidth: 2160) {\r\n                        ...GatsbyImageSharpFluid_withWebp\r\n                    }\r\n                }\r\n            }\r\n            mobileBannerImage: file(relativePath: { eq: \"banner-mobile.jpg\" }) {\r\n                childImageSharp {\r\n                    fluid(quality: 75, maxWidth: 2160) {\r\n                        ...GatsbyImageSharpFluid_withWebp\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    `)\r\n\r\n    const nameChange = (event) => {\r\n        event.preventDefault()\r\n        setName(event.target.value)\r\n    }\r\n    const emailChange = (event) => {\r\n        event.preventDefault()\r\n        setEmail(event.target.value)\r\n    }\r\n    const messageChange = (event) => {\r\n        event.preventDefault()\r\n        setMessage(event.target.value)\r\n    }\r\n\r\n    const onSubmit = async (event) => {\r\n        event.preventDefault()\r\n        let error = false\r\n\r\n        if (!name) {\r\n            setNameError(true)\r\n            error = true\r\n        } else {\r\n            setNameError(false)\r\n        }\r\n        if (!email) {\r\n            setEmailError(true)\r\n            error = true\r\n        } else {\r\n            setEmailError(false)\r\n        }\r\n\r\n        const body = {\r\n            name,\r\n            email,\r\n            message\r\n        }\r\n        if (!error) {\r\n            await axios.post(`${API_URL}/SendContactEmail`, body)\r\n            setSubmitted(true)\r\n        }\r\n    }\r\n\r\n    return (\r\n        <Layout>\r\n            <SEO title=\"Support\" />\r\n            <DiscoverMoreBanner/>\r\n            <PurpleAccentHero\r\n                desktopImage={data.desktopHeroImage.childImageSharp.fluid}\r\n                mobileImage={data.mobileHeroImage.childImageSharp.fluid}\r\n                alt=\"Man smiling in front of his computer in an open office environment\"\r\n            >\r\n                <div className={classes.titleHeadingGradientWrapper}>\r\n                    <section className={classes.titleHeadingText}>\r\n                        <h1>Support</h1>\r\n                    </section>\r\n                </div>\r\n            </PurpleAccentHero>\r\n            <section className={classes.body}>\r\n                <div className={classes.bodyContent}>\r\n                    {!submitted ? (\r\n                        <form className={classes.form} noValidate autoComplete=\"off\">\r\n                            <TextField\r\n                                label=\"Name (Required)\"\r\n                                style={{ width: \"100%\", marginBottom: 38 }}\r\n                                value={name}\r\n                                error={nameError}\r\n                                onChange={nameChange}\r\n                                autoComplete=\"name\"\r\n                            />\r\n                            <TextField\r\n                                label=\"Email (Required)\"\r\n                                style={{ width: \"100%\", marginBottom: 38 }}\r\n                                value={email}\r\n                                error={emailError}\r\n                                onChange={emailChange}\r\n                                autoComplete=\"email\"\r\n                            />\r\n                            <TextField\r\n                                label=\"Anything else you need to tell us...\"\r\n                                multiline\r\n                                rows=\"4\"\r\n                                style={{ width: \"100%\", marginBottom: 38 }}\r\n                                value={message}\r\n                                onChange={messageChange}\r\n                            />\r\n                            <Button style={{ width: 224, height: 36 }} onClick={onSubmit}>\r\n                                Submit Request\r\n                            </Button>\r\n                        </form>\r\n                    ) : (\r\n                        <h3 className={classes.feedback}>Your support request has been received.</h3>\r\n                    )}\r\n                </div>\r\n            </section>\r\n            <section>\r\n                <Banner\r\n                    desktopImage={data.desktopBannerImage.childImageSharp.fluid}\r\n                    mobileImage={data.mobileBannerImage.childImageSharp.fluid}\r\n                    alt=\"People walking together in a crowd\"\r\n                />\r\n            </section>\r\n            <CookiesSnackbar />\r\n        </Layout>\r\n    )\r\n}\r\n\r\nexport default RequestDemoPage\r\n"],"names":["useStyles","makeStyles","theme","banner","backgroundColor","width","height","bannerContent","display","flexDirection","justifyContent","alignItems","color","bannerTitle","fontFamily","fontStyle","fontWeight","fontSize","lineHeight","margin","breakpoints","down","bannerSubtitle","letterSpacing","desktopImage","mobileImage","alt","useTheme","classes","isMobile","useMediaQuery","className","Tag","fluid","durationFadeIn","style","backgroundPosition","backgroundRepeat","backgroundSize","position","titleHeadingGradientWrapper","background","titleHeadingText","marginLeft","maxWidth","padding","body","marginBottom","bodyContent","bodyTitle","feedback","form","useState","name","setName","nameError","setNameError","email","setEmail","emailError","setEmailError","message","setMessage","submitted","setSubmitted","data","useStaticQuery","onSubmit","event","preventDefault","error","axios","API_URL","title","desktopHeroImage","childImageSharp","mobileHeroImage","noValidate","autoComplete","label","value","onChange","target","multiline","rows","onClick","desktopBannerImage","mobileBannerImage"],"sourceRoot":""}