@tiledesk/tiledesk-whatsapp-connector 0.1.16 → 0.1.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.js CHANGED
@@ -269,6 +269,7 @@ router.post('/update', async (req, res) => {
269
269
  token: token,
270
270
  proxy_url: proxy_url,
271
271
  wab_token: settings.wab_token,
272
+ show_success_modal: true,
272
273
  verify_token: settings.verify_token,
273
274
  subscription_id: settings.subscriptionId,
274
275
  }
@@ -327,6 +328,7 @@ router.post('/update', async (req, res) => {
327
328
  project_id: projectId,
328
329
  token: token,
329
330
  proxy_url: proxy_url,
331
+ show_success_modal: true,
330
332
  wab_token: settings.wab_token,
331
333
  verify_token: settings.verify_token,
332
334
  subscription_id: settings.subscriptionId,
@@ -340,7 +342,27 @@ router.post('/update', async (req, res) => {
340
342
  })
341
343
 
342
344
  }).catch((err) => {
343
- console.log("\n (ERROR) Subscription: ", err)
345
+
346
+ readHTMLFile('/configure.html', (err, html) => {
347
+ if (err) {
348
+ console.log("(ERROR) Read html file: ", err);
349
+ }
350
+
351
+ var template = handlebars.compile(html);
352
+ var replacements = {
353
+ app_version: pjson.version,
354
+ project_id: projectId,
355
+ token: token,
356
+ proxy_url: proxy_url,
357
+ show_error_modal: true
358
+ }
359
+ if (log) {
360
+ console.log("Replacements: ", replacements);
361
+ }
362
+
363
+ var html = template(replacements);
364
+ res.send(html);
365
+ })
344
366
  })
345
367
 
346
368
  }
