@tiledesk/tiledesk-whatsapp-connector 0.1.33 → 0.1.34

package/index.js

@@ -11,7 +11,7 @@ const { v4: uuidv4 } = require('uuid');
 const cors = require('cors');
 
 // tiledesk clients
-const { TiledeskClient } = require('@tiledesk/tiledesk-client');
+//const { TiledeskClient } = require('@tiledesk/tiledesk-client');
 const { TiledeskWhatsappTranslator } = require('./tiledesk/TiledeskWhatsappTranslator');
 const { TiledeskSubscriptionClient } = require('./tiledesk/TiledeskSubscriptionClient');
 const { TiledeskWhatsapp } = require('./tiledesk/TiledeskWhatsapp');
@@ -21,9 +21,9 @@ const { MessageHandler } = require('./tiledesk/MessageHandler');
 const { TiledeskBotTester } = require('./tiledesk/TiledeskBotTester');
 
 // mongo
-const { KVBaseMongo } = require('@tiledesk/tiledesk-kvbasemongo');
+const { KVBaseMongo } = require('./tiledesk/KVBaseMongo');
 const kvbase_collection = 'kvstore';
-const db = new KVBaseMongo(kvbase_collection);
+const db = new KVBaseMongo({KVBASE_COLLECTION: kvbase_collection, log: false});
 
 // redis
 var redis = require('redis')
@@ -43,6 +43,15 @@ let REDIS_PORT = null;
 let REDIS_PASSWORD = null;
 let log = false;
 
+// Handlebars register helpers
+handlebars.registerHelper('isEqual', (a, b) => {
+  if (a == b) {
+    return true
+  } else {
+    return false
+  }
+})
+
 router.get('/', async (req, res) => {
   res.send('Welcome to Tiledesk-WhatsApp Business connector!')
 })
