Feature/call transcriptions

app/adapters/message.js

@@ -0,0 +1,71 @@
+import Ember from 'ember';
+import DS from 'ember-data';
+
+export default DS.RESTAdapter.extend({
+    findAll: function() {
+        return new Ember.RSVP.Promise(function (resolve) {
+            let data = JSON.parse(window.localStorage.getItem('messages'));
+
+            if(!data || data == "") {
+                data = {messages:[]};
+            }
+
+            resolve(data);
+        });
+    },
+    updateRecord: function(store, type, snapshot){
+        let currentMessages = JSON.parse(window.localStorage.getItem('messages'));
+        let record = store.serializerFor(type.modelName).serialize(snapshot);
+        record.id = snapshot.record.id;
+        if(currentMessages && currentMessages.messages){
+            for(let i=0; i < currentMessages.messages.length; i++){
+                if(currentMessages.messages[i].id == snapshot.record.id){
+                    currentMessages.messages[i] = record;
+                    break;
+                }
+            }
+            window.localStorage.setItem('messages', JSON.stringify(currentMessages));
+        }
+        return this.findAll();
+    },
+    createRecord: function(store, type, snapshot){
+        let record = this.serialize(snapshot);
+        record.id = '' + Date.now()+ Math.floor((Math.random() * 100) + 1);
+        return new Ember.RSVP.Promise(function (resolve) {
+            let data = JSON.parse(window.localStorage.getItem('messages'));
+            if(!data || data == "") {
+                data = {messages:[]};
+            }
+            data.messages.push(record);
+            window.localStorage.setItem('messages', JSON.stringify(data));
+            resolve({message:record});
+        });
+    },
+    deleteRecord: function(store, type, snapshot){
+      console.log(snapshot.id);
+        let currentMessages = JSON.parse(window.localStorage.getItem('messages'));
+        if(currentMessages && currentMessages.messages){
+            for(let i=0; i < currentMessages.messages.length; i++){
+                if(currentMessages.messages[i].id == snapshot.id){
+                    currentMessages.messages.removeObject(currentMessages.messages[i]);
+                    break;
+                }
+            }
+            window.localStorage.setItem('messages', JSON.stringify(currentMessages));
+        }
+        return this.findAll();
+    },
+    findRecord: function(store, type, id){
+        return new Ember.RSVP.Promise(function (resolve) {
+            let currentMessages = JSON.parse(window.localStorage.getItem('messages'));
+            if(currentMessages && currentMessages.messages){
+                for(let i=0; i < currentMessages.messages.length; i++){
+                    if(currentMessages.messages[i].id == id){
+                        resolve({message:currentMessages.messages[i]});
+                        break;
+                    }
+                }
+            }
+        });
+    }
+});

app/components/global-sidebar/template.hbs

@@ -3,7 +3,8 @@
     <p><span class='clickable' {{action 'navigate' 'users'}}><i class="fa fa-users "></i></span></p>
     <p><span class='clickable' {{action 'navigate' 'issues'}}><i class="fa fa-snapchat-ghost"></i></span></p>
     <p><span class='clickable' {{action 'navigate' 'activities'}}><i class="fa fa-clock-o "></i></span></p>
+    <p><span class='clickable' {{action 'navigate' 'transcript'}}><i class="fa fa-pencil "></i></span></p>
     <div class='bottom'>
         <p><span class='clickable' {{action 'togglePhone'}}><i class="fa fa-phone"></i></span></p>
     </div>
-</div>
+</div>

app/components/transcript-message/component.js

@@ -0,0 +1,13 @@
+import Component from '@ember/component';
+import Ember from 'ember';
+
+export default Component.extend({
+    formattedTime: Ember.computed('message', function () {
+        const date = new Date(this.get('message.time'));
+
+        return `${date.getHours()}:${(date.getMinutes() < 10 ? '0' : '')}${date.getMinutes()}:${date.getSeconds()}`;
+    }),
+})
+.reopenClass({
+  positionalParams: ['message'],
+});

app/components/transcript-message/style.less

@@ -0,0 +1,11 @@
+.message {
+    &__time {
+        font-size: 14px;
+        opacity: .7;
+    }
+
+    &__body {
+        font-size: 20px;
+        margin-top: 0;
+    }
+}

app/components/transcript-message/template.hbs

@@ -0,0 +1,4 @@
+<li class="message">
+    <span class="message__time">{{formattedTime}} - {{message.type}}</span>
+    <p class="message__body">{{message.body}}</p>
+</li>

app/controllers/transcript/overview.js

