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
            },
        },
        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;
            },
            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)
                }
            }
        },
        computed: { },
        mounted: function () {
            this.$nextTick(function () {
                
            })
        }
    })
</script>