@tiledesk/tiledesk-whatsapp-connector 0.1.43 → 0.1.45

package/index.js

@@ -10,7 +10,7 @@ const pjson = require('./package.json');
 const { v4: uuidv4 } = require('uuid');
 const cors = require('cors');
 var winston = require('./winston');
-const url = require('url');  
+const url = require('url');
 
 // tiledesk clients
 //const { TiledeskClient } = require('@tiledesk/tiledesk-client');
@@ -73,7 +73,7 @@ router.get('/detail', async (req, res) => {
   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(project_id, app_id);
 
@@ -117,14 +117,14 @@ router.post('/install', async (req, res) => {
     winston.debug("(wab) installation response: " + installation);
 
     res.redirect(url.format({
-     pathname:"/detail",
-     query: {
+      pathname: "/detail",
+      query: {
         "project_id": project_id,
         "app_id": app_id,
         "token": token
       }
     }));
-    
+
   }).catch((err) => {
     winston.error("(wab) installation error: " + err.data)
     res.send("An error occurred during the installation");
@@ -145,8 +145,8 @@ router.post('/uninstall', async (req, res) => {
     winston.debug("(wab) uninstallation response: " + response);
 
     res.redirect(url.format({
-     pathname:"/detail",
-     query: {
+      pathname: "/detail",
+      query: {
         "project_id": project_id,
         "app_id": app_id,
         "token": token
@@ -163,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) => {
@@ -394,6 +408,7 @@ router.post('/tiledesk', async (req, res) => {
   winston.verbose("(wab) Message received from Tiledesk")
 
   var tiledeskChannelMessage = req.body.payload;
+  //winston.verbose("(wab) tiledeskChannelMessage: ", tiledeskChannelMessage)
   var projectId = req.body.payload.id_project;
 
   // get settings from mongo
@@ -426,15 +441,52 @@ router.post('/tiledesk', async (req, res) => {
   }
 
   let recipient_id = tiledeskChannelMessage.recipient;
+  let sender = tiledeskChannelMessage.sender;
   let whatsapp_receiver = recipient_id.substring(recipient_id.lastIndexOf("-") + 1);
   let phone_number_id = recipient_id.substring(recipient_id.lastIndexOf("wab-") + 4, recipient_id.lastIndexOf("-"));
 
+  /*
+  if (settings.expired && 
+      settings.expired === true) {
+    winston.info("settings expired: " + settings.expired);
+        return res.status(200).send({ success: 'false', message: "plan expired"})
+      
+  */
+  
+  // Return an info message option
+  if (settings.expired &&
+      settings.expired === true) {
+
+        winston.verbose("settings expired: " + settings.expired);
+        let tiledeskJsonMessage = {
+          text: 'Expired. Upgrade Plan.',
+          sender: sender,
+          senderFullname: "System",
+          attributes: {
+            subtype: 'info'
+          },
+          channel: { name: 'whatsapp'}
+        }
+        let message_info = {
+          channel: "whatsapp",
+          whatsapp: {
+            from: whatsapp_receiver,
+            phone_number_id: phone_number_id
+          }
+        }
+    
+        const tdChannel = new TiledeskChannel({ settings: settings, API_URL: API_URL })
+        const response = await tdChannel.send(tiledeskJsonMessage, message_info, settings.department_id);
+        winston.verbose("(wab) Expiration message sent to Tiledesk")
+        return res.sendStatus(200);
+  }
+  
   winston.debug("(wab) text: " + text);
   winston.debug("(wab) attributes: " + attributes)
   winston.debug("(wab) tiledesk sender_id: " + sender_id);
   winston.debug("(wab) recipient_id: " + recipient_id);
   winston.debug("(wab) whatsapp_receiver: " + whatsapp_receiver);
-  winston.debug("(wab) phone_number_id: " + phone_number_id)
+  winston.debug("(wab) phone_number_id: " + phone_number_id);
 
   const messageHandler = new MessageHandler({ tiledeskChannelMessage: tiledeskChannelMessage });
   const tlr = new TiledeskWhatsappTranslator();
@@ -529,7 +581,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);
       }
 
@@ -750,32 +802,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);
@@ -794,7 +851,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.43",
+  "version": "0.1.45",
   "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/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

@@ -207,39 +207,39 @@
           </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">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.45</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>
+        <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.31</b></p>
+      <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">Added support for Test-it-out</p>
+        <p style="margin-bottom: 0px">Bug Fixes</p>
         <p style="margin-bottom: 0px">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.24</b></p>
+      <p style="font-size: 12px; color: #676767; margin-bottom: 0px;">Version <b>0.1.31</b></p>
     </div>
 
+
     <hr style="margin-top: 50px; margin-bottom: 20px">
   
 </body>

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/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>