{"version":3,"sources":["webpack:///./src/app/pages/Feedback.js"],"names":["recaptchaRef","React","createRef","Feedback","props","handleChange","bind","handleSubmit","verifyCallback","staticPageView","location","pathname","visitorId","sessionId","setPageType","this","initialise","event","newState","target","name","value","updateForm","email","match","phone","captchaVerified","recaptchaValue","current","getValue","preventDefault","validateEmail","output","validateName","fullName","validatePhone","data","enquiryType","message","submitFeedback","isSubmitting","hasSubmitted","title","main","px","mt","sm","lg","w","div","maxWidth","mx","mb","p","text","h1","borderWidth","borderStyle","borderColor","pb","form","id","display","flexDirection","encType","onSubmit","label","htmlFor","input","bg","placeholder","required","type","onChange","select","textarea","rows","ref","sitekey","process","color","textTransform","fontWeight","className","Component","connect","state","feedback","getVisitorId","getSessionId","dispatch","bindActionCreators"],"mappings":"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","file":"static/js/pages-Feedback.5d94391b.chunk.js","sourcesContent":["import Recaptcha from 'react-google-recaptcha'\nimport React, { Component, Fragment } from 'react'\nimport { x } from '@xstyled/styled-components'\nimport Helmet from 'react-helmet'\nimport { bindActionCreators } from 'redux'\nimport { connect } from 'react-redux'\nimport { initialise, submitFeedback, updateForm } from '../../store/feedback'\nimport { staticPageView, setPageType } from '../../store/app'\nimport { getVisitorId, getSessionId } from '../../store/article'\n\nconst recaptchaRef = React.createRef()\n\nexport class Feedback extends Component {\n  constructor (props) {\n    super(props)\n    this.handleChange = this.handleChange.bind(this)\n    this.handleSubmit = this.handleSubmit.bind(this)\n    this.verifyCallback = this.verifyCallback.bind(this)\n    props.staticPageView(props.location.pathname, props.visitorId, props.sessionId)\n    setPageType('section')\n  }\n  componentDidMount () {\n    this.props.initialise()\n  }\n  handleChange (event) {\n    let newState = {}\n    newState[event.target.name] = event.target.value\n    this.props.updateForm(newState)\n  }\n  validateEmail (email) {\n    var re = /^[^.@][^@]+@{1}[^@]+\\.[^@]+[^.@]$/i\n    return email.match(re)\n  }\n  validateName (name) {\n    var re = /^[`a-zA-ZàèìòùÀÈÌÒÙáéíóúýÁÉÍÓÚÝâêîôûÂÊÎÔÛãñõÃÑÕäëïöüÿÄËÏÖÜŸçÇßØøÅåÆæœ' -]{2,45}$/i\n    return name.match(re)\n  }\n  validatePhone (phone) {\n    var re = /^[(]{0,1}[0-9]{3}[)]{0,1}[-\\s.]{0,1}[0-9]{3}[-\\s.]{0,1}[0-9]{4}$/\n    return phone.match(re)\n  }\n  verifyCallback () {\n    this.props.updateForm({\n      captchaVerified: true,\n      recaptchaValue: recaptchaRef.current.getValue()\n    })\n  }\n  handleSubmit (event) {\n    event.preventDefault()\n    if (!this.validateEmail(this.props.email)) {\n      this.props.updateForm({ output: 'Please enter a valid email address' })\n      return false\n    } else if (!this.validateName(this.props.fullName)) {\n      this.props.updateForm({ output: 'Please enter a valid full name' })\n      return false\n    } else if (!this.validatePhone(this.props.phone)) {\n      this.props.updateForm({ output: 'Please enter a valid cellphone number' })\n      return false\n    } else if (process.env.NODE_ENV === 'production' && !this.props.captchaVerified) {\n      this.props.updateForm({ output: 'Please enter a Captcha' })\n      return false\n    }\n    const data = {fullName: this.props.fullName, email: this.props.email, phone: this.props.phone, enquiryType: this.props.enquiryType, message: this.props.message, recaptchaValue: this.props.recaptchaValue}\n    this.props.submitFeedback(data)\n    return true\n  }\n\n  render () {\n    if (!this.props.isSubmitting && !this.props.hasSubmitted) {\n      return (\n        <>\n          <x.main px={20} mt={{ sm: '96px', lg: '173px' }} w='100%'>\n            <Helmet title='Feedback, Enquiries and Comments | IOL' />\n            <x.div w='100%' maxWidth={1220} mx='auto' mt={50} mb={30}>\n              <x.h1 text='h1' borderWidth='0 0 1px 0' borderStyle='solid' borderColor='divider' pb={10} mb={20}>Feedback Form</x.h1>\n              <x.p text='small' mb={15}>Fill out the form below to send your comments, queries and feedback.</x.p>\n              <x.form maxWidth={550} id='item-form' name='item-form' display='flex' flexDirection='column' encType='text/plain' onSubmit={this.handleSubmit}>\n                <x.label text='medium' htmlFor='fullName' mb={15}>Full Name:</x.label>\n                <x.input mb={15} bg='ltGrey' p={10} text='medium' id='fullName' placeholder='Type your full name' required='required' type='text' name='fullName' value={this.props.fullName} onChange={this.handleChange} />\n                <x.label text='medium' mb={15} htmlFor='email'>Email:</x.label>\n                <x.input mb={15} bg='ltGrey' p={10} text='medium' id='email' placeholder='example@domain.com' required='required' type='email' name='email' value={this.props.email} onChange={this.handleChange} />\n                <x.label text='medium' mb={15} htmlFor='phone'>Cellphone:</x.label>\n                <x.input mb={15} bg='ltGrey' p={10} text='medium' id='phone' placeholder='Type your cellphone number' required='required' type='text' name='phone' value={this.props.phone} onChange={this.handleChange} />\n                <x.label text='medium' mb={15} htmlFor='enquiryType'>Enquiry:</x.label>\n                <x.select mb={15} bg='ltGrey' p={10} text='medium' id='enquiryType' name='enquiryType' onChange={this.handleChange}>\n                  <option value='general'>General Enquiry</option>\n                  <option value='technical'>Technical Issue</option>\n                  <option value='news'>News</option>\n                  <option value='business'>Business</option>\n                  <option value='sport'>Sport</option>\n                  <option value='motoring'>Motoring</option>\n                  <option value='lifestyle'>Lifestyle</option>\n                  <option value='travel'>Travel</option>\n                  <option value='entertainment'>Entertainment</option>\n                  <option value='newspapers'>Newspapers</option>\n                  <option value='press'>Press Release</option>\n                </x.select>\n                <x.label text='medium' mb={15} htmlFor='message'>Message:</x.label>\n                <x.textarea mb={15} bg='ltGrey' p={10} text='medium' name='message' id='message' rows='6' onChange={this.handleChange} />\n                <Recaptcha ref={recaptchaRef} sitekey={process.env.RAZZLE_GOOGLE_CAPTCHA_SITE_KEY} onChange={this.verifyCallback} />\n                {this.props.output && (\n                  <p>{this.props.output}</p>\n                )}\n                <x.input mt={15} mb={15} bg='red' p={10} text='medium' color='white' textTransform='uppercase' fontWeight='medium' w={150} id='submitbutton' type='submit' value='Submit' className='btn btn-red btn-anim' />\n                <x.input type='hidden' name='form_hash' value='n1opdyilO0bEvwBq' id='form_hash' />\n              </x.form>\n            </x.div>\n          </x.main>\n        </>\n      )\n    } else if (this.props.isSubmitting) {\n      return (\n        <>\n          <Helmet title='Article' />\n          <x.main px={20} mt={{ sm: '96px', lg: '173px' }} w='100%'>\n            <x.div w='100%' maxWidth={1220} mx='auto' mt={50} mb={30}>\n              <x.p w='100%' maxWidth={1220} mx='auto' text='large'mt={50} mb={30}>Submitting your feedback ...</x.p>\n            </x.div>\n          </x.main>\n        </>\n      )\n    } else if (this.props.hasSubmitted) {\n      return (\n        <>\n          <Helmet title='Thank you for your feedback' />\n          <x.main px={20} mt={{ sm: '96px', lg: '173px' }} w='100%'>\n            <x.div w='100%' maxWidth={1220} mx='auto' mt={50} mb={30}>\n              <x.h1 text='h1' borderWidth='0 0 1px 0' borderStyle='solid' borderColor='divider' pb={10} mb={20}>Thank you for your feedback</x.h1>\n              <x.p w='100%' maxWidth={1220} mx='auto' text='large' mt={50} mb={30}>Thank you for your feedback. We will get back to you shortly.</x.p>\n            </x.div>\n          </x.main>\n        </>\n      )\n    }\n  }\n}\n\nconst mapStateToProps = (state) => ({ ...state.feedback, visitorId: getVisitorId(state), sessionId: getSessionId(state) })\nconst mapDispatchToProps = (dispatch) => bindActionCreators({ initialise, submitFeedback, updateForm, staticPageView }, dispatch)\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Feedback)\n"],"sourceRoot":""}