{"version":3,"sources":["webpack:///./src/views/Contact.vue?308e","webpack:///./src/assets/clement4.png","webpack:///./src/views/Contact.vue","webpack:///src/views/Contact.vue","webpack:///./src/views/Contact.vue?1a74","webpack:///./src/views/Contact.vue?aba4"],"names":["module","exports","render","_vm","this","_c","_self","attrs","staticClass","class","badgeShow","require","_v","fadeInUp","playAnimText","_s","contactHeadline","scaleYAnim","phoneWithNoSpaces","footerData","phone","email","directives","name","rawName","value","expression","nameErr","domProps","on","$event","target","composing","phoneErr","checkPhone","emailErr","message","messageErr","contactDisclaimer","sendModalAttempt","contactBtnText","staticRenderFns","metaInfo","title","meta","content","data","CMS","watch","beforeCreate","then","methods","e","encode","map","join","header","axios","form","axiosConfig","setTimeout","computed","formValid","mounted","document","window","destroyed","component"],"mappings":"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","file":"js/chunk-196723e6.d871c5a8.js","sourcesContent":["export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--10-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Contact.vue?vue&type=style&index=0&id=f43495e2&prod&lang=sass&\"","module.exports = __webpack_public_path__ + \"img/clement4.18ecfe70.png\";","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{attrs:{\"id\":\"contactContainer\"}},[_c('div',{staticClass:\"navbarServices\",attrs:{\"id\":\"contactNavbarServices\"}}),_c('div',{staticClass:\"badge\",class:{badgeShow: _vm.badgeShow}},[_c('img',{attrs:{\"src\":require(\"./../assets/email.png\")}}),_vm._v(\"Your message was sent.\")]),_c('div',{staticClass:\"contactContent\"},[_c('h1',{staticClass:\"animated\",class:{fadeInUp: _vm.playAnimText}},[_vm._v(_vm._s(_vm.contactHeadline))]),_c('div',{staticClass:\"mailandphone animated\"},[_c('div',{staticClass:\"overflow-contact\",class:{scaleYAnim: _vm.playAnimText}},[_c('a',{attrs:{\"href\":`tel:${this.phoneWithNoSpaces}`}},[_c('img',{attrs:{\"src\":require(\"./../assets/phone.png\")}}),_c('span',[_vm._v(_vm._s(_vm.footerData.phone))])])]),_c('div',{staticClass:\"overflow-contact\",class:{scaleYAnim: _vm.playAnimText}},[_c('a',{attrs:{\"href\":`mailto:${this.footerData.email}`}},[_c('img',{attrs:{\"src\":require(\"./../assets/email.png\")}}),_c('span',[_vm._v(_vm._s(_vm.footerData.email))])])])]),_c('form',{staticClass:\"contactForm contactViewForm\"},[_c('label',[_vm._v(\"Name\")]),_c('input',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.name),expression:\"name\"}],staticClass:\"animated\",class:{'shake redText': _vm.nameErr},attrs:{\"type\":\"text\",\"name\":\"name\",\"maxlength\":25},domProps:{\"value\":(_vm.name)},on:{\"keydown\":function($event){_vm.nameErr = false},\"input\":function($event){if($event.target.composing)return;_vm.name=$event.target.value}}}),_c('label',[_vm._v(\"Phone\")]),_c('input',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.phone),expression:\"phone\"}],staticClass:\"animated\",class:{'shake redText': _vm.phoneErr},attrs:{\"type\":\"text\",\"name\":\"phone\",\"onKeyPress\":\"if(this.value.length==15) return false;\"},domProps:{\"value\":(_vm.phone)},on:{\"keypress\":function($event){return _vm.checkPhone($event)},\"keydown\":function($event){_vm.phoneErr = false},\"input\":function($event){if($event.target.composing)return;_vm.phone=$event.target.value}}}),_c('label',[_vm._v(\"Email\")]),_c('input',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.email),expression:\"email\"}],staticClass:\"animated\",class:{'shake redText': _vm.emailErr},attrs:{\"type\":\"text\",\"name\":\"email\",\"maxlength\":30},domProps:{\"value\":(_vm.email)},on:{\"keydown\":function($event){_vm.emailErr = false},\"input\":function($event){if($event.target.composing)return;_vm.email=$event.target.value}}}),_c('label',[_vm._v(\"Message\")]),_c('textarea',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.message),expression:\"message\"}],staticClass:\"animated\",class:{'shake redText': _vm.messageErr},attrs:{\"name\":\"message\",\"id\":\"\",\"cols\":\"30\",\"rows\":\"5\",\"maxlength\":200},domProps:{\"value\":(_vm.message)},on:{\"keydown\":function($event){_vm.messageErr = false},\"input\":function($event){if($event.target.composing)return;_vm.message=$event.target.value}}}),_c('small',[_vm._v(_vm._s(_vm.contactDisclaimer))]),_c('div',{staticClass:\"btn animated\",on:{\"click\":function($event){return _vm.sendModalAttempt()}}},[_c('div'),_c('span',[_vm._v(_vm._s(_vm.contactBtnText))])])]),_c('img',{staticClass:\"contactClementImg animated\",class:{fadeInUp: _vm.playAnimText},attrs:{\"src\":require(\"./../assets/clement4.png\")}})]),_c('footerComp')],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n<div id=\"contactContainer\">\n    <div class=\"navbarServices\" id=\"contactNavbarServices\"></div>\n    <div class=\"badge\" :class=\"{badgeShow: badgeShow}\"><img src=\"./../assets/email.png\">Your message was sent.</div>\n    <div class=\"contactContent\">\n      <h1 class=\"animated\" :class=\"{fadeInUp: playAnimText}\">{{contactHeadline}}</h1>\n      <div class=\"mailandphone animated\">\n        <div class=\"overflow-contact\" :class=\"{scaleYAnim: playAnimText}\"><a :href=\"`tel:${this.phoneWithNoSpaces}`\"><img src=\"./../assets/phone.png\"><span>{{footerData.phone}}</span></a></div>\n        <div class=\"overflow-contact\" :class=\"{scaleYAnim: playAnimText}\"><a :href=\"`mailto:${this.footerData.email}`\"><img src=\"./../assets/email.png\"><span>{{footerData.email}}</span></a></div>\n      </div>\n      <form class=\"contactForm contactViewForm\">\n        <label>Name</label>\n        <input type=\"text\" name=\"name\" v-model=\"name\" :maxlength=\"25\" @keydown=\"nameErr = false\" class=\"animated\" :class=\"{'shake redText': nameErr}\">\n        <label>Phone</label>\n        <input type=\"text\" name=\"phone\" v-model=\"phone\" onKeyPress=\"if(this.value.length==15) return false;\" @keypress=\"checkPhone($event)\" @keydown=\"phoneErr = false\" class=\"animated\" :class=\"{'shake redText': phoneErr}\">\n        <label>Email</label>\n        <input type=\"text\" name=\"email\" v-model=\"email\" :maxlength=\"30\" @keydown=\"emailErr = false\" class=\"animated\" :class=\"{'shake redText': emailErr}\">\n        <label>Message</label>\n        <textarea name=\"message\" id=\"\" cols=\"30\" rows=\"5\" :maxlength=\"200\" v-model=\"message\" @keydown=\"messageErr = false\" class=\"animated\" :class=\"{'shake redText': messageErr}\"></textarea>\n        <small>{{contactDisclaimer}}</small>\n        <div class=\"btn animated\" @click=\"sendModalAttempt()\">\n          <div></div>\n          <span>{{contactBtnText}}</span>\n        </div>\n      </form>\n      <img src=\"./../assets/clement4.png\" class=\"contactClementImg animated\" :class=\"{fadeInUp: playAnimText}\">\n    </div>\n    <footerComp/>\n  </div>\n</template>\n\n<script>\nimport axios from \"axios\";\n\nexport default {\n  //VueMeta\n  metaInfo: {\n    title: 'Contact Us ',\n    meta: [\n      {\n        //vmid: 'description',\n        name: 'description',\n        content:\n                'Contact Clement Labs for a quick and pain free chat. We will let you know if we can help make your Shopify a magical one.'\n      }\n    ]\n  },\n  data() {\n    return {\n      playAnimText: false,\n      name: '',\n      phone: '',\n      email: '',\n      message: '',\n      nameErr: false,\n      phoneErr: false,\n      emailErr: false,\n      messageErr: false,\n      CMS: null,\n      contactHeadline: '',\n      contactDisclaimer: '',\n      contactBtnText: ''\n    }\n  },\n\n  watch: {\n    CMS() {\n      this.contactHeadline = this.CMS.contact_headline[0].text\n      this.contactDisclaimer = this.CMS.contact_disclaimer[0].text\n      this.contactBtnText = this.CMS.contact_page_button_text[0].text\n    } \n  },\n\n  beforeCreate() {\n    // CMS DEMONSTRATION\n    this.$prismic.client.getSingle('contact')\n    .then(doc => {\n      this.CMS = doc.data\n    })\n  },\n\n  methods: {\n    checkPhone(e) {\n      if(!(e.code.includes('Digit') || e.code.includes('Slash') || e.code.includes('Space'))) {\n        e.preventDefault()\n      }\n    },\n\n    encode (data) {\n      return Object.keys(data)\n        .map(\n          key => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`\n        )\n        .join(\"&\");\n    },\n\n    sendModalAttempt() {\n      if(this.formValid) {\n        let form = {\n          name: this.name,\n          phone: this.phone,\n          email: this.email,\n          message: this.message\n        }\n\n        const axiosConfig = {\n          header: { \"Content-Type\": \"application/json\" }\n        };\n        axios.post(\n          \"https://cloudflare-form-service.aaa-b91.workers.dev/\",\n          {\n            ...form\n          }\n          ,\n          axiosConfig\n        );\n\n        this.$store.state.modalOpened = false\n        setTimeout(() => {\n          this.$store.state.badgeShow = true\n        }, 500)\n        setTimeout(() => {\n          this.$store.state.badgeShow = false\n        }, 2500)\n        this.email = ''\n        this.message = ''\n        this.phone = ''\n        this.name = ''\n      } else {\n        this.nameErr = this.name == '' ? true : false\n        this.phoneErr = this.phone == '' ? true : false\n        this.emailErr = (this.email == '' || !/\\S+@\\S+\\.\\S+/.test(this.email)) ? true : false\n        this.messageErr = this.message == '' ? true : false\n      }\n    },\n  },\n\n  computed: {\n    formValid() {\n      return (this.name !== '' && this.phone !== '' && this.email  !== '' && /\\S+@\\S+\\.\\S+/.test(this.email) && this.message !== '') ? true : false\n    },\n\n    footerData() {\n        return this.$store.state.footerData\n    },\n\n    badgeShow() {\n      return this.$store.state.badgeShow\n    },\n\n    phoneWithNoSpaces() {\n      return this.footerData.phone.replace(new RegExp(' ', 'gi'), '')\n    }\n  },\n\n  mounted() {\n    document.body.style.height = \"auto\"\n    window.scrollTo(0, 0)\n\n    setTimeout(() => {\n      this.playAnimText = true\n    }, 1200)\n  },\n\n  destroyed() {\n    document.body.style.height = \"1000vh\"\n  }\n}\n</script>\n\n<style lang=\"sass\">\n\n$color1: rgba(38, 70, 83, 1)\n$color2: rgba(42, 157, 143, 1)\n$color3: rgba(233, 196, 106, 1)\n$color4: rgba(244, 162, 97, 1)\n$color5: rgba(231, 111, 81, 1)\n\n.contactViewForm\n  width: 30% !important\n  @media (max-width: 1400px)\n    width: 50% !important\n  margin: 50px auto !important\n  .btn\n    &:hover\n      span\n        color: $color4 !important\n\n#contactContainer\n  background-color: $color4\n  width: 100vw\n  position: absolute\n  left: 0\n  top: 0\n  overflow: hidden\n  #contactNavbarServices\n    background-color: $color4\n  .contactContent\n    width: 100vw\n    padding: 10vw 0 5vw 0\n    @media (min-width: 770px) and (max-width: 1100px)\n      padding-top: 250px\n    box-sizing: border-box\n    position: relative\n    z-index: 100\n    h1\n      opacity: 0\n      font-size: 40px\n    .contactClementImg\n      opacity: 0\n      width: 300px\n      height: 600px\n\n</style>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Contact.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Contact.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Contact.vue?vue&type=template&id=f43495e2&\"\nimport script from \"./Contact.vue?vue&type=script&lang=js&\"\nexport * from \"./Contact.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Contact.vue?vue&type=style&index=0&id=f43495e2&prod&lang=sass&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}