@tiledesk/tiledesk-whatsapp-connector 0.1.42 → 0.1.44

package/index.js

@@ -10,6 +10,7 @@ const pjson = require('./package.json');
 const { v4: uuidv4 } = require('uuid');
 const cors = require('cors');
 var winston = require('./winston');
+const url = require('url');
 
 // tiledesk clients
 //const { TiledeskClient } = require('@tiledesk/tiledesk-client');
@@ -65,12 +66,16 @@ router.get('/detail', async (req, res) => {
 
   winston.verbose("(wab) /detail")
 
-  let projectId = req.query.project_id;
+  let project_id = req.query.project_id;
   let token = req.query.token;
   let app_id = req.query.app_id;
 
+  const tdChannel = new TiledeskChannel({ settings: { project_id: project_id, token: token }, API_URL: API_URL })
+  let isAvailable = await tdChannel.getProjectDetail();
+  winston.debug("(wab) app is available: ", isAvailable);
+
   const appClient = new TiledeskAppsClient({ APPS_API_URL: APPS_API_URL });
-  let installation = await appClient.getInstallations(projectId, app_id);
+  let installation = await appClient.getInstallations(project_id, app_id);
 
   let installed = false;
   if (installation) {
@@ -81,10 +86,11 @@ router.get('/detail', async (req, res) => {
     var template = handlebars.compile(html);
     var replacements = {
       app_version: pjson.version,
-      project_id: projectId,
+      project_id: project_id,
       token: token,
       app_id: app_id,
-      installed: installed
+      installed: installed,
+      isAvailable: isAvailable
     }
     var html = template(replacements);
     res.send(html);
@@ -110,20 +116,14 @@ router.post('/install', async (req, res) => {
   appClient.install(installation_info).then((installation) => {
     winston.debug("(wab) installation response: " + installation);
 
-    let installed = true;
-
-    readHTMLFile('/detail.html', (err, html) => {
-      var template = handlebars.compile(html);
-      var replacements = {
-        app_version: pjson.version,
-        project_id: project_id,
-        token: token,
-        app_id: app_id,
-        installed: installed
+    res.redirect(url.format({
+      pathname: "/detail",
+      query: {
+        "project_id": project_id,
+        "app_id": app_id,
+        "token": token
       }
-      var html = template(replacements);
-      res.send(html);
-    })
+    }));
 
   }).catch((err) => {
     winston.error("(wab) installation error: " + err.data)
@@ -144,20 +144,14 @@ router.post('/uninstall', async (req, res) => {
 
     winston.debug("(wab) uninstallation response: " + response);
 
-    let installed = false;
-
-    readHTMLFile('/detail.html', (err, html) => {
-      var template = handlebars.compile(html);
-      var replacements = {
-        app_version: pjson.version,
-        project_id: project_id,
-        token: token,
-        app_id: app_id,
-        installed: installed
+    res.redirect(url.format({
+      pathname: "/detail",
+      query: {
+        "project_id": project_id,
+        "app_id": app_id,
+        "token": token
       }
-      var html = template(replacements);
-      res.send(html);
-    })
+    }));
 
   }).catch((err) => {
     winston.error("(wab) uninsallation error: " + err.data)
@@ -169,65 +163,79 @@ router.get('/configure', async (req, res) => {
 
   winston.verbose("(wab) /configure");
 
-  let projectId = "";
-  let token = "";
-
-  projectId = req.query.project_id;
-  token = req.query.token;
-
-  let proxy_url = BASE_URL + "/webhook/" + projectId;
-
-  let CONTENT_KEY = "whatsapp-" + projectId;
-
-  let settings = await db.get(CONTENT_KEY);
-  winston.debug("(wab) settings: " + settings);
-
-  // get departments
-  const tdChannel = new TiledeskChannel({ settings: { project_id: projectId, token: token }, API_URL: API_URL })
-  let departments = await tdChannel.getDepartments(token);
-  winston.debug("(wab) found " + departments.length + " departments")
-
-  if (settings) {
+  let project_id = req.query.project_id;
+  let token = req.query.token;
 
-    readHTMLFile('/configure.html', (err, html) => {
+  if (!project_id || !token) {
+    let error_message = "Query params project_id and token are required."
+    readHTMLFile('/error.html', (err, html) => {
       var template = handlebars.compile(html);
+
       var replacements = {
         app_version: pjson.version,
-        project_id: projectId,
-        token: token,
-        proxy_url: proxy_url,
-        wab_token: settings.wab_token,
-        verify_token: settings.verify_token,
-        subscription_id: settings.subscriptionId,
-        department_id: settings.department_id,
-        departments: departments
+        error_message: error_message
       }
       var html = template(replacements);
-      res.send(html);
-
+      return res.send(html);
     })
 
   } else {
 
-    readHTMLFile('/configure.html', (err, html) => {
+    let proxy_url = BASE_URL + "/webhook/" + project_id;
 
-      if (err) {
-        winston.error("(wab) error read html file: " + err);
-      }
+    let CONTENT_KEY = "whatsapp-" + project_id;
 
-      var template = handlebars.compile(html);
-      var replacements = {
-        app_version: pjson.version,
-        project_id: projectId,
-        token: token,
-        proxy_url: proxy_url,
-        departments: departments
-      }
-      var html = template(replacements);
-      res.send(html);
+    let settings = await db.get(CONTENT_KEY);
+    winston.debug("(wab) settings: " + settings);
 
-    })
+    // get departments
+    const tdChannel = new TiledeskChannel({ settings: { project_id: project_id, token: token }, API_URL: API_URL })
+    let departments = await tdChannel.getDepartments(token);
+    winston.debug("(wab) found " + departments.length + " departments")
+
+    if (settings) {
+
+      readHTMLFile('/configure.html', (err, html) => {
+        var template = handlebars.compile(html);
+        var replacements = {
+          app_version: pjson.version,
+          project_id: project_id,
+          token: token,
+          proxy_url: proxy_url,
+          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);
+
+      })
+
+    } else {
+
+      readHTMLFile('/configure.html', (err, html) => {
+
+        if (err) {
+          winston.error("(wab) error read html file: " + err);
+        }
+
+        var template = handlebars.compile(html);
+        var replacements = {
+          app_version: pjson.version,
+          project_id: project_id,
+          token: token,
+          proxy_url: proxy_url,
+          departments: departments
+        }
+        var html = template(replacements);
+        res.send(html);
+
+      })
+    }
   }
+
 })
 
 router.post('/update', async (req, res) => {
@@ -535,7 +543,7 @@ router.post("/webhook/:project_id", async (req, res) => {
     ) {
 
       if (req.body.entry[0].changes[0].value.messages[0].type == "system") {
-        winston.verbos("(wab) Skip system message")
+        winston.verbose("(wab) Skip system message")
         return res.sendStatus(200);
       }
 
@@ -756,32 +764,37 @@ async function startApp(settings, callback) {
   winston.info("(wab) Starting Whatsapp App")
 
   if (!settings.MONGODB_URL) {
-    throw new Error("settings.MONGODB_URL is mandatory");
+    winston.error("(wab) MONGODB_URL is mandatory. Exit...");
+    return callback('Missing parameter: MONGODB_URL');
   }
 
   if (!settings.API_URL) {
-    throw new Error("settings.API_URL is mandatory");
+    winston.error("(wab) API_URL is mandatory. Exit...");
+    return callback('Missing parameter: API_URL');
   } else {
     API_URL = settings.API_URL;
     winston.info("(wab) API_URL: " + API_URL);
   }
 
   if (!settings.BASE_URL) {
-    throw new Error("settings.BASE_URL is mandatory");
+    winston.error("(wab) BASE_URL is mandatory. Exit...");
+    return callback('Missing parameter: BASE_URL');
   } else {
     BASE_URL = settings.BASE_URL;
     winston.info("(wab) BASE_URL: " + BASE_URL);
   }
 
   if (!settings.GRAPH_URL) {
-    throw new Error("settings.GRAPH_URL is mandatory");
+    winston.error("(wab) GRAPH_URL is mandatory. Exit...");
+    return callback('Missing parameter: GRAPH_URL');
   } else {
     GRAPH_URL = settings.GRAPH_URL;
     winston.info("(wab) GRAPH_URL: " + GRAPH_URL);
   }
 
   if (!settings.APPS_API_URL) {
-    throw new Error("settings.APPS_API_URL is mandatory");
+    winston.error("(wab) APPS_API_URL is mandatory. Exit...");
+    return callback('Missing parameter: APPS_API_URL');
   } else {
     APPS_API_URL = settings.APPS_API_URL;
     winston.info("(wab) APPS_API_URL: " + APPS_API_URL);
@@ -800,7 +813,7 @@ async function startApp(settings, callback) {
     winston.info("(wab) KVBaseMongo successfully connected.");
 
     if (callback) {
-      callback();
+      callback(null);
     }
   })
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tiledesk/tiledesk-whatsapp-connector",
-  "version": "0.1.42",
+  "version": "0.1.44",
   "description": "Tiledesk Whatsapp connector",
   "main": "index.js",
   "scripts": {

package/template/configure.html

@@ -67,7 +67,7 @@
     <div class="header-content">
       <div class="logo-title">
         <div class="logo-container">
-          <img src="https://www.clipartmax.com/png/full/205-2058823_whatsapp-ios-icon-whatsapp-ios-icon-png.png" width="60px" height="60px">
+          <img src="https://user-images.githubusercontent.com/45603238/200829081-e6a9c7a0-9d8c-431c-a477-4880a8fd752f.png" width="60px" height="60px">
         </div>
         <div class="title-version">
           <p class="title">WhatsApp Business Connector</p>
@@ -300,6 +300,6 @@
         console.error('Async: Could not copy text: ', err);
       }
     }
-</script>
+  </script>
   
 </body>

package/template/css/detail.css

@@ -211,3 +211,25 @@ div.scrollmenu a:hover {
 .btn:focus {
   outline: none !important;
 }
+
+.plans-div {
+  display: flex;
+  flex-direction: row;
+}
+
+.plan {
+  margin-right: 6px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 11px;
+}
+
+.scale-plan {
+  background-color: #eb459e;
+  color: white;
+}
+
+.plus-plan {
+  background-color: #5865f2;
+  color: white;
+}

package/template/css/error.css

@@ -0,0 +1,67 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+
+body {
+  padding: 20px 0px;
+}
+
+.header {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.header-content {
+  width: 50%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logo-title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.title {
+  margin-bottom: 0px;
+  font-size: 22px;
+}
+
+.title-version {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.logo-container {
+  margin: 0px 20px 0px 0px;
+}
+
+.logo-title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.error {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: 60px;
+}
+
+.error-box {
+  width: 50%;
+  background-color: #f79a9a;
+  min-height: 100px;
+  border-radius: 8px;
+  padding: 10px 10px;
+}
+
+.error-title {
+  font-size: 18px;
+  font-weight: 500;
+}

package/template/detail.html

@@ -42,7 +42,11 @@
     <hr style="margin-top: 10px; margin-bottom: 10px">
     
     <div class="installation-info-box">
+      {{#if isAvailable}}
       <p style="margin: 0px; color: #676767; font-size: 13px;">You can install this application for free.</p>
+      {{else}}
+      <p style="margin: 0px; color: #676767; font-size: 13px;">This app is available for Scale and Plus plans</p>
+      {{/if}}
     </div>
 
 
@@ -56,19 +60,32 @@
           <p style="font-size: 26px; font-weight: 500; margin-bottom: 0px;">WhatsApp Business</p>
           <p style="color: #676767; font-size: 16px; margin-bottom: 5px;">Connect your WhatsApp number with Tiledesk</p>
           <a style="font-size: 18px;" href="https://tiledesk.com/" target="_blank">Tiledesk</a>
-          <p style="font-size: 15px; color: #676767; font-style: italic; margin-bottom: 0px; margin-top: 20px;">Free</p>
+          {{#if isAvailable}}
+            <p style="font-size: 15px; color: #676767; font-style: italic; margin-bottom: 0px; margin-top: 20px;">Free</p>
+          {{else}}
+            <p style="font-size: 15px; color: #676767; font-style: italic; margin-bottom: 0px; margin-top: 20px;">Free for</p>
+            <div class="plans-div">
+              <div class="plan scale-plan">Scale Plan</div>
+              <div class="plan plus-plan">Plus Plan</div>
+            </div>
+          {{/if}}
         </div>
 
         <div style="display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end;">
           
           {{#if installed}}
+
             <!-- Open button -->
+            {{#if isAvailable}}
             <form action="./configure" method="get">
               <input type="hidden" name="project_id" value="{{ project_id }}" />
               <input type="hidden" name="app_id" value="{{ app_id }}" />
               <input type="hidden" name="token" value="{{ token }}" />
               <input type="submit" class="btn install-button" value="Open">
             </form>
+            {{else}}
+            <button class="btn install-button" disabled>Open</button>
+            {{/if}}
   
             <!-- Uninstall button -->
             <button class="btn uninstall-button" onclick="document.getElementById('uninstall-modal').style.display='flex'">Uninstall</button>
@@ -97,7 +114,13 @@
             </div>
             
           {{else}}
-            <button class="btn install-button" onclick="document.getElementById('install-modal').style.display='flex'">Install</button>
+
+            {{#if isAvailable}}
+              <button class="btn install-button" onclick="document.getElementById('install-modal').style.display='flex'">Install</button>
+            {{else}}
+              <button class="btn install-button" disabled>Install</button>
+            {{/if}}
+          
             <!-- Install modal -->
             <div id="install-modal" class="modal">
               <div class="modal-content">
@@ -184,22 +207,22 @@
           </div>
         </div>
     </div>
-
-
+    </div>
+    
     <hr style="margin-top: 20px; margin-bottom: 20px">
 
     <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 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 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 style="margin-bottom: 0px">Minor improvements</p>

package/template/error.html

@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Latest compiled and minified CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
+        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
+
+    <!-- Optional theme -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
+        integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+  
+    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
+    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
+
+    <!-- Latest compiled and minified JavaScript -->
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
+        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
+        </script>
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="./css/error.css">
+
+    <style>
+      body {
+        font-family: 'Poppins', serif;
+      }
+    </style>
+  
+</head>
+
+  
+<body>
+
+  <!-- Success modal -->
+  <!--
+  {{#if show_success_modal}}
+  <div id="success-update-modal" class="success-modal">
+    <div class="modal-content">
+        <img src="https://www.pngall.com/wp-content/uploads/9/Green-Tick-Vector-PNG-Images.png" width="80" height="auto" />
+        <p class="modal-text" style="margin-top: 20px; margin-bottom: 20px;">Configuration updated successfully</p>
+        <button class="btn cancel-btn" onclick="document.getElementById('success-update-modal').style.display='none'">Close</button>
+    </div>
+  </div>
+  {{/if}}
+  -->
+
+  <!-- Error modal -->
+  <!--
+  {{#if show_error_modal}}
+  <div id="error-update-modal" class="error-modal">
+    <div class="modal-content">
+        <img src="https://cdn-icons-png.flaticon.com/512/148/148766.png" width="80" height="auto"  />
+        <p style="margin-top: 20px; margin-bottom: 20px;">An error occurred while updating the configuration</p>
+        <button class="btn cancel-btn" onclick="document.getElementById('error-update-modal').style.display='none'">Close</button>
+    </div>
+  </div>
+  {{/if}}
+  -->
+  
+  <!-- HEADER -->
+  <div class="header">
+    <div class="header-content">
+      <div class="logo-title">
+        <div class="logo-container">
+          <img src="https://user-images.githubusercontent.com/45603238/200829081-e6a9c7a0-9d8c-431c-a477-4880a8fd752f.png" width="60px" height="60px">
+        </div>
+        <div class="title-version">
+          <p class="title">WhatsApp Business Connector</p>
+          <div class="status-box" style="padding: 0px 8px; letter-spacing: 1px; height: 18px;"> 
+            <p style="margin-bottom: 0px;">{{ app_version }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="error">
+    <div class="error-box">
+      <p class="error-title">Ops! Something went wrong.</p>
+      <p>{{ error_message }}</p>
+    </div>
+  </div>
+  
+</body>

package/tiledesk/TiledeskAppsClient.js

@@ -2,6 +2,7 @@ const axios = require("axios").default;
 const fs = require('fs');
 const FormData = require('form-data');
 const path = require('path');
+const winston = require('../winston');
 
 class TiledeskAppsClient {
   /**

package/tiledesk/TiledeskChannel.js

@@ -217,7 +217,58 @@ class TiledeskChannel {
       winston.error("(wab) [TiledeskChannel] sign in error: " + err);
     })
   }
-  
+
+  async getProjectDetail() {
+
+    return await axios({
+      url: this.API_URL + '/projects/' + this.settings.project_id,
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': this.settings.token
+      },
+      method: 'GET'
+    }).then((response) => {
+      return this.checkPlan(response.data);
+    }).catch((err) => {
+      winston.error("(wab) [TiledeskChannel] get project detail error: " + err);
+      return null;
+    })
+  }
+
+  checkPlan(project) {
+    let profile_name = project.profile.name;
+    let profile_type = project.profile.type;
+    let isActiveSubscription = project.isActiveSubscription;
+    let trialExpired = project.trialExpired;
+
+    winston.debug("profile_name: " + profile_name)
+    winston.debug("profile_type: " + profile_type)
+    winston.debug("isActiveSubscription: " + isActiveSubscription)
+    
+    return new Promise((resolve, reject) => {
+      if (
+        (profile_name === 'Growth') ||
+        (profile_name === 'Scale' && isActiveSubscription === false) ||
+        (profile_name === 'Plus' && isActiveSubscription === false) ||
+        (profile_type === 'free' && trialExpired === true) 
+      ) {
+        winston.verbose('Feature not available')
+        resolve(false);
+
+      } else if (
+        (profile_name === 'Scale' && isActiveSubscription === true) ||
+        (profile_name === 'Plus' && isActiveSubscription === true) ||
+        (profile_type === 'free' && trialExpired === false)
+      ) {
+        winston.verbose('Feature available')
+        resolve(true);
+        
+      } else {
+        winston.verbose('Other case: feature not available');
+        resolve(false);
+      }
+    })
+  }
 
 }
 

package/tiledesk/TiledeskWhatsappTranslator.js

@@ -271,8 +271,26 @@ const path = require('path');
       }
 
     } else {
-      whatsapp_message.text = { body: text };
-      return whatsapp_message;
+
+      // template
+      console.log("tiledeskChannelMessage.text: ", tiledeskChannelMessage.text);
+      if (tiledeskChannelMessage.text.startsWith("/template:")) {
+        let template_name = tiledeskChannelMessage.text.substring(tiledeskChannelMessage.text.lastIndexOf(':') + 1);
+        console.log("template name to send: ", template_name);
+        whatsapp_message.type = "template";
+        whatsapp_message.template = {
+          name: template_name,
+          language: {
+            code: "en_US"
+          }
+        }
+        return whatsapp_message;
+      }
+      // standard message
+      else {
+        whatsapp_message.text = { body: text };
+        return whatsapp_message;
+      }
     }
   }
 

package/template/old_configure.html

@@ -1,206 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <!-- Latest compiled and minified CSS -->
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
-        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
-
-    <!-- Optional theme -->
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
-        integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
-
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-  
-    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
-    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
-
-    <!-- Latest compiled and minified JavaScript -->
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
-        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
-        </script>
-  
-    <link rel="stylesheet" href="./css/style.css">
-
-</head>
-
-<body>
-  
-  <div style="padding: 100px 230px; background-color: #efefef; min-width: 800px; display: flex; justify-content: center;" >
-    
-    <div style="background-color: white; border-radius: 8px; padding: 20px; box-shadow: 0px 0px 5px 0px #cfcfcf; min-width: 800px;">
-      
-      <div>
-        
-        <div style="display: flex; flex-direction: row; align-items: center;">
-          
-          <div style="margin-right: 80px;">
-            <img width="130" height="auto" style="margin-top: 6px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/WhatsApp.svg/479px-WhatsApp.svg.png" alt="..." class="img-rounded">
-          </div>
-    
-          <div>
-            
-            <h1 style="margin-top: 0px; margin-bottom: 2px; min-width: 500px;">WhatsApp Business</h1>
-            <div style="display: flex; flex-direction: row; align-items: flex-end;">
-              <h7 style="color: rgb(140, 140, 140); margin-right: 10px;">by Tiledesk</h7>
-              <div class="version">
-                <a class="npm-link" href="https://www.npmjs.com/package/@tiledesk/tiledesk-whatsapp-connector" target="_blank">{{ app_version }}</a>
-              </div>
-            </div>
-
-            {{#if wab_token}}
-              <div style="margin-top: 20px;">
-              <h7 style="color: rgb(140, 140, 140);">The Whatsapp Business App is configured on your Tildesk project.</h7>
-              <form action="./disconnect" method="post">
-                <input type="hidden" name="project_id" value="{{ project_id }}">
-                <input type="hidden" name="token" value="{{ token }}">
-                <input type="hidden" name="subscription_id" value="{{ subscription_id }}">
-                <input type="submit" class="btn btn-danger" style="margin-top: 10px; width: 160px;" value="Disconnect">
-              </form>
-            </div>
-            {{/if}}
-                        
-          </div>
-        </div>
-
-        <!--
-        <button onClick="javascript:window.open('https://gethelp.tiledesk.com/articles/telegram/', '_blank');" class="btn btn-        primary">View Documentation</button>            
-        -->
-        
-        <div style="margin-top: 40px; padding: 20px; background-color: aliceblue; border-radius: 8px; min-width: 600px;">
-          <h7>Receive Whatsapp bot conversations in your Tiledesk dashboard. Seamlessly Chat with your targeted audience on                         Whatsapp right from the Tiledesk dashboard.</h7>
-              <ul>
-                  <li>
-                      <h7>Integrate your Whatsapp number with Tiledesk.</h7>
-                  </li>
-                  <li>
-                      <h7>Once a chat is initiated on your Whatsapp number, receive an alert on your Tiledesk account.</h7>
-                  </li>
-                  <li>
-                      <h7>Enable instant messaging and answer multiple conversations - everything from Tiledesk account.</h7>
-                  </li>
-              </ul>
-        </div>
-
-        <div style="margin-top: 10px;">
-          <a href="https://gethelp.tiledesk.com/categories/whatsapp-business/" target="_blank">View documentation</a>
-        </div>
-      
-
-        <hr>
-
-        
-        <div>
-          <h4>Your Configuration</h4>
-      
-          <div style="min-width: 600px">
-            <form action="./update" method="post">
-
-              <div class="form-group" style="width: 490px;">
-                    <label for="proxy_url">Webhook Endpoint
-                        <span style="margin-left: 10px;">
-                          <i class="fa fa-question-circle custom-tooltip" style="color: #337ab7;">
-                            <span class="custom-tooltiptext">This is the endpoint to be reached by WhatsApp. Copy it to the Facebook Developer console in "Callback URL" in Whatsapp Configuration. See documention for more info.</span>
-                          </i>
-                        </span>
-                    </label>
-                    <!--<p style="margin-bottom: 5px; font-size: 12px; color: #a7a7a7;">Copy this URL in the Facebook Developer Dashboad. See documentation for more info.</p> -->
-                    <div style="display: flex; flex-direction: row; justify-content: space-between">
-                        <div style="width: 400px;">
-                            <input type="text" readonly class="form-control" name="proxy_url" id="proxy_url"
-                                value="{{ proxy_url}}">
-                        </div>
-                        <div style="width: 80px;">
-                          <!--
-                            <input type="button" class="btn btn-primary" style="width: 100%;"
-                                onclick="copyTextToClipboard(this, document.getElementById('proxy_url').value)"    
-                                value="Copy"></input>
-                          -->
-                          <input type="button" id="copy-btn" class="btn btn-primary" style="width: 100%;"
-                                onclick="copyTextToClipboard()"    
-                                value="Copy"></input>
-                        </div>
-
-                    </div>
-                </div>
-
-                <div class="form-group" style="width: 400px;">
-                    <label for="wab_token">Whatsapp Token
-                    <span style="margin-left: 10px;">
-                          <i class="fa fa-question-circle custom-tooltip" style="color: #337ab7;">
-                            <span class="custom-tooltiptext">Paste it the permanent WhatsApp Business token. See documention for more info.</span>
-                          </i>
-                        </span>
-                    </label>
-                    <input type="text" class="form-control" name="wab_token" value="{{ wab_token }}"
-                        placeholder="Enter the Whatsapp Token">
-                </div>
-
-                <div class="form-group" style="width: 400px;">
-                    <label for="verify_token">Verify Token
-                    <span style="margin-left: 10px;">
-                          <i class="fa fa-question-circle custom-tooltip" style="color: #337ab7;">
-                            <span class="custom-tooltiptext">This is a verification token of your choice. Copy it to the Facebook Developer console in "Verify Token" in Whatsapp Configuration.
-                              See documention for more info.</span>
-                          </i>
-                        </span>
-                    </label>
-                    <input type="password" class="form-control" name="verify_token" value="{{ verify_token }}"
-                        placeholder="Enter your Verify Token">
-                </div>
-
-                <input type="hidden" name="project_id" value="{{ project_id }}" />
-                <input type="hidden" name="token" value="{{ token }}" />
-
-                {{#if wab_token}}
-                  <div style="width: 400px; text-align: right;">
-                    <input type="submit" class="btn btn-primary" style="width: 35%;" value="Update">
-                  </div>
-                {{else}}
-                  <div style="width: 400px; text-align: right;">
-                    <input type="submit" class="btn btn-primary" style="width: 35%;" value="Connect">
-                  </div>
-                {{/if}}
-
-            </form>
-
-            
-          </div> 
-        </div>
-        
-      </div>
-
-    </div>
-  </div>
-
-  <script>
-
-    function copyTextToClipboard2(btn, text) {
-        console.log("Button clicked")
-        btn.value = "Copied!"
-        navigator.clipboard.writeText(text).then(function () {
-            console.log('Async: Copied to clipboard!');
-        }, function (err) {
-            console.error('Async: Could not copy text: ', err);
-        });
-    }
-
-    function copyTextToClipboard() {
-      const proxyUrl = document.getElementById('proxy_url').select()
-      try {
-        document.execCommand('copy');
-        console.log('Async: Copied to clipboard!');
-        let btn = document.getElementById('copy-btn');
-        btn.value = "Copied!";
-      } catch (err) {
-        console.error('Async: Could not copy text: ', err);
-      }  
-    }
-  </script>
-  
-
-</body>