@@ -356,6 +378,8 @@ router.post('/disconnect', async (req, res) => {
356
378
  let token = req.body.token;
357
379
  let subscriptionId = req.body.subscription_id;
358
380
 
381
+ console.log("uninstall --> subscriptionId: ", subscriptionId)
382
+
359
383
  let CONTENT_KEY = "whatsapp-" + projectId;
360
384
  await db.remove(CONTENT_KEY);
361
385
  console.log("Content deleted.");
@@ -705,6 +729,7 @@ function startApp(settings, callback) {
705
729
 
706
730
  db.connect(settings.MONGODB_URL, () => {
707
731
  console.log("KVBaseMongo successfully connected.");
732
+
708
733
  if (callback) {
709
734
  callback();
710
735
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tiledesk/tiledesk-whatsapp-connector",
3
- "version": "0.1.16",
3
+ "version": "0.1.17",
4
4
  "description": "Tiledesk Whatsapp connector",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -23,177 +23,242 @@
23
23
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
24
24
  integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
25
25
  </script>
26
-
27
- <link rel="stylesheet" href="./css/style.css">
28
26
 
27
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
28
+ <link rel="stylesheet" href="./css/configure.css">
29
+
30
+ <style>
31
+ body {
32
+ font-family: 'Poppins', serif;
33
+ }
34
+ </style>
35
+
29
36
  </head>
30
37
 
38
+
31
39
  <body>
40
+
41
+ <!-- Success modal -->
42
+ {{#if show_success_modal}}
43
+ <div id="success-update-modal" class="success-modal">
44
+ <div class="modal-content">
45
+ <img src="https://www.pngall.com/wp-content/uploads/9/Green-Tick-Vector-PNG-Images.png" width="80" height="auto" />
46
+ <p class="modal-text" style="margin-top: 20px; margin-bottom: 20px;">Configuration updated successfully</p>
47
+ <button class="btn cancel-btn" onclick="document.getElementById('success-update-modal').style.display='none'">Close</button>
48
+ </div>
49
+ </div>
50
+ {{/if}}
51
+
52
+ <!-- Error modal -->
53
+ {{#if show_error_modal}}
54
+ <div id="error-update-modal" class="error-modal">
55
+ <div class="modal-content">
56
+ <img src="https://cdn-icons-png.flaticon.com/512/148/148766.png" width="80" height="auto" />
57
+ <p style="margin-top: 20px; margin-bottom: 20px;">An error occurred while updating the configuration</p>
58
+ <button class="btn cancel-btn" onclick="document.getElementById('error-update-modal').style.display='none'">Close</button>
59
+ </div>
60
+ </div>
61
+ {{/if}}
62
+
63
+
32
64
 
33
- <div style="padding: 100px 230px; background-color: #efefef; min-width: 800px; display: flex; justify-content: center;" >
34
-
35
- <div style="background-color: white; border-radius: 8px; padding: 20px; box-shadow: 0px 0px 5px 0px #cfcfcf; min-width: 800px;">
36
-
37
- <div>
38
-
39
- <div style="display: flex; flex-direction: row; align-items: center;">
40
-
41
- <div style="margin-right: 80px;">
42
- <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">
65
+ <!-- HEADER -->
66
+ <div class="header">
67
+ <div class="header-content">
68
+ <div class="logo-title">
69
+ <div class="logo-container">
70
+ <img src="https://www.clipartmax.com/png/full/205-2058823_whatsapp-ios-icon-whatsapp-ios-icon-png.png" width="60px" height="60px">
71
+ </div>
72
+ <div class="title-version">
73
+ <p class="title">WhatsApp Business Connector</p>
74
+ <div class="status-box" style="padding: 0px 8px; letter-spacing: 1px; height: 18px;">
75
+ <p style="margin-bottom: 0px;">{{ app_version }}</p>
43
76
  </div>
44
-
45
- <div>
46
-
47
- <h1 style="margin-top: 0px; margin-bottom: 2px; min-width: 500px;">WhatsApp Business</h1>
48
- <div style="display: flex; flex-direction: row; align-items: flex-end;">
49
- <h7 style="color: rgb(140, 140, 140); margin-right: 10px;">by Tiledesk</h7>
50
- <div class="version">
51
- <a class="npm-link" href="https://www.npmjs.com/package/@tiledesk/tiledesk-whatsapp-connector" target="_blank">{{ app_version }}</a>
52
- </div>
53
- </div>
77
+ </div>
78
+ </div>
79
+ <div class="status-box">
80
+ <p style="margin-bottom: 0px; margin-right: 8px;">Status: </p>
81
+ {{#if wab_token}}
82
+ <i class="fa fa-circle green-circle"></i>
83
+ <p style="margin-bottom: 0px;">Connected</p>
84
+ {{else}}
85
+ <i class="fa fa-circle red-circle"></i>
86
+ <p style="margin-bottom: 0px;">Disconnected</p>
87
+ {{/if}}
88
+ </div>
89
+ </div>
90
+ </div>
54
91
 
55
- {{#if wab_token}}
56
- <div style="margin-top: 20px;">
57
- <h7 style="color: rgb(140, 140, 140);">The Whatsapp Business App is configured on your Tildesk project.</h7>
58
- <form action="./disconnect" method="post">
59
- <input type="hidden" name="project_id" value="{{ project_id }}">
60
- <input type="hidden" name="token" value="{{ token }}">
61
- <input type="hidden" name="subscription_id" value="{{ subscription_id }}">
62
- <input type="submit" class="btn btn-danger" style="margin-top: 10px; width: 160px;" value="Disconnect">
63
- </form>
64
- </div>
65
- {{/if}}
66
-
67
- </div>
92
+ <!-- INFO BOX -->
93
+ <div class="info-box">
94
+ <div class="info-list">
95
+ <ul>
96
+ <div class="list-element">
97
+ <img src="https://cdn-icons-png.flaticon.com/512/1443/1443000.png" width=20 height=20 style="margin-right: 10px;"/>
98
+ <h7>Integrate your Whatsapp number with Tiledesk</h7>
99
+ </div>
100
+ <div class="list-element">
101
+ <img src="https://cdn-icons-png.flaticon.com/512/1443/1443000.png" width=20 height=20 style="margin-right: 10px;"/>
102
+ <h7>Once a chat is initiated on your Whatsapp number, receive an alert on your Tiledesk account</h7>
68
103
  </div>
104
+ <div class="list-element">
105
+ <img src="https://cdn-icons-png.flaticon.com/512/1443/1443000.png" width=20 height=20 style="margin-right: 10px;"/>
106
+ <h7>Enable instant messaging and answer multiple conversations, everything from Tiledesk account</h7>
107
+ </div>
108
+ </ul>
109
+ </div>
110
+ </div>
69
111
 
70
- <!--
71
- <button onClick="javascript:window.open('https://gethelp.tiledesk.com/articles/telegram/', '_blank');" class="btn btn- primary">View Documentation</button>
72
- -->
73
-
74
- <div style="margin-top: 40px; padding: 20px; background-color: aliceblue; border-radius: 8px; min-width: 600px;">
75
- <h7>Receive Whatsapp bot conversations in your Tiledesk dashboard. Seamlessly Chat with your targeted audience on Whatsapp right from the Tiledesk dashboard.</h7>
76
- <ul>
77
- <li>
78
- <h7>Integrate your Whatsapp number with Tiledesk.</h7>
79
- </li>
80
- <li>
81
- <h7>Once a chat is initiated on your Whatsapp number, receive an alert on your Tiledesk account.</h7>
82
- </li>
83
- <li>
84
- <h7>Enable instant messaging and answer multiple conversations - everything from Tiledesk account.</h7>
85
- </li>
86
- </ul>
112
+ <!-- Docs Section -->
113
+ <div class="docs-box">
114
+
115
+
116
+ <div class="docs-section">
117
+ <p style="margin-top: 20px; font-size: 18px; font-weight: 600;">Before you start</p>
118
+ <div style="padding: 20px; background-color: #2fa2dc24; border-radius: 8px; width: 600px; margin-bottom: 5px;">
119
+ <div style="display: flex; flex-direction: row; align-items: baseline;">
120
+ <div>
121
+ <img src="https://freeiconshop.com/wp-content/uploads/edd/arrow-flat.png" width="20px" height="auto" style="margin-right: 10px;">
122
+ </div>
123
+ <div>
124
+ <a href="https://gethelp.tiledesk.com/articles/connect-tiledesk-with-whatsapp-business/" target="_blank">Connect Tiledesk with WhatsApp Business</a>
125
+ <p style="color: grey; margin-bottom: 0px;">A small but very useful guide on how to connect your WhatsApp Business number with Tiledesk</p>
87
126
  </div>
127
+ </div>
128
+ </div>
88
129
 
89
- <div style="margin-top: 10px;">
90
- <a href="https://gethelp.tiledesk.com/categories/whatsapp-business/" target="_blank">View documentation</a>
130
+ <div style="padding: 20px; background-color: #2fa2dc24; border-radius: 8px; width: 600px; margin-bottom: 5px;">
131
+ <div style="display: flex; flex-direction: row; align-items: baseline;">
132
+ <div>
133
+ <img src="https://freeiconshop.com/wp-content/uploads/edd/arrow-flat.png" width="20px" height="auto" style="margin-right: 10px;">
91
134
  </div>
92
-
135
+ <div>
136
+ <a href="https://gethelp.tiledesk.com/articles/configure-a-whatsapp-business-account/" target="_blank">Configure a WhatsApp Business account</a>
137
+ <p style="color: grey; margin-bottom: 0px;">Not sure how to set up a business account? Take a look here.</p>
138
+ </div>
139
+ </div>
140
+ </div>
93
141
 
94
- <hr>
142
+ </div>
143
+ </div>
144
+
95
145
 
96
-
97
- <div>
98
- <h4>Your Configuration</h4>
99
-
100
- <div style="min-width: 600px">
101
- <form action="./update" method="post">
102
-
103
- <div class="form-group" style="width: 490px;">
104
- <label for="proxy_url">Webhook Endpoint
105
- <span style="margin-left: 10px;">
106
- <i class="fa fa-question-circle custom-tooltip" style="color: #337ab7;">
107
- <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>
108
- </i>
109
- </span>
110
- </label>
111
- <!--<p style="margin-bottom: 5px; font-size: 12px; color: #a7a7a7;">Copy this URL in the Facebook Developer Dashboad. See documentation for more info.</p> -->
112
- <div style="display: flex; flex-direction: row; justify-content: space-between">
113
- <div style="width: 400px;">
114
- <input type="text" readonly class="form-control" name="proxy_url" id="proxy_url"
115
- value="{{ proxy_url}}">
116
- </div>
117
- <div style="width: 80px;">
118
- <!--
119
- <input type="button" class="btn btn-primary" style="width: 100%;"
120
- onclick="copyTextToClipboard(this, document.getElementById('proxy_url').value)"
121
- value="Copy"></input>
122
- -->
123
- <input type="button" id="copy-btn" class="btn btn-primary" style="width: 100%;"
124
- onclick="copyTextToClipboard()"
125
- value="Copy"></input>
126
- </div>
146
+ <!-- CONFIGURE BOX -->
147
+ <div class="configure-box">
148
+ <div class="configure">
149
+ <p class="title" style="margin-bottom: 20px;">Your Configuration</p>
127
150
 
151
+ <div style="min-width: 600px">
152
+ <form action="./update" method="post">
153
+ <div class="form-group" style="width: 590px;">
154
+ <label class="input-label" for="proxy_url">Webhook Endpoint</label>
155
+ <div style="display: flex; flex-direction: row;">
156
+ <div style="width: 522px;">
157
+ <div style="display: flex; flex-direction: row; align-items: center;">
158
+ <input type="text" readonly class="form-control copy-form custom-input" name="proxy_url" id="proxy_url" value="{{ proxy_url}}">
159
+ <span style="margin-left: 10px;">
160
+ <i class="fa fa-question-circle custom-tooltip">
161
+ <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.</span>
162
+ </i>
163
+ </span>
164
+
128
165
  </div>
166
+
129
167
  </div>
130
-
131
- <div class="form-group" style="width: 400px;">
132
- <label for="wab_token">Whatsapp Token
133
- <span style="margin-left: 10px;">
134
- <i class="fa fa-question-circle custom-tooltip" style="color: #337ab7;">
135
- <span class="custom-tooltiptext">Paste it the permanent WhatsApp Business token. See documention for more info.</span>
136
- </i>
137
- </span>
138
- </label>
139
- <input type="text" class="form-control" name="wab_token" value="{{ wab_token }}"
140
- placeholder="Enter the Whatsapp Token">
168
+ <div id="copy-div" class="icon-btn-div" onclick="copyTextToClipboard()">
169
+ <i class="fa fa-copy icon-btn"></i>
141
170
  </div>
142
-
143
- <div class="form-group" style="width: 400px;">
144
- <label for="verify_token">Verify Token
145
- <span style="margin-left: 10px;">
146
- <i class="fa fa-question-circle custom-tooltip" style="color: #337ab7;">
147
- <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.
148
- See documention for more info.</span>
149
- </i>
150
- </span>
151
- </label>
152
- <input type="password" class="form-control" name="verify_token" value="{{ verify_token }}"
153
- placeholder="Enter your Verify Token">
171
+ <div id="copied-div" class="icon-btn-div" style="visibility: hidden;">
172
+ <i class="fa fa-check icon-btn" style="margin-left: -74px; color: green;"></i>
154
173
  </div>
174
+ </div>
175
+ </div>
155
176
 
156
- <input type="hidden" name="project_id" value="{{ project_id }}" />
157
- <input type="hidden" name="token" value="{{ token }}" />
177
+ <!-- Whatsapp Token -->
178
+ <div class="form-group" style="width: 522px;">
179
+ <label class="input-label" for="wab_token">Whatsapp Token
180
+ </label>
181
+ <div style="display: flex; flex-direction: row; align-items: center;">
182
+ <input type="text" required class="form-control custom-input" name="wab_token" value="{{ wab_token }}" placeholder="Enter the Whatsapp Token">
183
+ <span style="margin-left: 10px;">
184
+ <i class="fa fa-question-circle custom-tooltip">
185
+ <span class="custom-tooltiptext">This is the permanent WhatsApp Business token.</span>
186
+ </i>
187
+ </span>
188
+ </div>
189
+ </div>
158
190
 
159
- {{#if wab_token}}
160
- <div style="width: 400px; text-align: right;">
161
- <input type="submit" class="btn btn-primary" style="width: 35%;" value="Update">
162
- </div>
163
- {{else}}
164
- <div style="width: 400px; text-align: right;">
165
- <input type="submit" class="btn btn-primary" style="width: 35%;" value="Connect">
166
- </div>
167
- {{/if}}
191
+ <!-- Verify Token -->
192
+ <div class="form-group" style="width: 522px;">
193
+ <label class="input-label" for="verify_token">Verify Token</label>
194
+ <div style="display: flex; flex-direction: row; align-items: center;">
195
+ <input type="password" required class="form-control custom-input" name="verify_token" value="{{ verify_token }}" placeholder="Enter your Verify Token">
196
+ <span style="margin-left: 10px;">
197
+ <i class="fa fa-question-circle custom-tooltip">
198
+ <span class="custom-tooltiptext">Choose the verification token end copy it to the Facebook Developer console in "Verify Token" in Whatsapp Configuration</span>
199
+ </i>
200
+ </span>
201
+ </div>
202
+ </div>
168
203
 
169
- </form>
204
+ <input type="hidden" name="project_id" value="{{ project_id }}" />
205
+ <input type="hidden" name="token" value="{{ token }}" />
170
206
 
171
-
172
- </div>
173
- </div>
174
-
175
- </div>
207
+ {{#if wab_token}}
208
+ <div style="width: 500px; text-align: right;">
209
+ <input type="submit" class="btn" style="width: 200px; background-color: #0ba2dc; color: white; font-weight: 500;" value="Update">
210
+ </div>
211
+ {{else}}
212
+ <div style="width: 500px; text-align: right;">
213
+ <input type="submit" class="btn" style="width: 200px; background-color: #0ba2dc; color: white; font-weight: 500;" value="Connect">
214
+ </div>
215
+ {{/if}}
216
+ </form>
217
+ </div>
176
218
 
219
+
220
+
221
+ </div>
222
+ </div>
223
+
224
+
225
+ <div class="disconnect-box">
226
+ <div class="disconnect">
227
+ <p class="title" style="margin-bottom: 20px;"> Disconnect</p>
228
+
229
+ <!-- Disconnect Button -->
230
+ {{#if wab_token}}
231
+ <div>
232
+ <p style="color: rgb(140, 140, 140);">The WhatsApp Business App is configured on your Tildesk project.</p>
233
+ <p>By clicking on disconnect you will no longer be able to receive messages from the WhatsApp channel</p>
234
+ <form action="./disconnect" method="post">
235
+ <input type="hidden" name="project_id" value="{{ project_id }}">
236
+ <input type="hidden" name="token" value="{{ token }}">
237
+ <input type="hidden" name="subscription_id" value="{{ subscription_id }}">
238
+ <input type="submit" class="btn disconnect-button" style="margin-top: 10px; width: 160px;" value="Disconnect">
239
+ </form>
240
+ </div>
241
+ {{else}}
242
+ <!-- App not configured -->
243
+ <p style="color: rgb(140, 140, 140);">The WhatsApp Business App is not yet configured on your Tildesk project.</p>
244
+ {{/if}}
177
245
  </div>
178
246
  </div>
179
247
 
180
- <script>
181
-
182
- function copyTextToClipboard2(btn, text) {
183
- console.log("Button clicked")
184
- // if (!navigator.clipboard) {
185
- // fallbackCopyTextToClipboard(text);
186
- // return;
187
- // }
188
- btn.value = "Copied!"
189
- navigator.clipboard.writeText(text).then(function () {
190
- console.log('Async: Copied to clipboard!');
191
-
192
- }, function (err) {
193
- console.error('Async: Could not copy text: ', err);
194
- });
195
- }
196
248
 
249
+ <!--
250
+ <div class="version-box">
251
+ <div class="version">
252
+ <p class="version-title">App version: </p>
253
+ <div class="status-box" style="padding: 0px 20px; letter-spacing: 1px; height: 30px;">
254
+ <p style="margin-bottom: 0px;">{{ app_version }}</p>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ -->
259
+
260
+ <script>
261
+
197
262
  function copyTextToClipboard() {
198
263
  const proxyUrl = document.getElementById('proxy_url').select()
199
264
 
@@ -201,15 +266,18 @@
201
266
  try {
202
267
  document.execCommand('copy');
203
268
  console.log('Async: Copied to clipboard!');
204
- let btn = document.getElementById('copy-btn');
205
- btn.value = "Copied!";
269
+ let el1 = document.getElementById('copy-div');
270
+ el1.style.visibility = 'hidden';
271
+
272
+ let el2 = document.getElementById('copied-div');
273
+ el2.style.visibility = 'visible';
274
+
275
+ //let btn = document.getElementById('copy-btn');
276
+ //btn.value = "Copied!";
206
277
  } catch (err) {
207
278
  console.error('Async: Could not copy text: ', err);
208
279
  }
209
-
210
-
211
- }
280
+ }
212
281
  </script>
213
282
 
214
-
215
- </body>
283
+ </body>