{"version":3,"sources":["webpack:///./src/pages/request-demo.en.js","webpack:///./src/components/Pages/RequestDemo/styled.js","webpack:///./src/components/Pages/RequestDemo/helpers.js","webpack:///./src/components/Pages/RequestDemo/index.js"],"names":["RequestDemoComponent","data","rest","translatedData","useTranslated","pageContext","path","location","pathname","lng","langKey","hasContainer","minimalHeader","minimalFooter","metatags","strapiRequestDemo","href","ContentContainer","styled","div","FormContainer","RichText","getText","values","firstName","lastName","businessEmail","companyName","phoneNumber","country","interest","trim","initialValues","RequestDemo","html","useState","isLoading","setIsLoading","errors","setErrors","setValues","successFormSubmission","setSuccessFormSubmission","errorFormSubmission","setErrorFormSubmission","handleOnChange","name","value","prevValues","event","a","preventDefault","validateRequestDemoForm","foundErrors","isValid","postSlackMessage","error","Container","narrow","gutter","xs","md","marginBottom","title","description","dangerouslySetInnerHTML","__html","marked","split","join","onSubmit","sm","FormInput","label","form","id","placeholder","onChange","LastName","BusinessEmail","type","options","TextArea","Message","text","success_message","Button","width","submitButton","error_message","height","style","display","alt","src","border"],"mappings":"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","file":"component---src-pages-request-demo-en-js-3b3456241cbd9f061a30.js","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { graphql } from 'gatsby';\r\n\r\n// components\r\nimport Layout from '../components/Layout';\r\nimport RequestDemo from '../components/Pages/RequestDemo';\r\n\r\n// hooks\r\nimport useTranslated from '../hooks/useTranslated';\r\n\r\nconst RequestDemoComponent = ({ data, ...rest }) => {\r\n    const { translatedData } = useTranslated(data, rest.pageContext);\r\n\r\n    return (\r\n        <Layout\r\n            path={rest.location.pathname}\r\n            lng={rest.pageContext.langKey}\r\n            hasContainer={false}\r\n            minimalHeader\r\n            minimalFooter\r\n            metatags={translatedData.strapiRequestDemo.metatags}\r\n            href=\"/request-demo/\"\r\n        >\r\n            <RequestDemo data={translatedData.strapiRequestDemo} lng={rest.pageContext.langKey} />\r\n        </Layout>\r\n    );\r\n};\r\n\r\nRequestDemoComponent.propTypes = {\r\n    data: PropTypes.shape({\r\n        strapiRequestDemo: PropTypes.shape({}).isRequired,\r\n    }).isRequired,\r\n};\r\n\r\nexport default RequestDemoComponent;\r\n\r\nexport const query = graphql`\r\n    query RequestDemoEN {\r\n        strapiRequestDemo {\r\n            metatags {\r\n                description_de\r\n                description_en\r\n                title_de\r\n                title_en\r\n            }\r\n            form {\r\n                BusinessEmail {\r\n                    label_en\r\n                    placeholder_en\r\n                }\r\n                LastName {\r\n                    placeholder_en\r\n                    label_en\r\n                }\r\n                companyName {\r\n                    placeholder_en\r\n                    label_en\r\n                }\r\n                country {\r\n                    placeholder_en\r\n                    label_en\r\n                    values {\r\n                        label_en\r\n                        value\r\n                    }\r\n                }\r\n                firstName {\r\n                    placeholder_en\r\n                    label_en\r\n                }\r\n                interest {\r\n                    placeholder_en\r\n                    label_en\r\n                }\r\n                phoneNumber {\r\n                    placeholder_en\r\n                    label_en\r\n                }\r\n                submitButton {\r\n                    label_en\r\n                }\r\n                success_message_en\r\n                success_message_de\r\n                error_message_en\r\n                error_message_de\r\n            }\r\n            description_en\r\n            title_en\r\n        }\r\n    }\r\n`;\r\n","import styled from 'styled-components';\r\n\r\nexport const ContentContainer = styled.div`\r\n    margin: 80px 0;\r\n    min-height: calc(100vh - 276px);\r\n\r\n    @media all and (max-width: 991px) {\r\n        margin: 3em 0;\r\n    }\r\n`;\r\n\r\nexport const FormContainer = styled.div`\r\n    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);\r\n    border-radius: 10px;\r\n    padding: 24px 16px;\r\n`;\r\n\r\nexport const RichText = styled.div`\r\n    line-height: 32px;\r\n    font-size: 1.0625rem;\r\n\r\n    @media all and (max-width: 768px) {\r\n        font-size: 0.875rem;\r\n        line-height: 24px;\r\n    }\r\n\r\n    ul {\r\n        margin-top: 24px;\r\n        margin-bottom: 24px;\r\n    }\r\n\r\n    li {\r\n        margin-left: 48px;\r\n        line-height: 32px;\r\n    }\r\n\r\n    span {\r\n        width: 24px;\r\n        height: 24px;\r\n        border-radius: 50%;\r\n        position: absolute;\r\n\r\n        &::before,\r\n        &::after {\r\n            content: '';\r\n            position: absolute;\r\n            background-color: #39d6bc;\r\n            width: 2px;\r\n        }\r\n\r\n        &::before {\r\n            top: 5px;\r\n            left: 15px;\r\n            height: 20px;\r\n            transform: rotate(45deg);\r\n        }\r\n        &::after {\r\n            top: 13px;\r\n            left: 5px;\r\n            height: 10px;\r\n            transform: rotate(-45deg);\r\n        }\r\n    }\r\n`;\r\n","export function formatList(html) {\r\n    return html.split('<li>').join('<span></span><li>');\r\n}\r\n\r\nexport function getText(values) {\r\n    return `\r\n*New demo request:*\r\n\r\nFirst name: *${values.firstName}*\r\nLast name: *${values.lastName}*\r\nBusiness email: *${values.businessEmail}*\r\nCompany name: *${values.companyName}*\r\nPhone number: *${values.phoneNumber}*\r\nCountry: *${values.country}*\r\n${values.interest.trim() ? `Interest: *${values.interest}*` : ''}\r\n    `;\r\n}\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport marked from 'marked';\r\nimport { Col, Row } from 'react-simple-flex-grid';\r\n\r\nimport Message from '../../global/Message';\r\nimport Container from '../../global/Container';\r\nimport FormInput from '../../global/FormInput';\r\nimport TextArea from '../../global/TextArea';\r\nimport { ContentContainer, FormContainer, RichText } from './styled';\r\nimport { Heading1 } from '../../global/Typography';\r\n\r\nimport { formatList, getText } from './helpers';\r\nimport Button from '../../global/Button';\r\nimport { validateRequestDemoForm } from '../../../utils/validators';\r\nimport { postSlackMessage } from '../../../utils/slack';\r\n\r\nconst initialValues = {\r\n    firstName: '',\r\n    lastName: '',\r\n    businessEmail: '',\r\n    companyName: '',\r\n    phoneNumber: '',\r\n    country: '',\r\n    interest: '',\r\n};\r\n\r\nconst RequestDemo = ({ data }) => {\r\n    const [isLoading, setIsLoading] = useState(false);\r\n    const [errors, setErrors] = useState({});\r\n    const [values, setValues] = useState(initialValues);\r\n    const [successFormSubmission, setSuccessFormSubmission] = useState(false);\r\n    const [errorFormSubmission, setErrorFormSubmission] = useState(false);\r\n\r\n    function handleOnChange(name, value) {\r\n        setValues(prevValues => ({ ...prevValues, [name]: value }));\r\n    }\r\n\r\n    async function handleRequestDemo(event) {\r\n        event.preventDefault();\r\n        const { errors: foundErrors, isValid } = validateRequestDemoForm(values);\r\n\r\n        setErrors(foundErrors);\r\n\r\n        if (isValid) {\r\n            setIsLoading(true);\r\n\r\n            const { error } = await postSlackMessage(getText(values));\r\n\r\n            if (!error) {\r\n                setIsLoading(false);\r\n                setSuccessFormSubmission(true);\r\n                setValues(initialValues);\r\n            } else {\r\n                setIsLoading(false);\r\n                setErrorFormSubmission(true);\r\n            }\r\n        }\r\n    }\r\n\r\n    return (\r\n        <Container narrow>\r\n            <ContentContainer>\r\n                <Row gutter={24}>\r\n                    <Col xs={12} md={6}>\r\n                        <Heading1 marginBottom=\"24px\">{data.title}</Heading1>\r\n                        {data.description ? (\r\n                            <RichText\r\n                                dangerouslySetInnerHTML={{\r\n                                    __html: formatList(marked(data.description)),\r\n                                }}\r\n                            />\r\n                        ) : null}\r\n                    </Col>\r\n                    <Col xs={12} md={6}>\r\n                        <FormContainer>\r\n                            <form onSubmit={handleRequestDemo}>\r\n                                <Row gutter={24}>\r\n                                    <Col xs={12} sm={6}>\r\n                                        <FormInput\r\n                                            label={data.form.firstName.label}\r\n                                            id=\"first-name\"\r\n                                            name=\"firstName\"\r\n                                            placeholder={data.form.firstName.placeholder}\r\n                                            onChange={handleOnChange}\r\n                                            error={errors.firstName}\r\n                                            value={values.firstName}\r\n                                        />\r\n                                    </Col>\r\n                                    <Col xs={12} sm={6}>\r\n                                        <FormInput\r\n                                            label={data.form.LastName.label}\r\n                                            id=\"last-name\"\r\n                                            name=\"lastName\"\r\n                                            placeholder={data.form.LastName.placeholder}\r\n                                            onChange={handleOnChange}\r\n                                            error={errors.lastName}\r\n                                            value={values.lastName}\r\n                                        />\r\n                                    </Col>\r\n                                </Row>\r\n                                <FormInput\r\n                                    label={data.form.BusinessEmail.label}\r\n                                    id=\"business-email\"\r\n                                    name=\"businessEmail\"\r\n                                    placeholder={data.form.BusinessEmail.placeholder}\r\n                                    onChange={handleOnChange}\r\n                                    error={errors.businessEmail}\r\n                                    value={values.businessEmail}\r\n                                />\r\n                                <FormInput\r\n                                    label={data.form.companyName.label}\r\n                                    id=\"company-name\"\r\n                                    name=\"companyName\"\r\n                                    placeholder={data.form.companyName.placeholder}\r\n                                    onChange={handleOnChange}\r\n                                    error={errors.companyName}\r\n                                    value={values.companyName}\r\n                                />\r\n                                <FormInput\r\n                                    label={data.form.phoneNumber.label}\r\n                                    id=\"phone-number\"\r\n                                    name=\"phoneNumber\"\r\n                                    placeholder={data.form.phoneNumber.placeholder}\r\n                                    onChange={handleOnChange}\r\n                                    value={values.phoneNumber}\r\n                                    error={errors.phoneNumber}\r\n                                    type=\"number\"\r\n                                />\r\n                                <FormInput\r\n                                    label={data.form.country.label}\r\n                                    placeholder={data.form.country.placeholder}\r\n                                    value={values.country}\r\n                                    name=\"country\"\r\n                                    id=\"country\"\r\n                                    options={data.form.country.values}\r\n                                    error={errors.country}\r\n                                    onChange={handleOnChange}\r\n                                    type=\"text\"\r\n                                />\r\n                                <TextArea\r\n                                    label={data.form.interest.label}\r\n                                    id=\"interest\"\r\n                                    name=\"interest\"\r\n                                    placeholder={data.form.interest.placeholder}\r\n                                    onChange={handleOnChange}\r\n                                    error={errors.interest}\r\n                                    value={values.interest}\r\n                                />\r\n                                {/* If form submission is success do not show button anymore but the message */}\r\n                                {successFormSubmission ? (\r\n                                    <Message type=\"success\" text={data.form.success_message} />\r\n                                ) : (\r\n                                    <Button\r\n                                        width=\"100%\"\r\n                                        type=\"submit\"\r\n                                        isLoading={isLoading}\r\n                                        label={data.form.submitButton.label}\r\n                                    />\r\n                                )}\r\n\r\n                                {/* Show error message if submission failed */}\r\n                                {errorFormSubmission && (\r\n                                    <Message type=\"error\" text={data.form.error_message} />\r\n                                )}\r\n\r\n                                {/* Linkedin tracking after successful form submit */}\r\n                                {successFormSubmission && (\r\n                                    <img\r\n                                        height=\"1\"\r\n                                        width=\"1\"\r\n                                        style={{ display: 'none' }}\r\n                                        alt=\"linkedin pixel\"\r\n                                        src=\"https://px.ads.linkedin.com/collect/?pid=3280945&conversionId=4192497&fmt=gif\"\r\n                                    />\r\n                                )}\r\n                            </form>\r\n                        </FormContainer>\r\n                    </Col>\r\n                </Row>\r\n            </ContentContainer>\r\n            <iframe\r\n                name=\"hiddenFrame\"\r\n                title=\"hiddenFrame\"\r\n                width=\"0\"\r\n                height=\"0\"\r\n                border=\"0\"\r\n                style={{ display: 'none' }}\r\n            />\r\n        </Container>\r\n    );\r\n};\r\n\r\nRequestDemo.propTypes = {\r\n    data: PropTypes.shape({\r\n        description: PropTypes.string.isRequired,\r\n        title: PropTypes.string.isRequired,\r\n        form: PropTypes.shape({\r\n            success_message: PropTypes.string,\r\n            error_message: PropTypes.string,\r\n            firstName: PropTypes.shape({\r\n                label: PropTypes.string.isRequired,\r\n                placeholder: PropTypes.string,\r\n            }).isRequired,\r\n            LastName: PropTypes.shape({\r\n                label: PropTypes.string.isRequired,\r\n                placeholder: PropTypes.string,\r\n            }).isRequired,\r\n            BusinessEmail: PropTypes.shape({\r\n                label: PropTypes.string.isRequired,\r\n                placeholder: PropTypes.string,\r\n            }).isRequired,\r\n            companyName: PropTypes.shape({\r\n                label: PropTypes.string.isRequired,\r\n                placeholder: PropTypes.string,\r\n            }).isRequired,\r\n            phoneNumber: PropTypes.shape({\r\n                label: PropTypes.string.isRequired,\r\n                placeholder: PropTypes.string,\r\n            }).isRequired,\r\n            country: PropTypes.shape({\r\n                values: PropTypes.arrayOf(\r\n                    PropTypes.shape({\r\n                        value: PropTypes.string.isRequired,\r\n                        label: PropTypes.string.isRequired,\r\n                    })\r\n                ).isRequired,\r\n                label: PropTypes.string.isRequired,\r\n                placeholder: PropTypes.string,\r\n            }).isRequired,\r\n            interest: PropTypes.shape({\r\n                label: PropTypes.string.isRequired,\r\n                placeholder: PropTypes.string,\r\n            }).isRequired,\r\n            submitButton: PropTypes.shape({\r\n                label: PropTypes.string.isRequired,\r\n            }).isRequired,\r\n        }).isRequired,\r\n    }).isRequired,\r\n};\r\n\r\nexport default RequestDemo;\r\n"],"sourceRoot":""}