{"version":3,"sources":["webpack:///./src/pages/academy.js"],"names":["AcademyPage","render","metaData","get","this","props","allModule","allAudience","HeroSection","AudienceSection","data","ModuleSection","FormSection","React","Component","className","to","src","alt","width","height","map","index","node","key","fontAwesomeIcon","title","description","childMarkdownRemark","rawMarkdownBody","icon","file","url","state","messageSent","contactSchema","Yup","shape","name","min","max","required","matches","email","companyName","phoneNumber","positive","id","initialValues","cc","validationSchema","onSubmit","values","resetForm","axios","method","then","response","statusCode","setState","prevState","catch","error","console","log","errors","touched","type","pageQuery"],"mappings":"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","file":"component---src-pages-academy-js-2326d1efa9e761c194b0.js","sourcesContent":["import React from 'react'\nimport { graphql, Link } from 'gatsby'\nimport get from 'lodash/get'\nimport { Formik, Form, Field} from 'formik'\nimport * as Yup from 'yup'\nimport axios from 'axios'\nimport SiteMeta from '../components/meta-data'\nimport Footer from '../components/footer'\n\n\n\nclass AcademyPage extends React.Component {\n    \n    render() {\n        const metaData = get(this.props, 'data.site.siteMetadata.academyPage')\n        const allModule = get(this.props, 'data.allContentfulModule.edges')\n        const allAudience = get(this.props, 'data.allContentfulAcademyAudience.edges')\n        return(\n            <div>\n                <SiteMeta metaData={metaData}/>\n                <HeroSection/>            \n                <AudienceSection data={allAudience}/>\n                <ModuleSection data={allModule}/>\n                <FormSection/>\n                <Footer/>\n            </div>    \n        )\n    }\n\n}\n\n\nclass HeroSection extends React.Component {\n\n    render() {\n        const title = \"Data driven digital marketing academy for Chinese market\"\n        return(\n            <section className=\"hero hero-academy is-fullheight is-bold\">\n                <div className=\"hero-head\">\n                    <nav className=\"navbar is-transparent\">\n                        <div className=\"container\">\n                            <div className=\"navbar-brand\">\n                                <Link to = \"/academy\">\n                                    <img src=\"/img/academy-logo.jpg\" alt=\"academy logo\" width=\"85\" height=\"85\"/>\n                                </Link>\n                            </div>\n                        </div>\n                    </nav>\n                </div>    \n                <div className=\"hero-body\">\n                    <div className=\"container\">\n                        <div className=\"columns is-vcentered\">\n                            <div className=\"column is-half\">\n                                <h1 className=\"title has-text-white has-text-left-desktop is-capitalized \n                                has-text-centered is-size-1 is-size-3-mobile\">\n                                    {title}\n                                </h1>\n                                <div className=\"has-text-left-desktop has-text-centered\">\n                                    <Link to = \"/academy#form\" className=\"button is-danger is-medium is-capitalized\">\n                                        Request for interest    \n                                    </Link> \n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </section>\n        )\n    }\n}\n\nclass AudienceSection extends React.Component {\n    \n    render() {\n        \n        const title = \"who is this academy for?\"\n        const {data} = this.props\n        return(\n            <section className=\"section audience\">\n                <div className=\"container\">\n                    <h1 className=\"title is-capitalized has-text-centered is-size-1 \n                    is-size-3-mobile has-text-weight-bold\">\n                        {title}\n                    </h1>    \n                    <hr className=\"has-background-danger divider\"/>\n                    <div className=\"columns\">\n                        {\n                            data.map(({node}, index) => {\n                                return(\n                                    <div className=\"column\" key={index}>\n                                        <div className=\"box has-text-centered has-background-light equal-height\">\n                                            <span className=\"fa-stack fa-4x has-text-danger\">\n                                                <i className=\"fas fa-circle fa-stack-2x\"/>\n                                                <i className={`fas ${node.fontAwesomeIcon} fa-stack-1x fa-inverse`}/>\n                                            </span>\n                                            <h2 className=\"has-text-black has-text-weight-medium is-size-3 is-capitalized\">{node.title}</h2>\n                                            <h3 className=\"is-size-4\">{node.description.childMarkdownRemark.rawMarkdownBody}</h3>\n                                        </div>\n                                    </div>    \n                                )\n                            })\n                        }\n\n                    </div>\n                </div>\n            </section>\n        )\n    }\n}\n\nclass ModuleSection extends React.Component {\n    \n    render(){\n\n        const title = \"What does the academy include?\"\n        const {data} = this.props\n        return(\n            <section className=\"section module\">\n                <div className=\"container\">\n                    <h1 className=\"title is-capitalized has-text-white has-text-centered is-size-1 \n                    is-size-3-mobile has-text-weight-bold\">\n                        {title}\n                    </h1>    \n                    <hr className=\"has-background-danger divider\"/>\n                    <div className=\"columns is-multiline\">\n                        {\n                            data.map(({node}, index)=>{\n                                return(\n                                    <div className=\"column is-one-third\" key={index}>\n                                        <div className=\"card equal-height\">\n                                            <div className=\"card-image\">\n                                                <figure className=\"image is-4by3\">\n                                                    <img src={`${node.icon.file.url}`} alt={`${node.title}`}/>\n                                                </figure>\n                                            </div>\n                                            <div className=\"card-content\">\n                                                <div className=\"content\">\n                                                    <h2 className=\"has-text-black has-text-weight-medium is-size-3 is-capitalized\">{node.title}</h2>\n                                                    <p className=\"is-size-4\">{node.description.childMarkdownRemark.rawMarkdownBody}</p>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                )\n                            })\n                        }\n                    </div>\n                </div>\n            </section>\n        )\n    }\n}\n\nclass FormSection extends React.Component {\n\n    constructor(props) {\n\t\tsuper(props)\n\t\tthis.state = {\n\t\t\tmessageSent: false\n\t\t}\n\t\tthis.contactSchema = Yup.object().shape({\n\t\t\tname: Yup.string().min(2, 'Too Short!').max(50, 'Too Long!').required('Required').matches(/[^0-9]/,'Numbers in the name?'),\n\t\t\temail: Yup.string().email('invalid email').required('Required!'),\n\t\t\tcompanyName: Yup.string().min(2, 'Too short!').required('Required!'),\n\t\t\tphoneNumber: Yup.number().required('Required').positive()\n\t\t})\n\t}\n\n    render(){\n\n        const title = \"get your training brochure\"\n        return(\n            <section id = \"form\" className=\"section request-form has-background-light\">\n                <div className=\"container\">\n                    <h1 className=\"title is-capitalized  has-text-centered is-size-1 \n                    is-size-3-mobile has-text-weight-bold\">\n                        {title}\n                    </h1>\n                    <hr className=\"has-background-danger divider\"/>\n                    <div className=\"columns\">\n                        <div className=\"column is-6\">\n                            <figure className=\"image\">\n                                <img src=\"/img/academy-brochure.jpg\" alt=\"red digial china academy brouchure\"/>\n                            </figure>\n                        </div>\n                        <div className=\"column is-6\">\n                            <Formik \n                                initialValues={{\n                                    to:'sarahyam%40reddigitalchina.com',\n                                    cc:'sunqqxp%40gmail.com',\n                                    title:'Training Brouchure Request',\n                                    name:'',\n                                    email:'',\n                                    companyName:'',\n                                    phoneNumber:'',\n                                }}\n                                validationSchema={this.contactSchema}\n                                onSubmit={(values, {resetForm}) => {\n                                    // same shape as initial values\n                                    axios({\n                                        method: 'post',\n                                        url:'https://8dbp32h7ge.execute-api.eu-west-1.amazonaws.com/dev/?format=json',\n                                        data: `_to=${values[\"to\"]}&_cc=${values[\"cc\"]}&_replyTo=${values[\"email\"]}&title=${values[\"title\"]}&name=${values[\"name\"]}&email=${values[\"email\"]}&company=${values[\"companyName\"]}&phone=${values[\"phoneNumber\"]}`,\n                                    }).then((response) => {\n                                        if (response.data.statusCode==200) {\n                                            this.setState(prevState => ({\n                                                messageSent: !prevState.messageSent\n                                            }))\n                                        }\n                                        resetForm({\n                                            to:'sarahyam%40reddigitalchina.com',\n                                            cc:'sunqqxp%40gmail.com',\n                                            title:'Training Brouchure Request',\n                                            name:'',\n                                            email:'',\n                                            companyName:'',\n                                            phoneNumber:'',\n                                        })\n                                    }).catch((error) => {\n                                        console.log(error)\n                                    })\n                                }}\n                            >\n                                {({errors, touched}) => (\n                                    <div className=\"columns is-centered\">\n                                        <div className=\"column is-10\">\n                                            <Form id=\"Red Digital China Training brouchure Form\">\n                                                <div className=\"field\">\n                                                    <div className=\"field-body\">\n                                                        <div className=\"field\">\n                                                            <div className=\"control has-text-centered\">\n                                                                {this.state.messageSent ? (<p className=\"is-danger\">Thank you for requesting training brouchure from Red Digtial Academy, our training advisor will contact you via email or phone within 1-2 days.</p>) : null}\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                                <div className=\"field\">\n                                                    <label className=\"label is-medium\">\n                                                        Name*\n                                                    </label>\n                                                    <p className=\"control is-expanded has-icons-left\">\n                                                        <Field className=\"input is-medium\" name=\"name\" />\n                                                        <span className=\"icon is-small is-left\">\n                                                            <i className=\"fas fa-user\"></i>\n                                                        </span>\n                                                    </p>\n                                                    {errors.name && touched.name ? (<p className=\"help is-danger\">{errors.name}</p>) : null}    \n                                                </div>\n                                                <div className=\"field\">\n                                                    <label className=\"label is-medium\">\n                                                        Email*\n                                                    </label>\n                                                    <p className=\"control is-expanded has-icons-left\">\n                                                        <Field className=\"input is-medium\" name=\"email\" type=\"email\"/>\n                                                        <span className=\"icon is-small is-left\">\n                                                            <i className=\"fas fa-envelope\"></i>\n                                                        </span>\n                                                    </p>\n                                                    {errors.email && touched.email ? (<p className=\"help is-danger\">{errors.email}</p>) : null}\n                                                </div>\n                                                <div className=\"field\">\n                                                    <label className=\"label is-medium\">\n                                                        Company*\n                                                    </label>\n                                                    <p className=\"control is-expanded has-icons-left\">\n                                                        <Field className=\"input is-medium\" name=\"companyName\"/>\n                                                        <span className=\"icon is-small is-left\">\n                                                            <i className=\"fas fa-building\"></i>\n                                                        </span>\n                                                    </p>\n                                                    {errors.companyName && touched.companyName ? (<p className=\"help is-danger\">{errors.companyName}</p>) : null}    \n                                                </div>\n                                                <div className=\"field\">\n                                                    <label className=\"label is-medium\">\n                                                        Phone*\n                                                    </label>\n                                                    <p className=\"control is-expanded has-icons-left\">\n                                                        <Field className=\"input is-medium\" name=\"phoneNumber\"/>\n                                                        <span className=\"icon is-small is-left\">\n                                                            <i className=\"fas fa-phone-volume\"></i>\n                                                        </span>\n                                                    </p>\n                                                    {errors.phoneNumber && touched.phoneNumber ? (<p className=\"help is-danger\">Wrong phone number format</p>) : null}\n                                                </div>\n                                                <div className=\"field\">\n                                                    <div className=\"control has-text-centered\">\n                                                        <button className=\"button is-danger is-medium\" type=\"submit\">Request For Interest</button>\n                                                    </div>\n                                                </div>\n                                            </Form>\n                                        </div>\n                                    </div>\n                                )}\t\n                            </Formik>\n                        </div>\n                    </div>\n                </div>\n            </section>\n        )\n    }\n}\n\n\nexport default AcademyPage\n\nexport const pageQuery = graphql`\n    query AcademyPage {\n        site {\n            siteMetadata {\n              academyPage {\n                title\n                description\n                imageUrl\n                siteUrl\n              }\n            }\n          } \n        allContentfulAcademyAudience(filter: {node_locale: {eq: \"en-GB\"}}, sort: {fields: order}) {\n            edges {\n              node {\n                order\n                title\n                fontAwesomeIcon\n                description {\n                  childMarkdownRemark {\n                    rawMarkdownBody\n                  }\n                }\n              }\n            }\n          }\n          allContentfulModule(filter: {node_locale: {eq: \"en-GB\"}}, sort: {fields: order}) {\n            edges {\n              node {\n                order\n                title\n                icon {\n                  file {\n                    url\n                  }\n                }\n                description {\n                  childMarkdownRemark {\n                    rawMarkdownBody\n                  }\n                }\n              }\n            }\n          }        \n    }\n`"],"sourceRoot":""}