Merge pull request #173 from zendesk/sunshine_apps_to_events_v2

Updating the notely apps to use Events API V2
zendesk · Jun 21, 2023 · 6393b40 · 6393b40
2 parents 399ed9e + 246171a
commit 6393b40
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 30 deletions.
diff --git a/v2/sunshine/.DS_Store b/v2/sunshine/.DS_Store
diff --git a/v2/sunshine/notely_app/README.md b/v2/sunshine/notely_app/README.md
@@ -1,6 +1,9 @@
 # Notely
 
-Notely is a sample Zendesk App that allows you to record note events using the Events API.
+Notely is a sample Zendesk App that allows agents to record events using the [Custom Events API](https://developer.zendesk.com/documentation/custom-data/events/about-the-events-api/).
+
+Events can be viewed in Interaction History in Agent Workspace. To learn more, see [Adding Sunshine user profiles and events to customer context in a ticket](https://support.zendesk.com/hc/en-us/articles/4408828663322)
+
 <img src="./images/screenshot.png" width="400">
 
 ## Table of Contents

diff --git a/v2/sunshine/notely_app/assets/ticket_sidebar.html b/v2/sunshine/notely_app/assets/ticket_sidebar.html
@@ -41,31 +41,45 @@
       client.get('currentUser.name').then(user => {
         // if the location is ticket_sidebar
         client.get('ticket.requester.id').then(ticket => {
-          var requesterId = String(ticket['ticket.requester.id']);
+          var userId = String(ticket['ticket.requester.id']);
           var author = String(user['currentUser.name']);
 
           var button = document.getElementById('submit')
 
           function recordActivity() {
             var note = document.getElementById('note');
             var type = document.getElementById('type');
-            var description = '[' + type.value + '] ' + note.value;
+            var description = '[' + type.value.charAt(0).toUpperCase() + type.value.slice(1) + '] ' + note.value;
 
             if (note.value === '') return;
 
             var settings = {
-              url: '/api/cdp/track',
+              url: '/api/v2/users/'+ userId + '/events',
               type: 'POST',
               dataType: 'json',
               contentType: 'application/json',
               data: JSON.stringify({
-                "user_id": requesterId,
-                "type": type.value,
-                "source": "notely",
-                "description": description,
-                "properties": {
-                  "author": author,
-                  "note": note.value,
+                "event": {
+                  "type": type.value,
+                  "source": "notely",
+                  "description": description,
+                  "properties": {
+                    "author": author,
+                    "note": note.value,
+                  }
+                },
+                "profile": {
+                  "source": "notely",
+                  "type": "user",
+                  "identifiers": [
+                    {
+                      "type": "user_id",
+                      "value": userId
+                    }
+                  ],
+                  "attributes": {
+                    "last_modified_by": author
+                  }
                 }
               })
             };

diff --git a/v2/sunshine/notely_app/assets/user_sidebar.html b/v2/sunshine/notely_app/assets/user_sidebar.html
@@ -41,31 +41,45 @@
       client.get('currentUser.name').then(user => {
         // if the location is user_sidebar
         client.get('user.id').then(userProfile => {
-          var profileId = String(userProfile['user.id']);
+          var userId = String(userProfile['user.id']);
           var author = String(user['currentUser.name']);
 
           var button = document.getElementById('submit')
 
           function recordActivity() {
             var note = document.getElementById('note');
             var type = document.getElementById('type');
-            var description = '[' + type.value + '] ' + note.value;
+            var description = '[' + type.value.charAt(0).toUpperCase() + type.value.slice(1) + '] ' + note.value;
 
             if (note.value === '') return;
 
             var settings = {
-              url: '/api/cdp/track',
+              url: '/api/v2/users/'+ userId + '/events',
               type: 'POST',
               dataType: 'json',
               contentType: 'application/json',
               data: JSON.stringify({
-                "user_id": profileId,
-                "type": type.value,
-                "source": "notely",
-                "description": description,
-                "properties": {
-                  "author": author,
-                  "note": note.value,
+                "event": {
+                  "type": type.value,
+                  "source": "notely",
+                  "description": description,
+                  "properties": {
+                    "author": author,
+                    "note": note.value
+                  }
+                },
+                "profile": {
+                  "source": "notely",
+                  "type": "user",
+                  "identifiers": [
+                    {
+                      "type": "user_id",
+                      "value": userId
+                    }
+                  ],
+                  "attributes": {
+                    "last_modified_by": author
+                  }
                 }
               })
             };

diff --git a/v2/sunshine/notely_timeline_app/README.md b/v2/sunshine/notely_timeline_app/README.md
@@ -3,4 +3,4 @@
 View a timeline of user notes with the ability to filter by note type.
 
 ### Screenshot(s):
-![screenshot](/images/screenshot.png)
+![screenshot](images/screenshot.png)
diff --git a/v2/sunshine/notely_timeline_app/assets/ticket_sidebar.html b/v2/sunshine/notely_timeline_app/assets/ticket_sidebar.html
@@ -61,16 +61,16 @@
       client.get('ticket.requester.id').then(ticket => {
 
         function fetchNotes() {
-          var requesterId = ticket['ticket.requester.id'];
+          var userId = ticket['ticket.requester.id'];
           var settings = {
-            url: '/api/cdp/events?user_id=' + requesterId,
+            url: '/api/v2/users/'+ userId + '/events?filter[source]=notely',
             type: 'GET',
             dataType: 'json',
           };
 
           client.request(settings).then(
             function(response) {
-              state.data = response.data.filter(event => event.type === 'call' || event.type === 'email' || event.type === 'event' || event.type === 'meeting' || event.type === 'note');
+              state.data = response.events;
               renderNotes(filter(state.data));
             },
             function(response) {
@@ -96,7 +96,10 @@
             header.classList.add('header');
             note.classList.add('note');
 
-            author.textContent = event.properties && event.properties.author || 'anonymous';
+            authorValue = event.properties && event.properties.author || 'anonymous';
+            typeValue = event.properties && event.type.charAt(0).toUpperCase() + event.type.slice(1) || '';
+
+            author.textContent = typeValue + " by " + authorValue
             note.textContent = event.properties && event.properties.note || '';
             timestamp.textContent = moment(event.created_at).fromNow() || 'n/a';
 

diff --git a/v2/sunshine/notely_timeline_app/assets/user_sidebar.html b/v2/sunshine/notely_timeline_app/assets/user_sidebar.html
@@ -61,16 +61,16 @@
       client.get('user.id').then(userProfile => {
 
         function fetchNotes() {
-          var profileId = userProfile['user.id'];
+          var userId = userProfile['user.id'];
           var settings = {
-            url: '/api/cdp/events?user_id=' + profileId,
+            url: '/api/v2/users/'+ userId + '/events?filter[source]=notely',
             type: 'GET',
             dataType: 'json',
           };
 
           client.request(settings).then(
             function(response) {
-              state.data = response.data.filter(event => event.type === 'call' || event.type === 'email' || event.type === 'event' || event.type === 'meeting' || event.type === 'note');
+              state.data = response.events;
               renderNotes(filter(state.data));
             },
             function(response) {
@@ -96,7 +96,10 @@
             header.classList.add('header');
             note.classList.add('note');
 
-            author.textContent = event.properties && event.properties.author || 'anonymous';
+            authorValue = event.properties && event.properties.author || 'anonymous';
+            typeValue = event.properties && event.type.charAt(0).toUpperCase() + event.type.slice(1) || '';
+
+            author.textContent = typeValue + " by " + authorValue
             note.textContent = event.properties && event.properties.note || '';
             timestamp.textContent = moment(event.created_at).fromNow() || 'n/a';
 

diff --git a/v2/sunshine/notely_timeline_app/images/screenshot.png b/v2/sunshine/notely_timeline_app/images/screenshot.png