kairoscope-website-2021/themes/kairoscope-theme/layout/_partial/vue.ejs

<script>
    
    var app = new Vue({
        el: '#vue-app',
        data: {
            newsletter: {
                email : '',
                alert_class : 'alert-secondary',
                alert_text : "Subscribing to newsletter...",
                show_alert : false,
                show_form : true,
                show_spinner : true,
                show_alert_close : false,
                subscribing : false
            },
            contact: {
                message: {
                    name: "",
                    email: "",
                    subject: "",
                    message: "",
                    send_status: ""
                },
                feedback: {
                    name: "",
                    email: "",
                    subject: "",
                    message: "",
                    topic: "",
                    game: "",
                    send_status: ""
                },
                report: {
                    name: "",
                    email: "",
                    subject: "",
                    message: "",
                    topic: "",
                    game: "",
                    platform: "",
                    game_version: "",
                    send_status: ""
                }
            }
        },
        methods: {
            subscribe_to_newsletter: function(){
                if(this.newsletter.email != '' && !this.newsletter.subscribing){
                    var vm = this;
                    this.newsletter.alert_class = 'alert-secondary';
                    this.newsletter.alert_text = "Subscribing to newsletter...";
                    this.newsletter.show_alert = true;
                    this.newsletter.show_form = false;
                    this.newsletter.show_spinner = true;
                    this.newsletter.subscribing = true;
                    vm.newsletter.show_alert_close = false;
                    var payload = { email: this.newsletter.email }
                    console.log("Subscribing to newsletter", payload);
                    var req = new XMLHttpRequest();
                    req.open('POST', "http://localhost:3101/register", true);
                    req.setRequestHeader('Content-Type', 'application/json');
                    req.onload  = function() {
                        var res = JSON.parse(req.responseText);
                        //console.log(res);
                        var tracking_data = {
                            email : vm.newsletter.email,
                            already_registered: res.already_registered,
                            confirmed_subscription: res.confirmed_subscription,
                            registration_attempts: res.registration_attempts
                        }
                        if(req.status == 200) {
                            vm.newsletter.alert_class = 'alert-success';
                            vm.newsletter.show_alert = true;
                            vm.newsletter.show_form = false;
                            vm.newsletter.show_spinner = false;
                            vm.newsletter.show_alert_close = false;
                            if(res.confirmed_subscription) {
                                vm.newsletter.alert_text = `You are already subscribed in this list.`;
                            } else if(res.already_registered) {
                                vm.newsletter.alert_text = `You are already registered in this list. We have sent another confirmation email to "${vm.newsletter.email}" Please confirm your subscription by following instructions on the email.`;
                            } else {
                                vm.newsletter.alert_text = `Thanks for subscribing! We have sent a confirmation email to "${vm.newsletter.email}".`;
                            }
                            vm.mixpanelTrack("Newsletter Signup", tracking_data);
                        } else {
                            vm.newsletter.alert_class = 'alert-danger';
                            vm.newsletter.show_alert = true;
                            vm.newsletter.show_form = true;
                            vm.newsletter.show_spinner = false;
                            vm.newsletter.show_alert_close = true;
                            if(req.status == 400) { 
                                vm.newsletter.alert_text = `The email address provided is not valid!`;
                                vm.mixpanelTrack("Newsletter Invalid Email", tracking_data);
                            }
                            if(req.status == 500) { 
                                vm.newsletter.alert_text = `There was an error with the server. Please try again later.`;
                                vm.mixpanelTrack("Newsletter Error", tracking_data);
                            }
                        }
                        setTimeout(function(){
                            vm.newsletter.subscribing = false;
                        }, 1000);
                    };
                    req.send(JSON.stringify(payload));
                    
                }
            },
            close_newsletter_alert: function() {
                this.newsletter.show_alert = false;
            },
            create_message_payload: function(data, category) {
                var payload = { };
                payload.category = category;
                if(data.name != undefined) payload.name = data.name;
                if(data.email != undefined) payload.email = data.email;
                if(data.subject != undefined) payload.subject = data.subject;
                if(data.message != undefined) payload.message = data.message;
                if(data.topic != undefined) payload.topic = data.topic;
                if(data.game != undefined) payload.game = data.game;
                if(data.platform != undefined) payload.platform = data.platform;
                if(data.game_version != undefined) payload.game_version = data.game_version;
                return payload;
            },
            send_contact_message: function() {
                console.log(`Sending Message`, this.contact.message);
                this.contact.message.send_status = "sending";
                var vm = this;
                var req = new XMLHttpRequest();
                    req.open('POST', "http://localhost:3102/receive", true);
                    req.setRequestHeader('Content-Type', 'application/json');
                    req.onload  = function() {
                        if(req.status == 200) {
                            vm.contact.message.send_status = "success";
                            vm.trackMessageSent("Contact message sent", payload);
                        } else {
                            vm.contact.message.send_status = "error";
                            vm.trackMessageSent("Send message error", payload);
                        }
                    }
                var payload = this.create_message_payload(this.contact.message, "Message")
                req.send(JSON.stringify(payload));
            },
            send_feedback_message: function() {
                console.log(`Sending Feedback`, this.contact.feedback);
                this.contact.feedback.send_status = "sending";
                var vm = this;
                var req = new XMLHttpRequest();
                    req.open('POST', "http://localhost:3102/receive", true);
                    req.setRequestHeader('Content-Type', 'application/json');
                    req.onload  = function() {
                        if(req.status == 200) {
                            vm.contact.feedback.send_status = "success";
                            vm.trackMessageSent("Feedback message sent", payload);
                        } else { 
                            vm.contact.feedback.send_status = "error";
                            vm.trackMessageSent("Send message error", payload);
                        }
                    }
                var payload = this.create_message_payload(this.contact.feedback, "Feedback")
                req.send(JSON.stringify(payload));
            },
            send_report_message: function() {
                console.log(`Sending Report`, this.contact.report);
                this.contact.report.send_status = "sending";
                var vm = this;
                var req = new XMLHttpRequest();
                    req.open('POST', "http://localhost:3102/receive", true);
                    req.setRequestHeader('Content-Type', 'application/json');
                    req.onload  = function() {
                        if(req.status == 200) {
                            vm.contact.report.send_status = "success";
                            vm.trackMessageSent("Bug report sent", payload);
                        } else { 
                            vm.contact.report.send_status = "error";
                            vm.trackMessageSent("Send message error", payload);
                        }
                    }
                var payload = this.create_message_payload(this.contact.report, "Bug Report")
                req.send(JSON.stringify(payload));
            },
            mixpanelTrack: function(event_name, properties){
                if (location.hostname !== "localhost" && location.hostname !== "127.0.0.1"){
                    mixpanel.track(event_name, properties);
                    console.log(`Tracking: \'${event_name}\'`, properties)
                } else {
                    //console.log('No tracking in ' + location.hostname);
                    console.log(`Tracking: \'${event_name}\'`, properties)
                }
            },
            trackMessageSent: function(event_title, payload){
                delete payload["name"];
                delete payload["message"];
                delete payload["subject"];
                this.mixpanelTrack(event_title, payload);
            }
        },
        computed: { },
        mounted: function () {
            this.$nextTick(function () {
                
            })
        }
    })
</script>