@@ -0,0 +1,53 @@
+import Controller from '@ember/controller';
+import Ember from 'ember';
+
+export default Controller.extend({
+    transcriptService: Ember.inject.service(),
+    ctiService: Ember.inject.service(),
+    savedMessages: [],
+    maxMessages: 5,
+    initialSet: false,
+    init: function () {
+        this._super(...arguments);
+
+        this.get('transcriptService').getMessages()
+            .then((data) => {
+                this.messages = data;
+            });
+
+        window.addEventListener('message', (event) => {
+          const data = JSON.parse(event.data);
+
+          if (data.type === 'chatUpdate') {
+              this.handleMessages(data.data, 'chat');
+          }
+      });
+    },
+    handleMessages(newMessages, type) {
+        // If multiple messages already exist, ie refreshing in the middle of a chat, send most recent
+        if (!this.initialSet && newMessages.length > 1) {
+            newMessages.filter((m) => m.role === 'customer').forEach((el) => {
+                el.type = type;
+                this.create(el);
+            });
+        } else {
+            // Just send the most recent message
+            const last = newMessages[newMessages.length - 1];
+
+            if (last.role === 'customer') {
+                last.type = type;
+                this.create(last);
+            }
+        }
+
+        if (!this.initialSet) {
+            this.initialSet = true;
+        }
+    },
+    create(message) {
+        if (!this.savedMessages.find((m) => m.body === message.body && m.type === message.type)) {
+            this.savedMessages.push(message);
+            this.get('transcriptService').createMessage(message);
+        }
+    },
+});

app/models/message.js

@@ -0,0 +1,7 @@
+import DS from 'ember-data';
+
+export default DS.Model.extend({
+    time: DS.attr('string'),
+    body: DS.attr('string'),
+    type: DS.attr('string'),
+});

app/router.js

@@ -23,6 +23,10 @@ Router.map(function() {
     this.route('overview', { path : '/'});
   });
 
+  this.route('transcript', { path: '/transcript' }, function() {
+    this.route('overview', { path : '/'});
+  });
+
   this.route('settings', { path: '/settings' });
 });
 

app/routes/transcript/overview.js

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+});

app/services/cti-service.js

@@ -37,7 +37,7 @@ export default Service.extend({
             let partnerName = this.get('ctiSettingsService.settings.frameworkName');
             return `https://apps.${region}/crm/${partnerName}/interaction.html`;
         }else{
-            return `https://apps.${region}/crm/interaction.html`; 
+            return `https://apps.${region}/crm/interaction.html`;
         }
     }),
     postSettings: function(){
@@ -58,7 +58,7 @@ export default Service.extend({
             customInteractionAttributes: this.get('ctiSettingsService.screenPopAttributes'),
             name: this.get('ctiSettingsService.settings.frameworkName'),
             clientIds:{}
-            
+
         }
         if(this.get('ctiSettingsService.settings.customTheme')){
             payload.settings.theme = {
@@ -110,7 +110,7 @@ export default Service.extend({
                         screenPopAttributes.forEach(element => {
                             attributeMapping[element] = message.data.interaction.attributes[element];
                         });
-                        
+
                         if(attributeMapping.mystery_type == 'user'){
                             this.get('router').transitionTo('users.view', attributeMapping.mystery_id );
                         }else if(attributeMapping.mystery_type == 'issue'){

app/services/transcript-service.js

@@ -0,0 +1,15 @@
+import Service from '@ember/service';
+import Ember from 'ember';
+
+export default Service.extend({
+    store: Ember.inject.service(),
+    init: function(){
+        this._super(...arguments);
+    },
+    getMessages: function () {
+        return this.get('store').findAll('message');
+    },
+    createMessage: function (message) {
+        this.get('store').createRecord('message', {body: message.body, time: message.time, type: message.type}).save();
+    },
+});

app/styles/app.less

@@ -45,7 +45,7 @@ body{
                     padding-right: 35px;
                 }
             }
-            
+
             .content {
                 margin-top: 30px;
                 margin-left: 35px;
@@ -75,6 +75,11 @@ body{
                     margin: 10px;
                 }
             }
+            .transcript {
+                &__list {
+                  list-style-type: none;
+                }
+            }
         }
     }
 }

app/templates/issues/overview.hbs

@@ -2,9 +2,9 @@
 <span class='add' {{action 'openAddIssue'}}><i class="fa fa-plus clickable"></i></span>
 <div class='issues base'>
     <div class='fixtable-container'>
-          {{fixtable-grid 
+          {{fixtable-grid
             tableClass='table-hover'
-            columns=columnDefs 
+            columns=columnDefs
             content=issues
             clicked=(action "clicked")
           }}
@@ -20,4 +20,4 @@
         {{input type="text" value=newIssue.description size="50" placeholder='Description'}}
     </div>
   </div>
-{{/generic-Modal}}
+{{/generic-Modal}}

app/templates/transcript/overview.hbs

@@ -0,0 +1,8 @@
+<h2 class="title">Most Recent Customer Messages</h2>
+<div class="transcript base">
+    <ul class="transcript__list">
+        {{#each messages as |message|}}
+            {{transcript-message message=message}}
+        {{/each}}
+    </ul>
+</div>