@@ -183,6 +192,13 @@ router.get('/configure', async (req, res) => {
     console.log("(whatsapp) kvdb settings: ", settings);
   }
 
+  // get departments
+  const tdChannel = new TiledeskChannel({ settings: { project_id: projectId, token: token }, API_URL: API_URL })
+  let departments = await tdChannel.getDepartments(token);
+  if (log) {
+    console.log("departments: ", JSON.stringify(departments))
+  }
+
   if (settings) {
 
     readHTMLFile('/configure.html', (err, html) => {
@@ -199,6 +215,8 @@ router.get('/configure', async (req, res) => {
         wab_token: settings.wab_token,
         verify_token: settings.verify_token,
         subscription_id: settings.subscriptionId,
+        department_id: settings.department_id,
+        departments: departments
       }
       var html = template(replacements);
       res.send(html);
@@ -219,6 +237,7 @@ router.get('/configure', async (req, res) => {
         project_id: projectId,
         token: token,
         proxy_url: proxy_url,
+        departments: departments
       }
       var html = template(replacements);
       res.send(html);
@@ -229,24 +248,33 @@ router.get('/configure', async (req, res) => {
 
 router.post('/update', async (req, res) => {
   console.log("\n(whatsapp) /update");
-  if (log) {
     console.log("(whatsapp) /update body: ", req.body);
+  if (log) {
   }
 
   let projectId = req.body.project_id;
   let token = req.body.token;
   let wab_token = req.body.wab_token;
   let verify_token = req.body.verify_token;
+  let department_id = req.body.department;
 
   let CONTENT_KEY = "whatsapp-" + projectId;
   let settings = await db.get(CONTENT_KEY);
 
   let proxy_url = BASE_URL + "/webhook/" + projectId;
 
+  // get departments
+  const tdChannel = new TiledeskChannel({ settings: { project_id: projectId, token: token }, API_URL: API_URL })
+  let departments = await tdChannel.getDepartments(token);
+  if (log) {
+    console.log("departments: ", JSON.stringify(departments))
+  }
+
   if (settings) {
 
     settings.wab_token = wab_token;
     settings.verify_token = verify_token;
+    settings.department_id = department_id;
 
     await db.set(CONTENT_KEY, settings);
 
@@ -265,6 +293,8 @@ router.post('/update', async (req, res) => {
         show_success_modal: true,
         verify_token: settings.verify_token,
         subscription_id: settings.subscriptionId,
+        department_id: settings.department_id,
+        departments: departments
       }
       var html = template(replacements);
       res.send(html);
@@ -301,6 +331,7 @@ router.post('/update', async (req, res) => {
         secret: subscription.secret,
         wab_token: wab_token,
         verify_token: verify_token,
+        department_id: department_id
       }
 
       db.set(CONTENT_KEY, settings)
@@ -321,6 +352,8 @@ router.post('/update', async (req, res) => {
           wab_token: settings.wab_token,
           verify_token: settings.verify_token,
           subscription_id: settings.subscriptionId,
+          department_id: settings.department_id,
+          departments: departments
         }
         var html = template(replacements);
         res.send(html);
@@ -339,6 +372,7 @@ router.post('/update', async (req, res) => {
           project_id: projectId,
           token: token,
           proxy_url: proxy_url,
+          departments: departments,
           show_error_modal: true
         }
         var html = template(replacements);
@@ -367,6 +401,12 @@ router.post('/disconnect', async (req, res) => {
   let proxy_url = BASE_URL + "/webhook/" + projectId;
 
   const tdClient = new TiledeskSubscriptionClient({ API_URL: API_URL, project_id: projectId, token: token, log: false })
+  // get departments
+  const tdChannel = new TiledeskChannel({ settings: { project_id: projectId, token: token }, API_URL: API_URL })
+  let departments = await tdChannel.getDepartments(token);
+  if (log) {
+    console.log("departments: ", JSON.stringify(departments))
+  }
 
   /*
   // callback
@@ -389,6 +429,7 @@ router.post('/disconnect', async (req, res) => {
         project_id: projectId,
         token: token,
         proxy_url: proxy_url,
+        departments: departments
       }
       var html = template(replacements);
       res.send(html);
@@ -402,8 +443,8 @@ router.post('/disconnect', async (req, res) => {
 
 router.post('/tiledesk', async (req, res) => {
   console.log("\n(whatsapp) /tiledesk")
+  console.log("(whatsapp) /tiledesk ---> tiledeskChannelMessage: " + JSON.stringify(req.body.payload));
   if (log) {
-    console.log("(whatsapp) /tiledesk ---> tiledeskChannelMessage: " + JSON.stringify(req.body.payload));
   }
 
   var tiledeskChannelMessage = req.body.payload;
@@ -680,7 +721,7 @@ router.post("/webhook/:project_id", async (req, res) => {
         }
 
         console.log("🟠 tiledeskJsonMessage: ", JSON.stringify(tiledeskJsonMessage));
-        const response = await tdChannel.send(tiledeskJsonMessage, message_info);
+        const response = await tdChannel.send(tiledeskJsonMessage, message_info, settings.department_id);
         if (log) {
           console.log("(whatsapp) /whatsapp Send response: ", response)
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tiledesk/tiledesk-whatsapp-connector",
-  "version": "0.1.33",
+  "version": "0.1.34",
   "description": "Tiledesk Whatsapp connector",
   "main": "index.js",
   "scripts": {
@@ -12,7 +12,6 @@
   "license": "MIT",
   "dependencies": {
     "@tiledesk/tiledesk-client": "^0.8.29",
-    "@tiledesk/tiledesk-kvbasemongo": "^1.0.0",
     "app-root-path": "^3.0.0",
     "axios": "^0.27.2",
     "body-parser": "^1.20.0",

package/template/configure.html

@@ -201,9 +201,54 @@
               </div>
             </div>
 
+            <!-- Departments -->
+            <div class="form-group" style="width: 522px;">
+              <label class="input-label" for="department">Department <span style="font-weight: normal;">(Optional)</span></label>
+
+
+
+
+
+              <!--
+              <div class="dep-container">
+                {{#each departments}}
+
+                  {{#if (isEqual _id department_id)}}
+                    <div class="selected-department-div" onclick="submitInputSelected.click()">
+                      <img class="tick-image" src="https://static.vecteezy.com/system/resources/previews/010/152/436/original/tick-check-mark-icon-sign-symbol-design-free-png.png" width="18" height="auto">
+                      {{ name }}
+                    </div>
+                  {{else}}
+                    <div class="department-div">
+                      {{ name }}
+                    </div>
+                  {{/if}}
+                {{/each}}
+              </div>
+              -->
+
+              <div style="display: flex; flex-direction: row; align-items: center;">
+                <select class="custom-select" name="department" class="form-control">
+                {{#each departments}}
+                  {{#if (isEqual _id ../department_id)}}
+                  <option value="{{ _id }}" selected>{{ name }}</option>
+                  {{else}}
+                  <option value="{{ _id }}">{{ name }}</option>
+                  {{/if}}
+                {{/each}}
+                </select>
+                <span style="margin-left: 10px;">
+                <i class="fa fa-question-circle custom-tooltip">
+                  <span class="custom-tooltiptext">Select the department where you want to open conversations coming from WhatsApp. Conversations are sent on the Default Department by default.</span>
+                </i>
+              </span>
+              </div>
+
+            </div>
+
             <input type="hidden" name="project_id" value="{{ project_id }}" />
             <input type="hidden" name="token" value="{{ token }}" />
-
+            
             {{#if wab_token}}
               <div style="width: 500px; text-align: right;">
                 <input type="submit" class="btn" style="width: 200px; background-color: #0ba2dc; color: white; font-weight: 500;" value="Update">

package/template/css/configure.css

@@ -142,14 +142,35 @@ ul {
 
 .custom-input {
   height: 45px;
-  border: solid 2px #d8d8d8;
+  box-shadow: 0px 0px 7px 0px #bdbdbd;
+  border: solid 2px transparent;
+  border-radius: 6px;
 }
 
 .custom-input:hover {
   border-color: #0ba2dc;
+  box-shadow: 0 0 transparent;
 }
 
 .custom-input:focus {
+  border: solid 2px;
+  border-color: #0ba2dc;
+}
+
+.custom-select{
+  width: 100%;
+  height: 45px;
+  box-shadow: 0px 0px 7px 0px #bdbdbd;
+  border: solid 2px transparent;
+  border-radius: 6px;
+}
+
+.custom-select:hover {
+  box-shadow: 0 0 transparent;
+  border-color: #0ba2dc;
+}
+
+.custom-select:focus {
   border-color: #0ba2dc;
 }
 
@@ -359,4 +380,42 @@ ul {
   border-color: #929292;
   background-color: #929292;
   letter-spacing: 0.5px;
-}
+}
+
+.dep-container {
+  display: flex;
+  flex-direction: row;
+  width: 700px;
+}
+
+.department-div {
+  cursor: pointer;
+  height: 40px;
+  background-color: #ececec;
+  border: solid 2px #ececec;
+  border-radius: 6px;
+  margin-right: 10px;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.department-div:hover {
+  background-color: #fff;
+  border: solid 2px #0ba2dc;
+}
+
+.selected-department-div {
+  cursor: pointer;
+  height: 40px;
+  background-color: #fff;
+  border: solid 2px #0ba2dc;
+  border-radius: 6px;
+  margin-right: 10px;
+  padding: 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-evenly;
+  /*justify-content: center;*/
+}

package/template/detail.html

@@ -190,6 +190,15 @@
 
     <p style="font-size: 18px;"><b>What's new?</b></p>
 
+      <div style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 15px;">
+        <div>
+          <p style="margin-bottom: 0px">Added possibility to select a department for Whatsapp conversations.</p>
+          <p style="margin-bottom: 0px">Bug fixes and minor improvements</p>
+          <!--<p>Bug fixes and performance improvements</p>-->
+        </div>
+        <p style="font-size: 12px; color: #676767; margin-bottom: 0px;">Version <b>0.1.34</b></p>
+      </div>
+
       <div style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 15px;">
       <div>
         <p style="margin-bottom: 0px">Bug Fixes</p>
@@ -208,15 +217,6 @@
       <p style="font-size: 12px; color: #676767; margin-bottom: 0px;">Version <b>0.1.24</b></p>
     </div>
 
-    <div style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 15px;">
-      <div>
-        <p style="margin-bottom: 0px">Bug Fixes</p>
-        <!--<p>Bug fixes and performance improvements</p>-->
-      </div>
-      <p style="font-size: 12px; color: #676767; margin-bottom: 0px;">Version <b>0.1.23</b></p>
-    </div>
-
-
     <hr style="margin-top: 50px; margin-bottom: 20px">
   
 </body>

package/tiledesk/KVBaseMongo.js

@@ -0,0 +1,96 @@
+const mongodb = require("mongodb");
+
+class KVBaseMongo {
+
+  /**
+   * Constructor for KVBaseMongo object
+   *
+   * @example
+   * const { KVBaseMongo } = require('./KVBaseMongo');
+   * let db = new KVBaseMongo("kvstore");
+   * 
+   * @param {KVBASE_COLLECTION} The name of the Mongodb collection used as key-value store. Mandatory.
+   */
+  constructor(config) {
+    if (!config.KVBASE_COLLECTION) {
+      throw new Error('KVBASE_COLLECTION (the name of the Mongodb collection used as key-value store) is mandatory.');
+    }
+    this.KV_COLLECTION = config.KVBASE_COLLECTION;
+
+    this.log = false;
+    if (config.log) {
+      this.log = config.log;
+    }
+  }
+
+  connect(MONGODB_URI, callback) {
+    mongodb.MongoClient.connect(MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true }, (err, client) => {
+      if (err) {
+        console.log(err);
+        process.exit(1);
+      } else {
+        this.db = client.db();
+        this.db.collection(this.KV_COLLECTION).createIndex(
+          { "key": 1 }, { unique: true }
+        );
+        callback();
+      }
+    });
+  }
+
+  set(k, v) {
+    return new Promise(resolve => {
+      //this.db.set(k, v).then(() => {resolve();});
+      this.db.collection(this.KV_COLLECTION).updateOne({key: k}, { $set: { value: v, key: k } }, { upsert: true }, function(err, doc) {
+        if (err) {
+          reject(err);
+        }
+        else {
+          resolve();
+        }
+      });
+    });
+  }
+
+  get(k) {
+    return new Promise(resolve => {
+      //this.db.get(k).then(value => {resolve(value)});
+      if (this.log) {
+        console.log("Searching on ", this.db)
+      }
+      console.log("Searching on Collection", this.KV_COLLECTION)
+      
+      this.db.collection(this.KV_COLLECTION).findOne({ key: k }, function(err, doc) {
+        if (err) {
+          console.error("Error reading mongodb value", err);
+          reject(err);
+        }
+        else {
+          if (doc) {
+            console.log("Doc found with key -->", doc.key);
+            resolve(doc.value);
+          }
+          else {
+            console.log("No Doc found!");
+            resolve(null);
+          }
+        }
+      });
+    });
+  }
+
+  remove(k) {
+    return new Promise(resolve => {
+      this.db.collection(this.KV_COLLECTION).deleteOne({key: k}, function(err) {
+        if (err) {
+          reject(err);
+        }
+        else {
+          resolve();
+        }
+      });
+    });
+  }
+}
+
+module.exports = { KVBaseMongo };

package/tiledesk/TiledeskChannel.js

@@ -42,11 +42,15 @@ class TiledeskChannel {
 
   }
 
-  async send(tiledeskMessage, messageInfo) {
+  async send(tiledeskMessage, messageInfo, department_id) {
 
     let channel;
     let new_request_id;
 
+    if (department_id) {
+      tiledeskMessage.departmentid = department_id;
+    }
+
     if (messageInfo.channel == "whatsapp") {
       channel = messageInfo.whatsapp;
       new_request_id = "support-group-" + this.settings.project_id + "-" + uuidv4().substring(0, 8) + "-wab-" + channel.phone_number_id + "-" + channel.from;
@@ -143,6 +147,28 @@ class TiledeskChannel {
     })
   }
 
+
+  async getDepartments() {
+
+    console.log("[Tiledesk Channel] getDepartments");
+
+    return await axios({
+      url: this.API_URL + "/" + this.settings.project_id + "/departments/allstatus",
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': this.settings.token 
+      },
+      method: 'GET'
+    }).then((response) => {
+      if (this.log) {
+        console.log("\nget departments response.data: ", response.data)
+      }
+      return response.data;
+    }).catch((err) => {
+      console.error("\nget departments error: ", err);
+    })
+  }
+
   async sendAndAddBot(tiledeskMessage, messageInfo, bot_id) {
     
     let channel;
@@ -181,7 +207,6 @@ class TiledeskChannel {
 
       return axios({
         url: this.API_URL + `/${this.settings.project_id}/requests/${new_request_id}/messages`,
-        //url: this.API_URL + `/${this.settings.project_id}/requests/${new_request_id}/participants`,
         headers: {
           'Content-Type': 'application/json',
           'Authorization': token
@@ -190,23 +215,6 @@ class TiledeskChannel {
         method: 'POST'
       }).then((response) => {
         return response.data
-
-        /*
-        return axios({
-          url: this.API_URL + `/${this.settings.project_id}/requests/${new_request_id}/participants`,
-          headers: {
-            'Content-Type': 'application/json',
-            'Authorization': token
-          },
-          data: { member: bot_id },
-          method: 'POST'
-        }).then((response) => {
-          console.log("response: ", response.data)
-          return response.data
-        }).catch((err) => {
-          console.error("[Tiledesk Channel ERROR] add participant: ", err);
-        })
-        */
       }).catch((err) => {
         console.error("[Tiledesk Channel ERROR] send message (open conversation): " + err);
       })

package/tiledesk/TiledeskSubscriptionClient.js

@@ -127,7 +127,7 @@ class TiledeskSubscriptionClient {
         }
       }
     }).catch((err) => {
-      console.error("An error occured: ", err);
+      //console.error("An error occured: ", err);
       if (callback) {
         callback(err, null, null);
       }