Contact page with custumer-feedback-service integration

readme.md

@@ -7,6 +7,10 @@ This website is build with hexo and deployed as a static files.
 ### Commands
 
 ```bash
+# Install the Repo
+git clone https://git.kairoscope.net/company/kairoscope-website-2021.git
+cd kairoscope-website-2021
+npm install
 # Start a development server
 hexo server
 # Build files to /dist folder
@@ -78,14 +82,23 @@ hexo deploy
 
 - [x] Mobile / responsive design review
 
-- [ ] Contact form page
+- [x] Contact form page
 
-- [ ] Contact message functions
+- [x] Contact message functions
 
-- [ ] Track *Contact Message Sent*, *Contact Message Invalid* and *Contact Message Error*
+- [x] Track *Contact Message Sent*, *Contact Message Invalid* and *Contact Message Error*
 
 - [ ] Presskits page
 
 - [ ] Grid Miner alternative Newsletter Signup with reward (Mini Crusher card)
 
-- [ ] About the team section
+- [ ] Newsletter signup page  (*kairoscope and Grid Miner*)
+  *Each newsletter page signups to a different list*
+
+- [ ] feedback message ``sent_from`` field (sent from website or a game?)
+
+- [ ] Blog post thumbnails
+
+- [ ] About the team section
+
+- [ ] Deploy

themes/kairoscope-theme/layout/_partial/contact.ejs

@@ -9,7 +9,7 @@
                     v-on:click="mixpanelTrack('External Link', { target: 'Discord', link : 'https://discord.gg/SvKJ2cy'})">
                     <i class="fab fa-discord"></i> Join our Discord Server
                 </a>
-                <a class="btn btn-secondary" href="">
+                <a class="btn btn-secondary" href="/contact">
                     <i class="fas fa-envelope"></i> Send us a Message
                 </a>
               </div>

themes/kairoscope-theme/layout/_partial/newsletter.ejs

@@ -17,7 +17,7 @@
             </div>
         </div>
     </div>
-    <form @submit.prevent="subscribe_to_newsletter" v-show="newsletter.show_form" class="row g-3 newsletter">
+    <form @submit.prevent="subscribe_to_newsletter" v-show="newsletter.show_form" class="row g-3 dark-form newsletter">
         <div class="col-md-10 ">
             <input type="email" v-model="newsletter.email" class="form-control" id="inputEmail" aria-describedby="emailHelp" placeholder="Email">
             <div id="emailHelp" class="form-text hidden">We'll never share your email with anyone else.</div>

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

@@ -13,6 +13,35 @@
                 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(){
@@ -79,6 +108,76 @@
             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);
@@ -87,6 +186,12 @@
                     //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: { },

themes/kairoscope-theme/layout/contact.ejs

@@ -6,7 +6,237 @@
                 <h2 class="group-header">Contact</h2>
             </div>
         </div>
-        
+        <ul class="nav nav-pills justify-content-center" id="myTab" role="tablist">
+            <li class="nav-item" role="presentation">
+              <button type="button" role="tab" class="nav-link active" id="message-tab" data-bs-toggle="pill" data-bs-target="#message">Message</button>
+            </li>
+            <li class="nav-item" role="presentation">
+                <button type="button" role="tab" class="nav-link" id="feedback-tab" data-bs-toggle="pill" data-bs-target="#feedback">Feedback</button>
+            </li>
+            <li class="nav-item" role="presentation">
+                <button type="button" role="tab" class="nav-link" id="report-tab" data-bs-toggle="pill" data-bs-target="#report">Bug Report</button>
+            </li>
+          </ul>
+          <div class="tab-content">
+            <div class="tab-pane fade show active" id="message" role="tabpanel" aria-labelledby="message-tab" style="min-height: 450px;">
+                <div class="row">
+                    <div class="col-md-12 gy-5">
+                        <p class="lead ">Write a direct message to our team. We'll do our best to respond all messages.</p>
+                    </div>
+                </div>
+                <div class="row" v-show="contact.message.send_status != ''">
+                    <div class="col-12" v-show="contact.message.send_status == 'sending'">
+                        <div class="alert alert-secondary fade show" role="alert">
+                            <i class="fas fa-spinner fa-pulse" style="margin-right: 10px; font-size: 1.3em;">
+                            </i> Sending message...
+                        </div>
+                    </div>
+                    <div class="col-12" v-show="contact.message.send_status == 'success'">
+                        <div class="alert alert-success fade show" role="alert">
+                            <i class="fas fa-check-circle" style="margin-right: 10px; font-size: 1.3em;">
+                            </i> Your message was sent successfully.
+                        </div>
+                    </div>
+                    <div class="col-12" v-show="contact.message.send_status == 'error'">
+                        <div class="alert alert-danger fade show" role="alert">
+                            <i class="fas fa-exclamation-circle" style="margin-right: 10px; font-size: 1.3em;">
+                            </i> There was an error sending your message. Please try again.
+                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" style="float: right;"></button>
+                        </div>
+                    </div>
+                </div>
+                <form @submit.prevent="send_contact_message" class="dark-form" v-show="contact.message.send_status == ''">
+                    <div class="row">
+                        <div class="col-md-6 gy-3">
+                            <label for="inputName1" class="form-label">Name</label>
+                            <input type="text" v-model="contact.message.name" class="form-control" id="inputName1">
+                        </div>
+                        <div class="col-md-6 gy-3">
+                                <label for="inputEmail1" class="form-label">Email</label>
+                                <input type="email" v-model="contact.message.email" class="form-control" id="inputEmail1">
+                        </div>
+                        <div class="col-12 gy-3">
+                            <label for="inputAddress" class="form-label">Subject</label>
+                            <input type="text" v-model="contact.message.subject" class="form-control" id="inputAddress" placeholder="Message title">
+                        </div>
+                        <div class="col-12 gy-3">
+                            <label for="inputAddress2" class="form-label">Message</label>
+                            <textarea class="form-control" v-model="contact.message.message" id="exampleFormControlTextarea1" rows="3"></textarea>
+                        </div>
+                            
+                        <div class="col-12 gy-3">
+                            <button type="submit" class="btn btn-secondary">
+                                Send Message
+                            </button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+            <!-- Tab 2 -->
+            <div class="tab-pane fade" id="feedback" role="tabpanel" aria-labelledby="feedback-tab" style="min-height: 550px;">
+                <div class="row g-3">
+                    <div class="col-md-12 gy-5">
+                        <p class="lead ">Give your feedback or suggest features for one of our games or services.</p>
+                    </div>
+                </div>
+                <div class="row" v-show="contact.feedback.send_status != ''">
+                    <div class="col-12" v-show="contact.feedback.send_status == 'sending'">
+                        <div class="alert alert-secondary fade show" role="alert">
+                            <i class="fas fa-spinner fa-pulse" style="margin-right: 10px; font-size: 1.3em;">
+                            </i> Sending message...
+                        </div>
+                    </div>
+                    <div class="col-12" v-show="contact.feedback.send_status == 'success'">
+                        <div class="alert alert-success fade show" role="alert">
+                            <i class="fas fa-check-circle" style="margin-right: 10px; font-size: 1.3em;">
+                            </i> Your message was sent successfully.
+                        </div>
+                    </div>
+                    <div class="col-12" v-show="contact.feedback.send_status == 'error'">
+                        <div class="alert alert-danger fade show" role="alert">
+                            <i class="fas fa-exclamation-circle" style="margin-right: 10px; font-size: 1.3em;">
+                            </i> There was an error sending your message. Please try again.
+                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" style="float: right;"></button>
+                        </div>
+                    </div>
+                </div>
+                <form @submit.prevent="send_feedback_message" class="dark-form" v-show="contact.feedback.send_status == ''">
+                    <div class="row">
+                        <div class="col-md-3">
+                            <label for="inputState" class="form-label">Topic</label>
+                            <select id="inputState" v-model="contact.feedback.topic" class="form-select">
+                            <option>General</option>
+                            <option>Games</option>
+                            <option>Website</option>
+                            </select>
+                        </div>
+                        <div class="col-md-6" v-show="contact.feedback.topic == 'Games'">
+                            <label for="inputState" class="form-label">Game</label>
+                            <select id="inputState" v-model="contact.feedback.game" class="form-select">
+                                <option>Grid Miner</option>
+                                <option>Max Raider</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="row g-3">
+                        <div class="col-md-6 gy-5">
+                            <label for="inputName2" class="form-label">Name</label>
+                            <input type="text" v-model="contact.feedback.name" class="form-control" id="inputName2">
+                        </div>
+                        <div class="col-md-6 gy-5">
+                            <label for="inputEmail2" class="form-label">Email</label>
+                            <input type="email" v-model="contact.feedback.email" class="form-control" id="inputEmail2">
+                        </div>
+                    </div>
+                    <div class="row g-3">
+                        <div class="col-12 gy-5">
+                            <label for="inputSubject" class="form-label">Subject</label>
+                            <input type="text" v-model="contact.feedback.subject" class="form-control" id="inputSubject" placeholder="Message title">
+                        </div>
+                        <div class="col-12">
+                            <label for="inputMessage2" class="form-label">Message</label>
+                            <textarea class="form-control" v-model="contact.feedback.message" id="inputMessage2" rows="6"></textarea>
+                        </div>
+                        <div class="col-12">
+                            <button type="submit" class="btn btn-secondary">
+                                Send Message
+                            </button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+            <!-- Tab 3 -->
+            <div class="tab-pane fade" id="report" role="tabpanel" aria-labelledby="report-tab" style="min-height: 700px;">
+                <div class="row g-3">
+                    <div class="col-md-12 gy-5">
+                        <p class="lead ">Send a bug report about one of our games or services. Reports can also be sent directly from a game's main menu (in development).</p>
+                    </div>
+                </div>
+                <div class="row" v-show="contact.report.send_status != ''">
+                    <div class="col-12" v-show="contact.report.send_status == 'sending'">
+                        <div class="alert alert-secondary fade show" role="alert">
+                            <i class="fas fa-spinner fa-pulse" style="margin-right: 10px; font-size: 1.3em;">
+                            </i> Sending message...
+                        </div>
+                    </div>
+                    <div class="col-12" v-show="contact.report.send_status == 'success'">
+                        <div class="alert alert-success fade show" role="alert">
+                            <i class="fas fa-check-circle" style="margin-right: 10px; font-size: 1.3em;">
+                            </i> Your message was sent successfully.
+                        </div>
+                    </div>
+                    <div class="col-12" v-show="contact.report.send_status == 'error'">
+                        <div class="alert alert-danger fade show" role="alert">
+                            <i class="fas fa-exclamation-circle" style="margin-right: 10px; font-size: 1.3em;">
+                            </i> There was an error sending your message. Please try again.
+                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" style="float: right;"></button>
+                        </div>
+                    </div>
+                </div>
+                <form @submit.prevent="send_report_message" class="dark-form" v-show="contact.report.send_status == ''">
+                    <div class="row">
+                        <div class="col-md-3">
+                            <label for="inputState" class="form-label">Topic</label>
+                            <select v-model="contact.report.topic" id="inputState" class="form-select">
+                            <option>General</option>
+                            <option>Games</option>
+                            <option>Website</option>
+                            </select>
+                        </div>
+                        <div class="col-md-6" v-show="contact.report.topic == 'Games'">
+                            <label for="inputState" class="form-label">Game</label>
+                            <select v-model="contact.report.game" id="inputState" class="form-select">
+                                <option>Grid Miner</option>
+                                <option>Max Raider</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="row" v-show="contact.report.topic == 'Games'">
+                        <div class="col-md-3 gy-3">
+                            <label for="inputState" class="form-label">Platform</label>
+                            <select v-model="contact.report.platform" id="inputState" class="form-select">
+                            <option>Windows</option>
+                            <option>Mac</option>
+                            <option>Linux</option>
+                            </select>
+                        </div>
+                        <!-- <div class="col-md-6 gy-3">
+                            <label for="inputName" class="form-label">Operating System</label>
+                            <input type="email" class="form-control" id="inputName" placeholder="ex: Windows 10">
+                        </div> -->
+                        <div class="col-md-3 gy-3">
+                            <label for="inputName" class="form-label">Game Version</label>
+                            <input v-model="contact.report.game_version" type="text" class="form-control" id="inputName" placeholder="ex: 1.0">
+                        </div>
+                        
+                    </div>
+                    <div class="row g-3">
+                        <div class="col-md-6 gy-5">
+                        <label for="inputName3" class="form-label">Name</label>
+                        <input type="name" v-model="contact.report.name"  class="form-control" id="inputName3">
+                        </div>
+                        <div class="col-md-6 gy-5">
+                            <label for="inputEmail3" class="form-label">Email</label>
+                            <input type="email" v-model="contact.report.email" class="form-control" id="inputEmail3">
+                        </div>
+                        <div class="col-12 gy-5">
+                        <label for="inputSubject" class="form-label">Subject</label>
+                        <input type="text" v-model="contact.report.subject" class="form-control" id="inputSubject" placeholder="Message title">
+                        </div>
+                        <div class="col-12">
+                        <label for="inputMessage3" class="form-label">Message</label>
+                        <textarea class="form-control" v-model="contact.report.message" id="inputMessage3" rows="6"></textarea>
+                        </div>
+                        
+                        <div class="col-12">
+                        <button type="submit" class="btn btn-secondary">
+                            Send Report
+                        </button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
     </div>
     <%- partial('_partial/links') %>
 </main>

themes/kairoscope-theme/layout/layout.ejs

@@ -8,6 +8,7 @@
     </div>
   </body>
   <script src="/js/vue.js"></script>
+  <script src="/js/bootstrap.bundle.js"></script>
   <%- partial('_partial/vue') %>
   <%- partial('_partial/tracker') %>
 </html>

themes/kairoscope-theme/source/css/style.styl

@@ -219,29 +219,29 @@ li {
     padding-left: 0px;
 }
 
-.newsletter input {
+.dark-form.newsletter input { font-size: 1.2em; }
+
+.dark-form input, .dark-form textarea, .dark-form select {
     background-color: #1b1b1b;
     color: white;
     border-color: #2d2d2d;
-    font-size: 1.2em;    
 }
 
-.newsletter input:focus {
+.dark-form input:focus, .dark-form textarea:focus, .dark-form select:focus {
     background-color: #1b1b1b;
     color: white;
-    border-color: #2d2d2d;
-    font-size: 1.2em;    
+    border-color: #2d2d2d;  
 }
 
-.newsletter input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+.dark-form input::placeholder, .dark-form textarea::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
   color: alt_color;
 }
 
-.newsletter input:-ms-input-placeholder { /* Internet Explorer 10-11 */
+.dark-form input:-ms-input-placeholder, .dark-form textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: alt_color;
 }
 
-.newsletter input::-ms-input-placeholder { /* Microsoft Edge */
+.dark-form input::-ms-input-placeholder, .dark-form textarea::-ms-input-placeholder { /* Microsoft Edge */
   color: alt_color;
 }
 
@@ -274,4 +274,17 @@ li {
 .image-box img {
     max-width: 100%;
     max-height: 75px;
+}
+
+.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
+    color: #fff;
+    background-color: #6c757d;
+}
+
+.nav-link { 
+    color: text_color; 
+    text-decoration: none;
+}
+.nav-link:hover { 
+    color: alt_color;
 }