refactored app code and fixed functionality

app/scripts/app.js

@@ -1,11 +1,11 @@
-var client;
-let apiKey = 'wzGvV5YzPzuOCRBnQ09';
-
 init();
 
 async function init() {
   client = await app.initialized();
-  client.events.on('app.activated', function () { renderText('init')});
+
+  client.events.on('app.activated', function () {
+    renderText('init');
+  });
 }
 
 async function getInfo() {
@@ -27,17 +27,19 @@ async function getInfo() {
       status: 2,
       priority: 1,
       source: ticket.source,
-      attachments: ticket.attachments ? ticket.attachments.map(attachment => ({
-        name: attachment.name,
-        url: attachment.attachment_url,
-        size: attachment.size
-      })) : []
     };
 
+    if (ticket.attachments && ticket.attachments.length > 0) {
+      ticketInfo.attachments = ticket.attachments.map(attachment => ({
+        name: attachment.name,
+        url: attachment.attachment_url
+      }));
+    }
+
     return ticketInfo;
 
   } catch (error) {
-    renderText('<font color="#B21508">Error gathering ticket data:\n</font>' + error);
+    renderText(`<font color="#B21508">Error gathering ticket data:\n</font>${JSON.stringify(error)}`);
     throw error;
   }
 }
@@ -49,32 +51,24 @@ async function encodeAttachments(fileUrl) {
     const reader = new FileReader();
 
     return new Promise((resolve, reject) => {
-      reader.onloadend = () => resolve(reader.result, split(',')[1]);
+      reader.onloadend = () => {
+        const base64Data = reader.result.split(',')[1];
+        resolve(base64Data);
+      };
       reader.onerror = reject;
       reader.readAsDataURL(blob);
     });
   } catch (error) {
-    renderText('<font color="#B21508">Error encoding attachment data:</font>\n' + error);
+    renderText(`<font color="#B21508">Error encoding attachment data:</font>\n${JSON.stringify(error)}`);
     throw error;
   }
 }
 
 async function sendTicket(ticketInfo) {
   try {
-    const encodedAttachments = await Promise.all(
+    let encodedAttachments = [];
-      ticketInfo.attachments.map(async (att) => ({
-        name: att.name,
-        content: await encodeAttachments(att.url)
-      }))
-    )
 
-    const response = await fetch('https://cramalotsales.freshdesk.com/api/v2/tickets', {
+    const ticketRequestBody = {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': 'Basic ' + btoa(apiKey + ':X')
-      },
-      body: JSON.stringify({
       name: ticketInfo.name,
       email: ticketInfo.email,
       phone: ticketInfo.phone,
@@ -83,28 +77,44 @@ async function sendTicket(ticketInfo) {
       status: ticketInfo.status,
       priority: ticketInfo.priority,
       source: ticketInfo.source,
-        attachments: encodedAttachments
+    }
-      })
+
+    if (ticketInfo.attachments && ticketInfo.attchments.length > 0) {
+      encodedAttachments = await Promise.all(
+        ticketInfo.attachments.map(async (att) => ({
+          name: att.name,
+          content: await encodeAttachments(att.url)
+        }))
+      );
+    }
+
+    if (encodedAttachments.length > 0) {
+      ticketRequestBody = encodedAttachments;
+    }
+
+    const response = await client.request.invokeTemplate("createTicket", {
+      body: JSON.stringify(ticketRequestBody)
     });
 
-    if (response.ok) {
+    if (response.status === 201) {
-      console.log('Ticket successfully transferred:', response.status, response.statusText);
       renderText('success');
     } else {
-      renderText('Ticket creation refused by server:\n', response.status, response.statusText);
+      renderText(`<font color="#B21508">Ticket creation refused by server:</font>\n ${response.status} ${response.response}`);
     }
+
   } catch (error) {
-    renderText('<font color="#B21508">Error sending ticket:</font>\n'+ error);
+    renderText(`<font color="#B21508">Error sending ticket:</font>\n${JSON.stringify(error)}`);
     throw error;
   }
 }
 
+
 async function sendTicketHandler() {
   try {
     const ticketInfo = await getInfo();
     await sendTicket(ticketInfo);
   } catch {
-    renderText('<font color="#B21508">Error sending ticket:</font>\n'+ error);
+    renderText('<font color="#B21508">Error sending ticket:</font>\n' + JSON.strigity(error));
     throw error;
   }
 }
@@ -113,11 +123,11 @@ async function renderText(status) {
   const textElement = document.getElementById('apptext');
 
   if (status === 'init') {
-    textElement.innerHTML = '<p>Ticket Ready to be Transferred</p><br><button onclick="sendTicketHandler()">Transfer</button>';
+    textElement.innerHTML = '<p>Ticket Ready to be Transferred\n</p><br><button onclick="sendTicketHandler()">Transfer</button>';
   } else if (status === 'success') {
     textElement.innerHTML = '<p><font color="#9900FF">Ticket Transfer Successful!</font></p>';
   } else {
-    textElement.innerHtml = status;
+    textElement.innerHTML = status;
   }
 }
 /*

config/requests.json

@@ -0,0 +1,13 @@
+{
+  "createTicket": {
+    "schema": {
+      "method": "POST",
+      "host": "cramalotsales.freshdesk.com",
+      "path": "/api/v2/tickets",
+      "headers": {
+        "Authorization": "Basic d3pHdlY1WXpQenVPQ1JCblEwOTpY",
+        "Content-Type": "application/json"
+      }
+    }
+  }
+}

manifest.json

@@ -7,6 +7,9 @@
           "url": "index.html",
           "icon": "styles/images/icon.svg"
         }
+      },
+      "requests": {
+        "createTicket": {}
       }
     }
   },