@resultcrafter/aimanager-instagram-connector 0.1.0 → 0.1.2

package/index.js

@@ -36,6 +36,7 @@ let VERIFY_TOKEN = null;
 let GRAPH_URL = null;
 let DASHBOARD_BASE_URL = null;
 let BRAND_NAME = null;
+let SHOW_INFO_MESSAGE = false;
 // Handlebars register helpers
 handlebars.registerHelper('isEqual', (a, b) => {
   if (a == b) {
@@ -46,7 +47,7 @@ handlebars.registerHelper('isEqual', (a, b) => {
 })
 
 router.get('/', async (req, res) => {
-  res.send('Welcome on Tiledesk Instagram Connector!')
+  res.send('Welcome on AI Manager Instagram Connector!')
 })
 
 router.get('/detail', async (req, res) => {
@@ -191,7 +192,7 @@ router.get('/configure', async (req, res) => {
       var replacements = {
         app_version: pjson.version,
         project_id: project_id,
-        connected: true,
+        ig_token: settings.ig_token || settings.access_token,
         token: token,
         app_id: app_id,
         endpoint: BASE_URL,
@@ -199,7 +200,10 @@ router.get('/configure', async (req, res) => {
         isEmpty: true,
         department_id: settings.department_id,
         departments: departments,
-        brand_name: BRAND_NAME
+        brand_name: BRAND_NAME,
+        instagram_username: settings.instagram_username || settings.user_info?.username || 'Instagram Account',
+        show_info_message: settings.show_info_message !== undefined ? settings.show_info_message : true,
+        subscription_id: settings.subscription_id
       }
       var html = template(replacements)
       res.send(html);
@@ -212,10 +216,11 @@ router.get('/configure', async (req, res) => {
       var replacements = {
         app_version: pjson.version,
         project_id: project_id,
+        ig_token: null,
         token: token,
+        app_id: app_id,
         endpoint: BASE_URL,
         departments: departments,
-        redirect_uri: `https://www.facebook.com/v14.0/dialog/oauth?client_id=${FB_APP_ID}&redirect_uri=${BASE_URL}/oauth?&scope=public_profile%2C%20email%2C%20pages_show_list%2C%20pages_messaging%2C%20business_management&state={"project_id":"${project_id}","app_id":"${app_id}","token":"${token}"}`,
         brand_name: BRAND_NAME
       }
       var html = template(replacements);
@@ -237,8 +242,10 @@ router.post('/update', async (req, res) => {
   let CONTENT_KEY = "instagram-" + project_id;
   let settings = await db.get(CONTENT_KEY);
 
-  settings.department_id = department_id;
-  await db.set(CONTENT_KEY, settings);
+  if (settings) {
+    settings.department_id = department_id;
+    await db.set(CONTENT_KEY, settings);
+  }
 
   // get departments
   const tdChannel = new TiledeskChannel({ settings: { project_id: project_id, token: token }, API_URL: API_URL });
@@ -251,15 +258,18 @@ router.post('/update', async (req, res) => {
     var replacements = {
       app_version: pjson.version,
       project_id: project_id,
-      connected: true,
+      ig_token: settings ? (settings.ig_token || settings.access_token) : null,
       token: token,
       app_id: app_id,
       endpoint: BASE_URL,
-      pages: settings.pages,
+      pages: settings ? settings.pages : null,
       isEmpty: true,
-      department_id: settings.department_id,
+      department_id: settings ? settings.department_id : null,
       departments: departments,
-      brand_name: BRAND_NAME
+      brand_name: BRAND_NAME,
+      show_info_message: settings ? (settings.show_info_message !== undefined ? settings.show_info_message : true) : true,
+      instagram_username: settings ? (settings.instagram_username || settings.user_info?.username || 'Instagram Account') : null,
+      subscription_id: settings ? settings.subscription_id : null
     }
     var html = template(replacements)
     res.send(html);
@@ -267,9 +277,48 @@ router.post('/update', async (req, res) => {
 
 })
 
+router.post('/update_advanced', async (req, res) => {
+  winston.verbose("(fbm) /update_advanced");
+
+  let project_id = req.body.project_id;
+  let show_info_message = req.body.show_info_message === 'on';
+
+  let CONTENT_KEY = "instagram-" + project_id;
+  let settings = await db.get(CONTENT_KEY);
+
+  if (settings) {
+    settings.show_info_message = show_info_message;
+    await db.set(CONTENT_KEY, settings);
+  }
+
+  const tdChannel = new TiledeskChannel({ settings: { project_id: project_id, token: req.body.token }, API_URL: API_URL });
+  let departments = await tdChannel.getDepartments(req.body.token).catch(() => []);
+
+  readHTMLFile('/configure.html', (err, html) => {
+    var template = handlebars.compile(html);
+    var replacements = {
+      app_version: pjson.version,
+      project_id: project_id,
+      ig_token: settings ? (settings.ig_token || settings.access_token) : null,
+      token: req.body.token,
+      endpoint: BASE_URL,
+      pages: settings ? settings.pages : null,
+      isEmpty: true,
+      department_id: settings ? settings.department_id : null,
+      departments: departments,
+      brand_name: BRAND_NAME,
+      show_info_message: show_info_message,
+      instagram_username: settings ? (settings.instagram_username || settings.user_info?.username || 'Instagram Account') : null,
+      subscription_id: settings ? settings.subscription_id : null
+    }
+    var html = template(replacements)
+    res.send(html);
+  })
+})
+
 router.post('/tiledesk', async (req, res) => {
-  winston.verbose("(fbm) Message received from Tiledesk");
-  winston.debug("(fbm) Message received from Tiledesk body: ", req.body);
+  winston.verbose("(fbm) Message received from AI Manager");
+  winston.debug("(fbm) Message received from AI Manager body: ", req.body);
 
   let tiledeskChannelMessage = req.body.payload;
   let project_id = req.body.payload.id_project;
@@ -346,7 +395,7 @@ router.post('/tiledesk', async (req, res) => {
     const tdChannel = new TiledeskChannel({ settings: settings, API_URL: API_URL })
     try {
       await tdChannel.send(tiledeskJsonMessage, message_info, settings.department_id);
-      winston.verbose("(wab) Expiration message sent to Tiledesk")
+      winston.verbose("(wab) Expiration message sent to AI Manager")
       return res.sendStatus(200);
     } catch (err) {
       return res.status(500).send({ success: false, error: "Error sending exoìpiration message" });
@@ -520,7 +569,7 @@ router.post('/webhookFB', async (req, res) => {
           if (tiledeskJsonMessage) {
             try {
               await tdChannel.send(tiledeskJsonMessage, message_info, settings.department_id);
-              winston.verbose("(fbm) Message sent to Tiledsk")
+              winston.verbose("(fbm) Message sent to AI Manager")
             } catch (err) {
               return res.status(500).send({ success: false, error: "Error sending exoìpiration message" });
             }
@@ -536,7 +585,7 @@ router.post('/webhookFB', async (req, res) => {
         if (tiledeskJsonMessage) {
           try {
             await tdChannel.send(tiledeskJsonMessage, message_info, settings.department_id);
-            winston.verbose("(fbm) Message sent to Tiledsk")
+            winston.verbose("(fbm) Message sent to AI Manager")
           } catch (err) {
             return res.status(500).send({ success: false, error: "Error sending message" });
           }
@@ -718,20 +767,22 @@ router.post('/enablePage', async (req, res) => {
       var replacements = {
         app_version: pjson.version,
         project_id: project_id,
-        connected: true,
+        ig_token: settings.ig_token || settings.access_token,
         token: token,
         endpoint: BASE_URL,
         pages: settings.pages,
         department_id: settings.department_id,
         departments: departments,
-        brand_name: BRAND_NAME
+        brand_name: BRAND_NAME,
+        show_info_message: settings.show_info_message !== undefined ? settings.show_info_message : true,
+        instagram_username: settings.instagram_username || settings.user_info?.username || 'Instagram Account',
+        subscription_id: settings.subscription_id
       }
       var html = template(replacements)
       return res.send(html);
     })
 
   } else {
-    // pagina attiva per qualche progetto --> reject
     winston.verbose("Page already in use in another project");
     let alert = "Unable to activate " + page_name + ". Page already in use in another project."
 
@@ -740,14 +791,17 @@ router.post('/enablePage', async (req, res) => {
       var replacements = {
         app_version: pjson.version,
         project_id: project_id,
-        connected: true,
+        ig_token: settings.ig_token || settings.access_token,
         token: token,
         endpoint: BASE_URL,
         pages: settings.pages,
         department_id: settings.department_id,
         departments: departments,
         brand_name: BRAND_NAME,
-        show_alert_modal: true
+        show_alert_modal: true,
+        show_info_message: settings.show_info_message !== undefined ? settings.show_info_message : true,
+        instagram_username: settings.instagram_username || settings.user_info?.username || 'Instagram Account',
+        subscription_id: settings.subscription_id
       }
       var html = template(replacements)
       return res.send(html);
@@ -786,15 +840,16 @@ router.post('/disablePage', async (req, res) => {
     var replacements = {
       app_version: pjson.version,
       project_id: project_id,
-      connected: true,
+      ig_token: settings.ig_token || settings.access_token,
       token: token,
       endpoint: BASE_URL,
       pages: settings.pages,
       department_id: settings.department_id,
       departments: departments,
-      brand_name: BRAND_NAME
-      //displayError: true,
-      //alert: alert
+      brand_name: BRAND_NAME,
+      show_info_message: settings.show_info_message !== undefined ? settings.show_info_message : true,
+      instagram_username: settings.instagram_username || settings.user_info?.username || 'Instagram Account',
+      subscription_id: settings.subscription_id
     }
     var html = template(replacements)
     return res.send(html);
@@ -812,49 +867,49 @@ router.post('/disconnect', async (req, res) => {
   let CONTENT_KEY = "instagram-" + project_id;
 
   let settings = await db.get(CONTENT_KEY);
-  const active_page = settings.pages.find(p => p.active === true);
 
-  if (active_page) {
-    let PAGE_KEY = "instagram-page-" + active_page.id;
-    await db.remove(PAGE_KEY)
-    winston.debug("(fbm) Page deleted.");
+  if (settings && settings.pages) {
+    const active_page = settings.pages.find(p => p.active === true);
+    if (active_page) {
+      let PAGE_KEY = "instagram-page-" + active_page.id;
+      await db.remove(PAGE_KEY)
+      winston.debug("(fbm) Page deleted.");
+    }
   }
 
   await db.remove(CONTENT_KEY)
   winston.verbose("(fbm) Content deleted.");
 
   const tdClient = new TiledeskSubscriptionClient({ API_URL: API_URL, project_id: project_id, token: token })
-  tdClient.unsubscribe(settings.subscription_id).then(async (data) => {
-
-    const tdChannel = new TiledeskChannel({ settings: { project_id: project_id, token: token }, API_URL: API_URL })
-    let departments = await tdChannel.getDepartments(token);
-    winston.debug("(fbm) found " + departments.length + " departments")
-
-    readHTMLFile('/configure.html', (err, html) => {
+  if (settings && settings.subscription_id) {
+    tdClient.unsubscribe(settings.subscription_id).catch((err) => {
+      winston.error("(fbm) unsubscribe error: ", err);
+    });
+  }
 
-      var template = handlebars.compile(html);
-      var replacements = {
-        app_version: pjson.version,
-        project_id: project_id,
-        token: token,
-        endpoint: BASE_URL,
-        departments: departments,
-        brand_name: BRAND_NAME,
-        redirect_uri: `https://www.facebook.com/v14.0/dialog/oauth?client_id=${FB_APP_ID}&redirect_uri=${BASE_URL}/oauth?&scope=public_profile%2C%20email%2C%20pages_show_list%2C%20pages_messaging%2C%20business_management&state={"project_id":"${project_id}","app_id":"${settings.app_id}","token":"${token}"}`
-      }
-      var html = template(replacements)
-      return res.send(html);
-    })
+  const tdChannel = new TiledeskChannel({ settings: { project_id: project_id, token: token }, API_URL: API_URL })
+  let departments = await tdChannel.getDepartments(token).catch(() => []);
+  winston.debug("(fbm) found " + departments.length + " departments")
 
-  }).catch((err) => {
-    winston.error("(fbm) unsubscribe error: ", err);
+  readHTMLFile('/configure.html', (err, html) => {
+    var template = handlebars.compile(html);
+    var replacements = {
+      app_version: pjson.version,
+      project_id: project_id,
+      ig_token: null,
+      token: token,
+      endpoint: BASE_URL,
+      departments: departments,
+      brand_name: BRAND_NAME
+    }
+    var html = template(replacements)
+    return res.send(html);
   })
 
-
 })
 
 function startApp(settings, callback) {
-  winston.info("(fbm) Starting Instagram App");
+  winston.info("(fbm) Starting AI Manager Instagram App");
 
   if (!settings.MONGODB_URL) {
     winston.error("(fbm) MONGODB_URL is mandatory. Exit...");

package/package.json

@@ -1,13 +1,17 @@
 {
   "name": "@resultcrafter/aimanager-instagram-connector",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "AI Manager Instagram DM connector",
   "main": "index.js",
   "scripts": {
     "test": "mocha",
     "start": "node index.js"
   },
-  "keywords": ["aimanager", "instagram", "connector"],
+  "keywords": [
+    "aimanager",
+    "instagram",
+    "connector"
+  ],
   "author": "ResultCrafter",
   "license": "MIT",
   "dependencies": {

package/template/configure.html

@@ -6,21 +6,16 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <!-- Bootstrap 5.3 CSS -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
       integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
       crossorigin="anonymous">
 
-    <!-- Font Awesome 7 (latest version) -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" crossorigin="anonymous" />
-  
-    <!-- Font Poppins -->
+
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet" />
 
-    <!-- Custom CSS -->
-     <link rel="stylesheet" href="./css/configure.css">
+    <link rel="stylesheet" href="./css/configure.css">
 
-    <!-- Bootstrap 5.3 JavaScript Bundle (include Popper) -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
       integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
       crossorigin="anonymous">
@@ -31,13 +26,11 @@
         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">
@@ -48,7 +41,6 @@
   </div>
   {{/if}}
 
-  <!-- Error modal -->
   {{#if show_error_modal}}
   <div id="error-update-modal" class="error-modal">
     <div class="modal-content">
@@ -59,7 +51,6 @@
   </div>
   {{/if}}
 
-  <!-- Alert modal -->
   {{#if show_alert_modal}}
   <div id="alert-update-modal" class="alert-modal">
     <div class="modal-content">
@@ -70,220 +61,93 @@
   </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/227948374-1a55c84f-af12-417c-baa7-06086f5efb5b.png" width="60px" height="60px">
+          <img src="https://aimanager.resultcrafter.com/assets/img/int/instagram-icon.png" width="60px" height="60px">
         </div>
         <div class="title-version">
-          <p class="title">Facebook Instagram Connector</p>
-          <div class="status-box" style="padding: 0px 8px; letter-spacing: 1px; height: 18px;"> 
+          <p class="title">Instagram 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 class="status-box"> 
-        <p style="margin-bottom: 0px; margin-right: 8px;">Status: </p> 
-        {{#if connected}}
+      <div class="status-box">
+        <p style="margin-bottom: 0px; margin-right: 8px;">Status: </p>
+        {{#if ig_token}}
         <i class="fa fa-circle green-circle"></i>
         <p style="margin-bottom: 0px;">Connected</p>
         {{else}}
         <i class="fa fa-circle red-circle"></i>
-        <p style="margin-bottom: 0px;">Disconnected</p>  
+        <p style="margin-bottom: 0px;">Disconnected</p>
         {{/if}}
       </div>
     </div>
   </div>
 
-  <!-- INFO BOX -->
-  {{#unless brand_name}}
   <div class="info-box">
+    {{#unless brand_name}}
     <div class="info-list">
        <ul>
         <div class="list-element">
-          <img src="https://cdn-icons-png.flaticon.com/512/1443/1443000.png" width="16" height="16" style="margin-right: 10px;"/>
-          <h7>Easy installation</h7>
-        </div>
-        <div class="list-element">
-          <img src="https://cdn-icons-png.flaticon.com/512/1443/1443000.png" width="16" height="16" style="margin-right: 10px;"/>
-          <h7>Customer support agent engages with social media visitors with text, voice and video chat.</h7>
-        </div>
-        <div class="list-element">
-          <img src="https://cdn-icons-png.flaticon.com/512/1443/1443000.png" width="16" height="16" style="margin-right: 10px;"/>
-          <h7>Allow offline messaging.</h7>
+          <img src="https://cdn-icons-png.flaticon.com/512/1443/1443000.png" width="20" height="20" style="margin-right: 10px;"/>
+          <h7>Integrate Instagram DM with AI Manager.</h7>
         </div>
         <div class="list-element">
-          <img src="https://cdn-icons-png.flaticon.com/512/1443/1443000.png" width="16" height="16" style="margin-right: 10px;"/>
-          <h7>Agents will be able to see the names and pictures of people they are chatting with. This will build strong relationship between them.</h7>
+          <img src="https://cdn-icons-png.flaticon.com/512/1443/1443000.png" width="20" height="20" style="margin-right: 10px;"/>
+          <h7>Once a Direct Message is received on Instagram, receive an alert on your AI Manager account.</h7>
         </div>
         <div class="list-element">
-          <img src="https://cdn-icons-png.flaticon.com/512/1443/1443000.png" width="16" height="16" style="margin-right: 10px;"/>
-          <h7>An existing customer won't have to log in again as the details will already get stored and thus they can start communication immediately.</h7>
+          <img src="https://cdn-icons-png.flaticon.com/512/1443/1443000.png" width="20" height="20" style="margin-right: 10px;"/>
+          <h7>Enable instant messaging and answer multiple conversations, everything from AI Manager account.</h7>
         </div>
       </ul>
     </div>
+    {{/unless}}
   </div>
-  {{/unless}}
 
-  <!-- Docs Section -->
-  {{#unless brand_name}}
-  <div class="docs-box"> 
+  <div class="docs-box">
+    {{#unless brand_name}}
     <div class="docs-section">
       <p style="margin-top: 20px; font-size: 18px; font-weight: 600;">Before you start</p>
-      
       <div style="padding: 20px; background-color: #2fa2dc24; border-radius: 8px; width: 600px; margin-bottom: 5px;">
         <div style="display: flex; flex-direction: row; align-items: baseline;">
           <div>
-            <img src="https://cdn-icons-png.freepik.com/256/13077/13077927.png?semt=ais_hybrid" width="20px" height="auto" style="margin-right: 10px;"> 
+            <img src="https://freeiconshop.com/wp-content/uploads/edd/arrow-flat.png" width="20px" height="auto" style="margin-right: 10px;">
           </div>
           <div>
-              <a href="https://gethelp.tiledesk.com/articles/facebook-instagram/" target="_blank">How to integrate Facebook Instagram with Tiledesk</a>
-              <p style="color: grey; margin-bottom: 0px;">Everything you need to know to integrate Facebook Instagram with Tiledesk</p>
-            </div>
+            <a href="https://gethelp.tiledesk.com/articles/facebook-instagram/" target="_blank">How to integrate Instagram with AI Manager</a>
+            <p style="color: grey; margin-bottom: 0px;">Everything you need to know to integrate Instagram DM with AI Manager</p>
+          </div>
         </div>
       </div>
-    
     </div>
+    {{/unless}}
   </div>
-  {{/unless}}
-    
-  
 
-  <!-- CONFIGURE BOX -->
   <div class="configure-box">
-
-    
     <div class="configure">
       <p class="title" style="margin-bottom: 20px;">Your Configuration</p>
 
-        {{#if connected}}
-        <!--
-          <div class="div-select">
-            <form action="./enablePage" method="post">
-              <p class="custom-label">Select the Facebook page to activate</p>
-              <select id="select" name="select">
-                <option value="default">Choose one</option>
-                {{#each pages}}
-                <option value="{{ name }}">{{ name }}</option>
-                {{/each}}
-              </select>
-            </form>
-          </div>
-        -->
-
-       <!--
-          <p class="custom-label">Select the Facebook page to activate</p>
-          <div class="pages-container">
-            {{#each pages}}
-              <div class="page-button">
-                  {{ name }}
-              </div>
-              {{/each}}
-          </div>
--->       
-          <!--
-          <p>Tiledesk available on the page</p>
-          <div class="pages-container">
-          {{#each pages}}
-            {{#if (isEqual active true)}}
-
-            <div class="page-button">{{ name }}</div>
-            
-            {{/if}}      
-          {{/each}}
-          </div>
-
-      
-          <p class="custom-label">Select the Facebook page to activate</p>
-          <div class="pages-container">
-              {{#each pages}}
-              {{#if (isEqual active false)}}
-              <form action="./enablePage" method="post">
-                <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="hidden" name="page_name" value="{{ name }}">
-                <input type="submit" class="page-button" value="{{ name }}">
-              </form>
-              {{/if}}
-              {{/each}}
-          </div>
-          -->
-
-      <!--
-          <p class="custom-label">Select the Facebook page to activate</p>
-          <div class="pages-containter" style="display: flex;">
-            {{#each pages}}
-            {{#if (isEqual active true)}}
-            
-            <button class="page-item-selected">
-              <div class="image-container">
-                <img src="https://upload.wikimedia.org/wikipedia/en/thumb/0/04/Facebook_f_logo_%282021%29.svg/2048px-Facebook_f_logo_%282021%29.svg.png" width="30" height="auto">
-                <img src="https://static.vecteezy.com/system/resources/previews/010/152/436/original/tick-check-mark-icon-sign-symbol-design-free-png.png" width="30" height="auto">
-                
-              </div>
-              <div class="name-container">{{ name }}</div>
-            </button>
-            {{else}}
-            <button class="page-item">
-              <div class="image-container">
-                <img src="https://upload.wikimedia.org/wikipedia/en/thumb/0/04/Facebook_f_logo_%282021%29.svg/2048px-Facebook_f_logo_%282021%29.svg.png" width="30" height="auto">
-              </div>
-              <div class="name-container">{{ name }}</div>
-            </button>
-            {{/if}}
-            {{/each}}
-          </div>
-      -->
-      
-          <p class="custom-label">Select the Facebook page to activate</p>
-          <div class="pages-container">
-              {{#each pages}}
-            
-                {{#if (isEqual active true)}}
-            
-                <form action="./disablePage" method="post">
-                  <div class="over-input-div-selected" onclick="submitInputSelected.click()">
-                    <div style="display: flex; justify-content: space-between; align_items: center;">
-                      <img src="https://upload.wikimedia.org/wikipedia/en/thumb/0/04/Facebook_f_logo_%282021%29.svg/2048px-Facebook_f_logo_%282021%29.svg.png" width="30" height="auto">
-                    <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="30" height="auto">
-                    </div>
-                    <div style="display: flex; justify-content: center; color: #bdbdbd">Tap to disable</div>
-                  </div>
-
-                  <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="hidden" name="page_name" value="{{ name }}">
-                  <input id="submitInputSelected" type="submit" class="page-button-selected-new" value="{{ name }}">
-                </form>
-            
-                {{else}}
-            
-                <form action="./enablePage" method="post">
-                  <div class="over-input-div" onclick="submitInput.click()">
-                    <img src="https://upload.wikimedia.org/wikipedia/en/thumb/0/04/Facebook_f_logo_%282021%29.svg/2048px-Facebook_f_logo_%282021%29.svg.png" width="30" height="auto">
-                  </div>
-                  <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="hidden" name="page_name" value="{{ name }}">
-                  <input id="submitInput" type="submit" class="page-button-new" value="{{ name }}">
-                </form>
-            
-                {{/if}}
-            
-              {{/each}}
+        {{#if ig_token}}
+        <div style="min-width: 600px">
+          <div class="form-group" style="width: 522px;">
+            <label class="input-label" for="instagram_account">Instagram Account</label>
+            <div style="display: flex; flex-direction: row; align-items: center;">
+              <input type="text" class="form-control custom-input" value="{{ instagram_username }}" disabled placeholder="Connected Instagram account">
+              <span style="margin-left: 10px;">
+                <i class="fa fa-question-circle custom-tooltip">
+                  <span class="custom-tooltiptext">The Instagram Business or Creator account connected via OAuth</span>
+                </i>
+              </span>
+            </div>
           </div>
 
-          <!-- Departments -->
-          <div class="form-group" style="width: 522px; margin-top: 30px;">
+          <div class="form-group" style="width: 522px;">
             <label class="input-label" for="department">Department <span style="font-weight: normal;">(Optional)</span></label>
-            <form id="selection-form" action="./update" method="post"> 
+            <form id="selection-form" action="./update" method="post">
               <div style="display: flex; flex-direction: row; align-items: center;">
                 <select class="custom-select form-control" name="department" onchange="document.getElementById('selection-form').submit();">
                 {{#each departments}}
@@ -296,7 +160,7 @@
                 </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 Facebook Instagram. Conversations are sent on the Default Department by default.</span>
+                  <span class="custom-tooltiptext">Select the department where you want to open conversations coming from Instagram. Conversations are sent on the Default Department by default.</span>
                 </i>
               </span>
               </div>
@@ -305,74 +169,108 @@
               <input type="hidden" name="token" value="{{ token }}">
             </form>
           </div>
-
-      
+        </div>
         {{else}}
-          <a target="_top" href="{{ redirect_uri }}"><button class="btn" style="width: 200px; background-color: #0ba2dc; color: white; font-weight: 500;">Connect</button></a>
+        <div>
+          <button class="btn" style="width: 200px; background-color: #0ba2dc; color: white; font-weight: 500;" onclick="connectInstagram()">Connect Instagram</button>
+        </div>
         {{/if}}
 
-      
     </div>
+  </div>
 
+  {{#if ig_token}}
+  <div class="advanced-box">
+    <div class="advanced">
+      <p class="title" style="margin-bottom: 20px;">Advanced</p>
+      <form action="./update_advanced" id="advanced_form" method="post">
+        <div class="item">
+          <div class="toggle-pill-dark" style="display: flex; flex-direction: row; height: 26px;">
+            <div style="margin-right: 10px">
+              {{#if show_info_message}}
+              <input type="checkbox" id="show_info_message" name="show_info_message" checked onclick="update_advanced()">
+              {{else}}
+              <input type="checkbox" id="show_info_message" name="show_info_message" onclick="update_advanced()">
+              {{/if}}
+              <label for="show_info_message"></label>
+              <input type="hidden" name="project_id" value="{{ project_id }}" />
+              <input type="submit" style="display: none">
+            </div>
+            <p>Show info message</p>
+          </div>
+          <p class="option-description">Choose whether to send info messages on the visitor's chat.</p>
+        </div>
+      </form>
+    </div>
   </div>
+  {{/if}}
 
-  
+  {{#if ig_token}}
   <div class="disconnect-box">
     <div class="disconnect">
-      <p class="title" style="margin-bottom: 20px;"> Disconnect</p>  
-
-        <!-- Disconnect Button -->
-        {{#if connected}}
+      <p class="title" style="margin-bottom: 20px;"> Disconnect</p>
         <div>
           {{#if brand_name}}
-          <p style="color: rgb(140, 140, 140);">The Facebook Instagram App is configured on your {{ brand_name }} project.</p>
+          <p style="color: rgb(140, 140, 140);">The Instagram App is configured on your {{ brand_name }} project.</p>
           {{else}}
-          <p style="color: rgb(140, 140, 140);">The Facebook Instagram App is configured on your Tildesk project.</p>
+          <p style="color: rgb(140, 140, 140);">The Instagram App is configured on your AI Manager project.</p>
           {{/if}}
-          
-          <p>By clicking on disconnect you will no longer be able to receive messages from the WhatsApp channel</p>
+          <p>By clicking on disconnect you will no longer be able to receive messages from the Instagram channel</p>
           <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="hidden" name="token" value="{{ token }}">
+            <input type="hidden" name="subscription_id" value="{{ subscription_id }}">
             <input type="submit" class="btn disconnect-button" style="margin-top: 10px; width: 160px;" value="Disconnect">
           </form>
         </div>
-        {{else}}
-        <!-- App not configured -->
+    </div>
+  </div>
+  {{else}}
+  <div class="disconnect-box" style="background-color: white;">
+    <div class="disconnect">
+      <p class="title" style="margin-bottom: 20px;"> Disconnect</p>
+        <div>
           {{#if brand_name}}
-          <p style="color: rgb(140, 140, 140);">The Facebook Instagram App is not yet configured on your {{ brand_name}} project.</p>
+          <p style="color: rgb(140, 140, 140);">The Instagram App is not yet configured on your {{ brand_name}} project.</p>
           {{else}}
-          <p style="color: rgb(140, 140, 140);">The Facebook Instagram App is not yet configured on your Tiledesk project.</p>
+          <p style="color: rgb(140, 140, 140);">The Instagram App is not yet configured on your AI Manager project.</p>
           {{/if}}
-        {{/if}}
+        </div>
     </div>
   </div>
+  {{/if}}
 
+  <script>
+
+    function connectInstagram() {
+      var width = 600;
+      var height = 700;
+      var left = (screen.width - width) / 2;
+      var top = (screen.height - height) / 2;
+      var oauthUrl = './auth/instagram/start?project_id={{ project_id }}&token={{ token }}&app_id={{ app_id }}';
+      var popup = window.open(oauthUrl, 'instagram-oauth', 'width=' + width + ',height=' + height + ',left=' + left + ',top=' + top);
+
+      var timer = setInterval(function() {
+        try {
+          if (popup.closed) {
+            clearInterval(timer);
+            window.location.reload();
+          }
+        } catch (e) {
+
+        }
+      }, 1000);
+    }
 
-  <script> 
-    
-    function copyTextToClipboard() {
-      const proxyUrl = document.getElementById('proxy_url').select()
-      
-      //document.querySelector('textarea').select();
+    function update_advanced() {
       try {
-        document.execCommand('copy');
-        console.log('Async: Copied to clipboard!');
-        let el1 = document.getElementById('copy-div');
-        el1.style.visibility = 'hidden';
-
-        let el2 = document.getElementById('copied-div');
-        el2.style.visibility = 'visible';
-
-        //let btn = document.getElementById('copy-btn');
-        //btn.value = "Copied!";
+        document.getElementById("advanced_form").submit();
       } catch (err) {
-        console.error('Async: Could not copy text: ', err);
+        console.error('Could not update advanced options: ', err);
       }
     }
-    
+
   </script>
-  
+
 </body>
-</html>
+</html>

package/template/detail.html

@@ -6,21 +6,16 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <!-- Bootstrap 5.3 CSS -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
       integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
       crossorigin="anonymous">
 
-    <!-- Font Awesome 7 (latest version) -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" crossorigin="anonymous" />
-  
-    <!-- Font Poppins -->
+
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet" />
 
-    <!-- Custom CSS -->
-     <link rel="stylesheet" href="./css/detail.css">
+    <link rel="stylesheet" href="./css/detail.css">
 
-    <!-- Bootstrap 5.3 JavaScript Bundle (include Popper) -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
       integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
       crossorigin="anonymous">
@@ -36,11 +31,11 @@
 <body style="display: flex; justify-content: center;">
   <div class="content">
     <div style="margin-top: 10px;">
-      <p style="font-size: 20px;">Tiledesk <b>App Store</b></p>
+      <p style="font-size: 20px;">AI Manager <b>App Store</b></p>
     </div>
 
     <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>
@@ -49,17 +44,16 @@
       {{/if}}
     </div>
 
-
     <div class="icon-and-title" style="margin-top: 20px;">
       <div>
-        <img src="https://help.sendinblue.com/hc/article_attachments/6233343015058/Facebook_Instagram_logo_2020.png" width="180" height="auto"  />
+        <img src="https://aimanager.resultcrafter.com/assets/img/int/instagram-icon.png" width="180" height="auto"  />
       </div>
-      
+
       <div style="display: flex; flex-direction: row; justify-content: space-between; margin-left: 40px; width: 100%;">
         <div>
-          <p style="font-size: 26px; font-weight: 500; margin-bottom: 0px;">Facebook Instagram</p>
-          <p style="color: #676767; font-size: 16px; margin-bottom: 5px;">Connect your Facebook page with Tiledesk</p>
-          <a style="font-size: 18px;" href="https://tiledesk.com/" target="_blank">Tiledesk</a>
+          <p style="font-size: 26px; font-weight: 500; margin-bottom: 0px;">Instagram</p>
+          <p style="color: #676767; font-size: 16px; margin-bottom: 5px;">Connect your Instagram account with AI Manager</p>
+          <a style="font-size: 18px;" href="https://resultcrafter.com/" target="_blank">AI Manager</a>
 
           {{#if isAvailable}}
             <p style="font-size: 15px; color: #676767; font-style: italic; margin-bottom: 0px; margin-top: 20px;">Free</p>
@@ -73,31 +67,23 @@
         </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>
-            
-            <!-- Uninstall modal -->
+
             <div id="uninstall-modal" class="modal">
               <div class="modal-content">
-                <!--<span class="close">×</span-->
-                <h2>Facebook Instagram</h2>
+                <h2>Instagram</h2>
                 <div style="margin-top: 20px;">
-                  <img src="https://help.sendinblue.com/hc/article_attachments/6233343015058/Facebook_Instagram_logo_2020.png" width="70" height="auto"  />
+                  <img src="https://aimanager.resultcrafter.com/assets/img/int/instagram-icon.png" width="70" height="auto"  />
                 </div>
                 <p style="margin-top: 20px; margin-bottom: 20px;">Are you sure you want to uninstall this app?</p>
 
@@ -113,7 +99,7 @@
                 </div>
               </div>
             </div>
-            
+
           {{else}}
 
             {{#if isAvailable}}
@@ -121,14 +107,12 @@
             {{else}}
               <button class="btn install-button" disabled>Install</button>
             {{/if}}
-          
-            <!-- Install modal -->
+
             <div id="install-modal" class="modal">
               <div class="modal-content">
-                <!--<span class="close">×</span-->
-                <h2>Facebook Instagram</h2>
+                <h2>Instagram</h2>
                 <div style="margin-top: 20px;">
-                  <img src="https://help.sendinblue.com/hc/article_attachments/6233343015058/Facebook_Instagram_logo_2020.png" width="70" height="auto"  />
+                  <img src="https://aimanager.resultcrafter.com/assets/img/int/instagram-icon.png" width="70" height="auto"  />
                 </div>
                 <p style="margin-top: 20px; margin-bottom: 20px;">Are you sure you want to install this app?</p>
 
@@ -153,27 +137,18 @@
     <hr style="margin-top: 20px; margin-bottom: 20px">
 
     <p style="font-size: 18px;"><b>Screenshot from the application</b></p>
-    <!--<img src="https://media.discordapp.net/attachments/998542078587973734/1018841949534429184/2211.jpg?width=1055&height=686" style="width: 100%; height: 50%;"/>
-    <img src="https://images-ext-2.discordapp.net/external/iKwvEo-ovnWVU0wvDgOwYZXdI9jfL-kKVsTZE2-ha5M/%3Fcrop%3D1/https/tiledesk.com/wp-content/uploads/2022/08/banner-adaptive-part2-1200x480.png" style="width: 100%; height: auto;"/>-->
 
     <div class="scrollmenu">
-
       <img src="https://user-images.githubusercontent.com/45603238/195042381-995ff805-359d-4d97-af67-f86f937c175a.jpg" class="screenshot" />
-
       <img src="https://user-images.githubusercontent.com/45603238/195042391-6560424b-6a20-48ef-a5b3-981f9cbda5db.jpg" class="screenshot" />
-
-      <img src=" https://user-images.githubusercontent.com/45603238/195042354-e8ce2b8b-4a82-45b6-8ac1-c1d1bcf77e40.jpg" class="screenshot"/>
-      
+      <img src="https://user-images.githubusercontent.com/45603238/195042354-e8ce2b8b-4a82-45b6-8ac1-c1d1bcf77e40.jpg" class="screenshot"/>
       <img src="https://user-images.githubusercontent.com/45603238/196982373-6b17cf76-6608-45bf-86da-551c14c46e0f.png" class="screenshot" />
-
-     
     </div>
-    
-    
+
     <hr style="margin-top: 20px; margin-bottom: 20px">
 
     <div>
-      <h7>Receive Facebook Instagram conversations in your Tiledesk dashboard. Seamlessly Chat with your targeted audience on Instagram right from the Tiledesk dashboard.</h7>
+      <h7>Receive Instagram Direct Messages in your AI Manager dashboard. Seamlessly Chat with your targeted audience on Instagram right from the AI Manager dashboard.</h7>
 
       <ul style="margin-top: 10px; padding: 0px;">
         <div class="list-element">
@@ -198,40 +173,30 @@
         </div>
       </ul>
 
-      <!--
-      <ul style="padding: 10px 20px;">
-        <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 style="padding: 20px; background-color: aliceblue; border-radius: 8px;">
         <div style="display: flex; flex-direction: row; align-items: baseline;">
           <div>
-            <img src="https://freeiconshop.com/wp-content/uploads/edd/arrow-flat.png" width="20px" height="auto" style="margin-right: 10px;"> 
+            <img src="https://freeiconshop.com/wp-content/uploads/edd/arrow-flat.png" width="20px" height="auto" style="margin-right: 10px;">
           </div>
           <div>
-            <a href="https://gethelp.tiledesk.com/articles/facebook-instagram/" target="_blank">How to integrate Facebook Instagram with Tiledesk</a>
-            <p style="color: grey; margin-bottom: 0px;">Everything you need to know to integrate Facebook Instagram with Tiledesk</p>
+            <a href="https://gethelp.tiledesk.com/articles/facebook-instagram/" target="_blank">How to integrate Instagram with AI Manager</a>
+            <p style="color: grey; margin-bottom: 0px;">Everything you need to know to integrate Instagram DM with AI Manager</p>
           </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">Bug fixes and minor improvements</p>
       </div>
       <p style="font-size: 12px; color: #676767; margin-bottom: 0px;">Version <b>0.1.19</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">Plans upgrade</p>
@@ -246,51 +211,7 @@
       <p style="font-size: 12px; color: #676767; margin-bottom: 0px;">Version <b>0.1.16</b></p>
     </div>
 
-    <!--
-
-    <hr style="margin-top: 20px; margin-bottom: 20px">
-
-    
-    <p style="font-size: 18px;"><b>Other from Tiledesk</b> <a onclick="getParent()" target="_blank" style="font-size: 13px; margin-left: 15px;">View all</a></p>
-
-    <div>
-      <p>Visit our store and discovery all the available apps!</p>
-    </div>
-
-    
-    <div style="display: flex;">
-      <div class="app-summary-div">
-        <img src="https://cdn3.iconfinder.com/data/icons/social-media-chamfered-corner/154/telegram-512.png" width="110" height="auto">
-        <p class="app-summary-name">Telegram</p>
-      </div>
-      
-      <div class="app-summary-div">
-        <img src="https://cdn.jim-nielsen.com/ios/512/instagram-2020-11-17.png" width="110" height="auto">
-        <p class="app-summary-name">Facebook Instagram</p>
-      </div>
-      
-      <div class="app-summary-div">
-        <img src="https://i.ibb.co/yWz3bZ5/2022-04-21-11-28-20.jpg" width="110" height="auto">
-        <p class="app-summary-name">Help Center</p>
-      </div>
-      
-      <div class="app-summary-div">
-        <img src="https://i.pinimg.com/474x/f4/07/55/f407552380549b7ce1b508c5a6639b38.jpg" width="110" height="auto">
-        <p class="app-summary-name">Github</p>
-      </div>
-    </div>   
-    -->
-
     <hr style="margin-top: 50px; margin-bottom: 20px">
 
-  <!--
-  <script>
-    function getParent() {
-      let parent_base = document.referrer;
-      let app_store_url = parent_base + "dashboard/#/project/"+ {{project_id}} +"/app-store/"
-    }
-  </script>
-  -->
-
-  
 </body>
+</html>

package/template/error.html

@@ -6,21 +6,16 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <!-- Bootstrap 5.3 CSS -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
       integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
       crossorigin="anonymous">
 
-    <!-- Font Awesome 7 (latest version) -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" crossorigin="anonymous" />
-  
-    <!-- Font Poppins -->
+
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet" />
 
-    <!-- Custom CSS -->
-     <link rel="stylesheet" href="./css/error.css">
+    <link rel="stylesheet" href="./css/error.css">
 
-    <!-- Bootstrap 5.3 JavaScript Bundle (include Popper) -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
       integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
       crossorigin="anonymous">
@@ -31,22 +26,20 @@
         font-family: 'Poppins', serif;
       }
     </style>
-  
+
 </head>
 
-  
 <body>
-  
-  <!-- HEADER -->
+
   <div class="header">
     <div class="header-content">
       <div class="logo-title">
         <div class="logo-container">
-          <img src="https://user-images.githubusercontent.com/45603238/227948374-1a55c84f-af12-417c-baa7-06086f5efb5b.png" width="60px" height="60px">
+          <img src="https://aimanager.resultcrafter.com/assets/img/int/instagram-icon.png" width="60px" height="60px">
         </div>
         <div class="title-version">
-          <p class="title">Facebook Instagram Connector</p>
-          <div class="status-box" style="padding: 0px 8px; letter-spacing: 1px; height: 18px;"> 
+          <p class="title">Instagram 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>
@@ -60,5 +53,6 @@
       <p>{{ error_message }}</p>
     </div>
   </div>
-  
-</body>
+
+</body>
+</html>