{"version":3,"sources":["webpack://QuickSense/./src/pages/contact.js"],"names":["formValues","name","email","phone","message","formSchema","Yup","shape","required","min","requiredAsterix","className","ContactPage","props","state","showNotification","notificationMessage","booking","componentDidMount","window","location","href","includes","this","setState","sendEmail","values","SEGMENT_IDENTIFY","SEGMENT_EVENT","fetch","SLACK_ENDPOINT","method","body","JSON","stringify","SLACK_BOOKING_PAYLOAD","SLACK_PAYLOAD","catch","console","error","render","title","fluid","as","lg","initialValues","validationSchema","onSubmit","setSubmitting","resetForm","setTimeout","errors","touched","handleChange","handleBlur","isSubmitting","htmlFor","type","disabled","spellcheck","rows","onChange","onBlur","value","React"],"mappings":"2NAcMA,EAAa,CACfC,KAAM,GACNC,MAAO,GACPC,MAAO,GACPC,QAAS,IAGPC,EAAaC,OAAaC,MAAM,CAClCN,KAAMK,OACDE,SAAS,0CAEdN,MAAOI,OACFJ,MAAM,4CACNM,SAAS,oDAEdJ,QAASE,OACJG,IAAI,EAAG,6CACPD,SAAS,yDAGZE,EAAkB,gCAAMC,UAAU,oBAAhB,KAElBC,E,YACF,WAAYC,GAAO,IAAD,SACd,cAAMA,IAAN,MACKC,MAAQ,CACTC,kBAAkB,EAClBC,oBAAqB,GACrBC,SAAS,GALC,G,uCASlBC,kBAAA,WACIC,OAAOC,SAASC,KAAKC,SAAS,SAAWC,KAAKC,SAAS,CAAEP,SAAS,K,EAGtEQ,UAAA,SAAUC,IAKNC,QAAiBD,IACjBE,QAAcF,EAAQ,qBAEtBG,MAAMC,KAAgB,CAClBC,OAAQ,OACRC,KAAMT,KAAKT,MAAMG,QAAUgB,KAAKC,WAAUC,QAAsBT,IAAWO,KAAKC,WAAUE,QAAcV,MACzGW,MAAMC,QAAQC,Q,EAGrBC,OAAA,WAAS,IAAD,OACJ,OAAO,gDACH,wBAAC,IAAD,CAAKC,MAAM,YACX,wBAAC,IAAD,KACI,wBAAC,IAAD,CAAW9B,UAAU,qBAAqB+B,OAAK,GAC3C,wBAAC,IAAD,KACI,wBAAC,IAAD,CAAK/B,UAAU,gBACX,wBAAC,IAAD,CAAKgC,GAAG,UAAUC,GAAI,IAClB,8BAAIjC,UAAU,iCAAiCY,KAAKT,MAAMG,QAAU,oBAAsB,iBAErFM,KAAKT,MAAMG,SAAW,6BAAGN,UAAU,iCAAb,gFAK/B,wBAAC,IAAD,CAAKiC,GAAI,GAAIjC,UAAU,cACnB,mCAASA,UAAU,8BACbY,KAAKT,MAAMG,SAAW,8BAAIN,UAAU,eAAd,kBAEpBY,KAAKT,MAAMG,QAAU,gDACjB,6BAAGN,UAAU,eAAb,sDACA,6BAAGA,UAAU,eAAb,6EAGA,6BAAGA,UAAU,eAAb,qCAER,wBAAC,KAAD,CAAQkC,cAAe7C,EAAY8C,iBAAkBzC,EAAY0C,SAAU,SAACrB,EAAD,GAA2C,IAAhCsB,EAA+B,EAA/BA,cAAeC,EAAgB,EAAhBA,UACjGC,YAAW,WACP,EAAKzB,UAAUC,GACfsB,GAAc,GACdC,MACD,QAGF,gBAAGvB,EAAH,EAAGA,OAAOyB,EAAV,EAAUA,OAAOC,EAAjB,EAAiBA,QAAQC,EAAzB,EAAyBA,aAAaC,EAAtC,EAAsCA,WAAYC,EAAlD,EAAkDA,aAAlD,OACG,wBAAC,KAAD,CAAM5C,UAAU,UACZ,+BAAKA,UAAU,cACX,iCAAO6C,QAAQ,QAAQ9C,EAAvB,aACA,wBAAC,KAAD,CAAOC,UAAS,iBAAmBwC,EAAOlD,MAAQmD,EAAQnD,KAAO,aAAe,IAAhE,MAAuEkD,EAAOlD,MAAQmD,EAAQnD,KAAO,WAAa,IAAOwD,KAAK,OAAOxD,KAAK,OAAOyD,SAAUH,IAC1KJ,EAAOlD,MAAQmD,EAAQnD,MAAS,iCAAOU,UAAU,yBAAyBwC,EAAOlD,OAEtF,+BAAKU,UAAU,cACX,iCAAO6C,QAAQ,SAAS9C,EAAxB,SACA,wBAAC,KAAD,CAAOC,UAAS,iBAAmBwC,EAAOjD,OAASkD,EAAQlD,MAAQ,aAAe,IAAlE,MAAyEiD,EAAOjD,OAASkD,EAAQlD,MAAQ,WAAa,IAAMuD,KAAK,QAAQxD,KAAK,QAAQyD,SAAUH,IAC/KJ,EAAOjD,OAASkD,EAAQlD,OAAU,iCAAOS,UAAU,yBAAyBwC,EAAOjD,QAExF,mCACI,iCAAOsD,QAAQ,WAAW9C,EAA1B,WACA,wBAAC,KAAD,CAAOT,KAAK,UAAU0C,GAAG,WAAWgB,YAAY,EAAMC,KAAM,EAAGF,SAAUH,EAAc5C,UAAU,eAAckD,SAAUR,EAAcS,OAAQR,EAAYS,MAAOrC,EAAOtB,UACvK+C,EAAO/C,SAAWgD,EAAQhD,SAAW,iCAAOO,UAAU,yBAAyBwC,EAAO/C,UAE5F,mCACA,kCAAQO,UAAU,4BAA4B8C,KAAK,SAASC,SAAUH,GACjE,EAAKzC,MAAMG,QAAU,cAAgB,oBAOlDM,KAAKT,MAAMC,kBACX,+BAAKJ,UAAU,uCACX,6BAAGA,UAAU,OAAM,qCAAQY,KAAKT,MAAME,+B,GA1FxDgD,qBAuG1B","file":"component---src-pages-contact-js-235ce3d84e4ac752cd85.js","sourcesContent":["import React from 'react'\nimport { Formik, Form, Field } from 'formik'\nimport * as Yup from 'yup'\n\n// components\nimport Container from 'react-bootstrap/Container'\nimport Layout from '../components/Layout/layout'\nimport Row from 'react-bootstrap/Row'\nimport Col from 'react-bootstrap/Col'\nimport SEO from '../components/SEO/seo'\n\n// utils\nimport {SLACK_ENDPOINT, SLACK_PAYLOAD, SLACK_BOOKING_PAYLOAD,  SEGMENT_IDENTIFY, SEGMENT_EVENT} from '../utils/constants'\n\nconst formValues = {\n    name: '',\n    email: '',\n    phone: '',\n    message: ''\n}\n\nconst formSchema = Yup.object().shape({\n    name: Yup.string()\n        .required('Enter your name so we know who you are'),\n  \n    email: Yup.string()\n        .email('Check your email address. Did you add @?')\n        .required('Enter your email so we can get in touch with you'),\n\n    message: Yup.string()\n        .min(2, 'Enter a message, so we know what you want')\n        .required('Let us know what you\\'re wanting to contact us about')\n})\n\nconst requiredAsterix = <span className='text-danger pr-1'>*</span>\n\nclass ContactPage extends React.Component {\n    constructor(props){\n        super(props)\n        this.state = {\n            showNotification: false,\n            notificationMessage: '',\n            booking: false\n        }\n    }\n\n    componentDidMount(){\n        window.location.href.includes('book') && this.setState({ booking: true })\n    }\n\n    sendEmail(values){\n        /** SLACK WEBHOOKS: https://stackoverflow.com/questions/45752537/slack-incoming-webhook-request-header-field-content-type-is-not-allowed-by-acce **/\n        /** Tldr: Make sure there's no header as it breaks via JS. Alternatives is using header: application/x-www-form-urlencoded **/\n        /** Slack payload will break unless it is wrapped within another object **/\n\n        SEGMENT_IDENTIFY(values)\n        SEGMENT_EVENT(values, 'contact_form_sent')\n\n        fetch(SLACK_ENDPOINT, {\n            method: 'POST',\n            body: this.state.booking ? JSON.stringify(SLACK_BOOKING_PAYLOAD(values)) : JSON.stringify(SLACK_PAYLOAD(values))\n        }).catch(console.error)\n    }\n\n    render(){\n        return <>\n            <SEO title='Contact' />\n            <Layout>\n                <Container className='bg-white mb-0 py-5' fluid>\n                    <Container>\n                        <Row className='d-flex pt-5 '>\n                            <Col as='section' lg={12}>\n                                <h1 className='text-center d-none d-sm-block'>{this.state.booking ? 'Book a video call' : 'Get in touch'}</h1>\n                                {\n                                    !this.state.booking && <p className='text-center d-none d-sm-block'>\n                                    Whether you&apos;re just starting or done all your research, we&apos;re here to help.\n                                    </p>\n                                }\n                            </Col>\n                            <Col lg={12} className='p-0 p-sm-3'>\n                                <section className='bg-light-pink p-3 rounded'>\n                                    {!this.state.booking && <h2 className='text-center'>Ask a question</h2>}\n                                    {\n                                        this.state.booking ? <>\n                                            <p className='text-center'>Have questions on how QuickSense helps your child?</p>\n                                            <p className='text-center'>Leave your details below and {`we'll`} get back to you within 24 hours</p>\n\n                                        </>:\n                                            <p className='text-center'>We normally reply within 24 hours</p>\n                                    }\n                                    <Formik initialValues={formValues} validationSchema={formSchema} onSubmit={(values, { setSubmitting, resetForm }) => {\n                                        setTimeout(() => {\n                                            this.sendEmail(values)\n                                            setSubmitting(false)\n                                            resetForm()\n                                        }, 400)\n                                    }}\n                                    >\n                                        {({ values,errors,touched,handleChange,handleBlur, isSubmitting }) => (\n                                            <Form className='col-12'>\n                                                <div className='form-group'>\n                                                    <label htmlFor='name'>{requiredAsterix}Your name</label>\n                                                    <Field className={`form-control ${ errors.name && touched.name ? 'is-invalid' : ''} ${!errors.name && touched.name ? 'is-valid' : ''}`}  type='text' name='name' disabled={isSubmitting}/>\n                                                    {errors.name && touched.name && (<small className='form-text text-danger'>{errors.name}</small>)}\n                                                </div>\n                                                <div className='form-group'>\n                                                    <label htmlFor='email'>{requiredAsterix}Email</label>\n                                                    <Field className={`form-control ${ errors.email && touched.email ? 'is-invalid' : ''} ${!errors.email && touched.email ? 'is-valid' : ''}`} type='email' name='email' disabled={isSubmitting}/>\n                                                    {errors.email && touched.email && (<small className='form-text text-danger'>{errors.email}</small>)}\n                                                </div>\n                                                <div>\n                                                    <label htmlFor='message'>{requiredAsterix}Message</label>\n                                                    <Field name='message' as='textarea' spellcheck={true} rows={4} disabled={isSubmitting} className='form-control'onChange={handleChange} onBlur={handleBlur} value={values.message} />\n                                                    { errors.message && touched.message && <small className='form-text text-danger'>{errors.message}</small>}\n                                                </div>\n                                                <hr />\n                                                <button className='btn btn-primary mb-3 px-5' type='submit' disabled={isSubmitting}>\n                                                    {this.state.booking ? 'Book a call' : 'Send message'}\n                                                </button>\n                                            </Form>\n                                        )}   \n\n                                    </Formik>\n                                    {\n                                        this.state.showNotification &&\n                                        <div className='shadow-2 py-2 px-3 rounded bg-white'>\n                                            <p className='m-0'><small>{this.state.notificationMessage}</small></p> \n                                        </div> \n                                    }\n                                </section>\n                            </Col>\n                        </Row>\n                    </Container>\n                </Container>\n            </Layout>\n        </>\n    }\n}\n\nexport default ContactPage\n"],"sourceRoot":""}