import Vue from 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.16/vue.esm.browser.min.js';
import axios from 'https://cdnjs.cloudflare.com/ajax/libs/axios/1.8.4/esm/axios.min.js';
import Dropzone from 'https://cdn.jsdelivr.net/npm/dropzone@6.0.0-beta.2/+esm';
import {cleanQueryString, constructIndex, debounce, getCookie, searchIndex, setCookie} from 'https://uhk.io/wp-content/plugins/uhk-knowledgebase/js/util.js';
function saveCookies(data){
if(!data.contactMessage.length){
return false;
}
const isDesktop=window.screen.width > 800;
const formData=new FormData();
formData.append('action', 'contact_form_cookies');
formData.append('email', data.contactEmail ?? '');
formData.append('subject', data.contactSubject ?? '');
formData.append('firstName', data.contactFirstName ?? '');
formData.append('message', data.contactMessage ?? '');
formData.append('isSent', data.isSent ?? false);
formData.append('isDesktop', isDesktop);
axios.post(wp.ajax.settings.url, formData);
}
Vue.component('knowledgebase-contact-form', {
props: {},
template: '#knowledgebase-contact-form-template',
data(){
return {
idx: null,
contactEmail: getCookie('knowledgebaseContactEmail')||search.email,
contactEmailConfirm: getCookie('knowledgebaseContactEmailConfirm')||search.email,
contactFirstName: getCookie('knowledgebaseContactFirstName')||search.firstName,
contactSubject: getCookie('knowledgebaseContactSubject') ?? '',
contactMessage: getCookie('knowledgebaseContactMessage') ?? '',
searchResults: [],
validationErrors: {},
submitButtonText: 'Send email',
formSubmitMessage: '',
dropzone: null,
}},
computed: {
emailMismatch(){
return this.contactEmail.length > 0
&& this.contactEmailConfirm.length > 0
&& this.contactEmail!==this.contactEmailConfirm;
},
isEmailValid(){
const emailRegExp=/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return emailRegExp.test(this.contactEmail);
},
submitButtonEnabled(){
return this.contactEmail.length
&& this.contactFirstName.length
&& this.contactSubject.length
&& this.contactMessage.length
&& this.isEmailValid
&& !this.emailMismatch;
},
},
watch: {
contactEmail(e){
setCookie('knowledgebaseContactEmail', e);
},
contactEmailConfirm(e){
setCookie('knowledgebaseContactEmailConfirm', e);
},
contactFirstName(e){
setCookie('knowledgebaseContactFirstName', e);
},
contactSubject(e){
setCookie('knowledgebaseContactSubject', e);
this.search();
},
contactMessage(e){
const _this=this;
setCookie('knowledgebaseContactMessage', e);
this.search();
debounce(()=> {
saveCookies({
contactEmail: _this.contactEmail,
contactFirstName: _this.contactFirstName,
contactSubject: _this.contactSubject,
contactMessage: _this.contactMessage,
isSent: false,
});
}, 1000);
},
},
async mounted(){
this.setDropzone();
await this.getKnowledgebase();
},
methods: {
search(){
const q=cleanQueryString(`${this.contactSubject} ${this.contactMessage}`);
this.searchResults=searchIndex(q);
const searchResults=structuredClone(this.searchResults);
for (const currentResult of searchResults){
if(!this.searchResults.some(result=> result.id===currentResult.id)){
this.searchResults.unshift(currentResult);
}};
for (let i=this.searchResults.length-1; i >=0; i--){
const item=this.searchResults[i];
if(!searchResults.some(result=> result.id===item.id)){
this.searchResults.splice(i, 1);
}}
},
async sendEmail(e){
this.submitButtonText='Sending email...';
const formData=new FormData();
formData.append('action', 'knowledgebase_contact_form');
formData.append('contactEmail', this.contactEmail);
formData.append('contactFirstName', this.contactFirstName);
formData.append('contactSubject', this.contactSubject);
formData.append('contactMessage', this.contactMessage);
if(this.dropzone){
this.dropzone.getAcceptedFiles().forEach((file)=> {
formData.append('contactFiles[]', file, file.name);
});
}
try {
const response=await axios.post(`${wp.ajax.settings.url}?action=knowledgebase_send_email`, formData);
const data=response.data;
if(data.message==='validationErrors'){
this.validationErrors=data.data;
}else{
this.processSendMailResponse(data);
if(data.success){
saveCookies({
contactEmail: this.contactEmail,
contactFirstName: this.contactFirstName,
contactSubject: this.contactSubject,
contactMessage: this.contactMessage,
isSent: true,
});
this.clearFields();
jQuery('.knowledgebase-contact-form').slideUp();
}}
} catch (error){
const response={message: error.message};
this.processSendMailResponse(response);
}},
clearFields(){
this.contactEmail='';
this.contactEmailConfirm='';
this.contactFirstName='';
this.contactSubject='';
this.contactMessage='';
setCookie('knowledgebaseContactEmail', '');
setCookie('knowledgebaseContactEmailConfirm', '');
setCookie('knowledgebaseContactMessage', '');
setCookie('knowledgebaseContactFirstName', '');
setCookie('knowledgebaseContactSubject', '');
setCookie('knowledgebaseContactMessage', '');
if(this.dropzone){
this.dropzone.removeAllFiles();
}},
processSendMailResponse(response){
this.formSubmitMessage=response.message;
if(!response.success){
this.formSubmitMessage +='\nPlease contact support@uhk.io';
}},
async getKnowledgebase(){
const response=await axios.get('/wp-json/knowledgebase/articles.json');
constructIndex(response.data);
this.search();
},
setDropzone(){
const _this=this;
this.dropzone=new Dropzone(this.$refs.dropzone, {
url: '#',
autoProcessQueue: false,
clickable: '.dropzone-custom-upload-clickable',
addRemoveLinks: true,
maxFilesize: 7,
maxTotalFilesize: 7,
init: function(){
this.on('addedfile', function(file){
let totalSize=0;
this.files.forEach(function(f){
totalSize +=f.size;
});
if(totalSize > this.options.maxTotalFilesize * 1024 * 1024){
if(!file.rejected){
alert(`Total file size limit exceeded. Maximum total size is ${this.options.maxTotalFilesize}MB`);
file.rejected=true;
}
this.removeFile(file);
}});
},
removedfile(file){
file.previewElement.remove();
}});
}}
});
new Vue({el: '#knowledgebase-contact-form-root'});