@inleads/inleads-widgets
Version:
Widgets for chatbot, WhatsApp, nps, contact-form
112 lines (111 loc) • 6.72 kB
JavaScript
import { h } from "@stencil/core";
export class ContactFormWidget {
constructor() {
this.handleInputChange = (event, field) => {
const input = event.target;
this[field] = input.value;
};
this.handleSubmit = (event) => {
event.preventDefault();
if (this.name === '') {
alert('Please enter your name');
return;
}
if (this.email === '' || !this.validateEmail(this.email)) {
alert('Please enter a valid email address');
return;
}
if (this.phoneNumber === '' || this.phoneNumber.length < 8) {
alert('Please enter a valid phone number');
return;
}
if (this.message === '') {
alert('Please enter a message');
return;
}
this.isSubmitting = true;
const inleadsEventKey = window.inleadsEvents;
inleadsEventKey.setUser(this.email, this.name, { 'phoneNumber': this.phoneNumber, 'description': this.message });
setTimeout(() => {
this.isSubmitting = false;
this.showModal = true;
this.name = "";
this.email = "";
this.phoneNumber = "";
this.message = "";
setTimeout(this.closeModal, 2000);
}, 2000);
};
this.closeModal = () => {
this.showModal = false;
};
this.apiKey = undefined;
this.name = '';
this.email = '';
this.phoneNumber = '';
this.message = '';
this.isSubmitting = false;
this.showModal = false;
}
componentDidLoad() {
const script = document.createElement('script');
script.src = "https://cdn.jsdelivr.net/npm/@inleads/event-logger/dist/events.js";
script.type = 'text/javascript';
script.onload = () => {
const inleadsEventKey = window.inleadsEvents;
inleadsEventKey.init(this.apiKey);
};
document.body.appendChild(script);
}
validateEmail(email) {
const reg = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@(([^<>()[\]\\.,;:\s@"]+\.)+[^<>()[\]\\.,;:\s@"]{2,})$/i;
return reg.test(email);
}
render() {
return (h("div", { key: '102365004099bfbf44ef5a604eb10cda7f9fe101', class: "contact-form-container" }, h("form", { key: 'f150005f1bcc20ee2b3e28501c7823aec054460d', onSubmit: this.handleSubmit, id: "contact-form", novalidate: true }, h("div", { key: 'a6bb8b6594b4495c3f3b80ba36345d091d565b0a', class: "contact-widget-entireSection" }, h("div", { key: '9a350699624e11afc5ac03740e5a7b7fa7a7f548', class: "screen-one screens" }, h("div", { key: '7241499d39564d155df8c240b9aaa063cb825f3e', class: "body-content" }, h("div", { key: '5d4c83f5811eeb014a34dd522b31f67051f131cc', class: "material-input" }, h("div", { key: '58f3962d9c77bb0314e5ed93d3cbfff288aae2bf', class: "form-group" }, h("input", { key: 'c999706db5722bce588683c81bf448f42e80a3bb', type: "text", id: "contact-name", class: "form-control", placeholder: " ", value: this.name, onInput: (event) => this.handleInputChange(event, 'name') }), h("label", { key: '24db579b7990b17ba910297ae38cd9a543105289', htmlFor: "contact-name" }, "Name")), h("div", { key: '6070a8601949f0de15cd13d8da3fd45d1a3de268', class: "form-group" }, h("input", { key: '5f13bed8e5ae3ede1694a84d4157123b72046341', type: "email", id: "contact-email", class: "form-control", placeholder: " ", value: this.email, onInput: (event) => this.handleInputChange(event, 'email') }), h("label", { key: '78beef4e346bbc8536d0eb2d00b6ff5368f683b5', htmlFor: "contact-email" }, "Email")), h("div", { key: 'f04a9b5a88388c413ffe1a76c8ad89aa3ab80a37', class: "form-group" }, h("input", { key: 'c43df1fdaa332ad0f0aad118136cc709488f7222', type: "text", id: "contact-phonenumber", class: "form-control", placeholder: " ", value: this.phoneNumber, onInput: (event) => this.handleInputChange(event, 'phoneNumber') }), h("label", { key: 'fb2ab6a7b3c51cb74155f888eb7b7e93ee46ba45', htmlFor: "contact-phonenumber" }, "Phone Number")), h("div", { key: 'caff9de2a8b1bcf1eda0514c376db3430d007a75', class: "description-section" }, h("div", { key: '7015f9886259c6266c493d86b85623b87e9ce2fa', class: "form-group" }, h("textarea", { key: '16d5675a65c4d9a4b303ce826cba3e2d01a19b40', maxlength: "10000", class: "form-control descriptionText", placeholder: " ", id: "contact-description", value: this.message, onInput: (event) => this.handleInputChange(event, 'message') }), h("label", { key: '6c9b916fa85d17c1e58dce39341af11b3ac0d586', htmlFor: "contact-description" }, "Message")))), h("div", { key: '07eee7fdd0e155b4719668fab1c6b9d8ded619bd', class: "timeline-section" }, h("div", { key: 'ee249af99f370a863f0367574a93bc4f67c944c8', class: "screen1" }, h("button", { key: 'bf61b039c7df7972501c4a4962bf468c4a832466', type: "submit", class: "btn btn-primary submitBTN", disabled: this.isSubmitting }, this.isSubmitting ? 'Submitting...' : 'SUBMIT')))))), this.showModal && (h("div", { key: 'd423e8caf061d57d8ed46e830e6b023aea434bbd', class: "showModal", id: "successModal", role: "dialog" }, h("div", { key: '0d6a29062a806d99ef1678d5e3542ffefeca8938', class: "modal-body text-center" }, h("p", { key: '87906c464087d2c08197bc10c667482e58d77995', class: "submit-message" }, "Thanks for contacting. We will get back to you shortly.")))))));
}
static get is() { return "contact-form-widget"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["contact-form-widget.css"]
};
}
static get styleUrls() {
return {
"$": ["contact-form-widget.css"]
};
}
static get properties() {
return {
"apiKey": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "api-key",
"reflect": false
}
};
}
static get states() {
return {
"name": {},
"email": {},
"phoneNumber": {},
"message": {},
"isSubmitting": {},
"showModal": {}
};
}
}
//# sourceMappingURL=contact-form-widget.js.map