@textback/notification-widget 2.0.1-110361 → 2.0.1-13997
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/build/index.js +2 -5
- package/build/sdk.js +2 -2
- package/package.json +4 -5
- package/readme.md +11 -90
- package/server.js +220 -224
- package/src/libraries/localization/getLocale.js +17 -17
- package/src/libraries/localization/locales/cs.js +21 -23
- package/src/libraries/localization/locales/en.js +21 -23
- package/src/libraries/localization/locales/pl.js +21 -23
- package/src/libraries/localization/locales/ro.js +21 -23
- package/src/libraries/localization/locales/ru.js +21 -22
- package/src/libraries/localization/locales/uk.js +21 -23
- package/src/sdk/channels/facebook.js +1 -1
- package/src/sdk/channels/factory.js +33 -33
- package/src/sdk/channels/skype.js +1 -1
- package/src/sdk/channels/telegram.js +2 -2
- package/src/sdk/channels/viber.js +1 -1
- package/src/sdk/channels/vk.js +147 -158
- package/src/sdk/channels/whatsapp.js +21 -27
- package/src/sdk/sdk.js +5 -42
- package/src/sdk/utils/appInsights.js +2 -2
- package/src/sdk/utils/cookies.js +1 -18
- package/src/sdk/utils/loadDeepLink.js +13 -40
- package/src/sdk/widget/widget.js +107 -159
- package/src/widget/components/index.js +48 -52
- package/src/widget/components/tb-notification-button/facebook.js +48 -55
- package/src/widget/components/tb-notification-button/skype.js +47 -0
- package/src/widget/components/tb-notification-button/styles.scss +16 -240
- package/src/widget/components/tb-notification-button/telegram.js +48 -55
- package/src/widget/components/tb-notification-button/viber.js +49 -56
- package/src/widget/components/tb-notification-button/vk.js +83 -92
- package/src/widget/components/tb-notification-button/whatsapp.js +51 -58
- package/src/widget/components/tb-notification-widget/index.js +473 -694
- package/src/widget/components/tb-notification-widget/normalize.scss +1 -2
- package/src/widget/components/tb-notification-widget/styles.scss +180 -543
- package/src/widget/config.js +1 -1
- package/src/widget/icons/icon_facebook_circle.svg +2 -0
- package/src/widget/icons/icon_tg_circle.svg +10 -0
- package/src/widget/icons/icon_viber_circle.svg +10 -0
- package/src/widget/icons/icon_viber_new.svg +1 -1
- package/src/widget/icons/icon_vk_circle.svg +1 -1
- package/src/widget/icons/icon_whatsapp.svg +4 -4
- package/src/widget/icons/icon_whatsapp_circle.svg +2 -2
- package/src/widget/icons/icon_whatsapp_new.svg +2 -2
- package/src/widget/icons/text-back-badge.png +0 -0
- package/src/widget/locales/cz.js +20 -0
- package/src/widget/locales/en.js +20 -42
- package/src/widget/locales/index.js +8 -8
- package/src/widget/locales/pl.js +20 -42
- package/src/widget/locales/ro.js +19 -40
- package/src/widget/locales/ru.js +20 -41
- package/src/widget/locales/uk.js +20 -41
- package/src/widget/utils/getLocale.js +14 -16
- package/src/widget/utils/stringifyAttributes.js +1 -1
- package/src/widget/utils/text.js +8 -9
- package/src/widget/widget.entry.js +1 -0
- package/tests/gf.html +2 -2
- package/v8-compile-cache-0/5.1.281.102/zSvstszSagentzS_workzS5zSszSnode_moduleszSwebpack-clizSbinzScli.js.BLOB +0 -0
- package/v8-compile-cache-0/5.1.281.102/zSvstszSagentzS_workzS5zSszSnode_moduleszSwebpack-clizSbinzScli.js.MAP +1 -0
- package/views/examples.ejs +47 -51
- package/views/sdk.html +17 -35
- package/webpack.dev.js +2 -2
- package/src/sdk/channels/whatsappb.js +0 -27
- package/src/widget/components/tb-notification-button/whatsappb.js +0 -58
- package/src/widget/components/tb-nw-wahunter/index.js +0 -261
- package/src/widget/components/tb-nw-wahunter/styles.scss +0 -471
- package/src/widget/icons/icon_chat_window.svg +0 -1
- package/src/widget/icons/icon_close.svg +0 -1
- package/src/widget/icons/icon_whatsapp_hollow.svg +0 -128
- package/src/widget/icons/icon_whatsappb.svg +0 -147
- package/src/widget/icons/icon_whatsappb_circle.svg +0 -4
- package/src/widget/icons/icon_whatsappb_new.svg +0 -127
- package/src/widget/icons/paper-plane-arrow.svg +0 -3
- package/src/widget/icons/tb-logo-dark-en.svg +0 -17
- package/src/widget/icons/tb-logo-dark-ru.svg +0 -17
- package/src/widget/icons/tb-logo-dark.svg +0 -16
- package/src/widget/icons/tb-logo-light-en.svg +0 -17
- package/src/widget/icons/tb-logo-light-ru.svg +0 -17
- package/src/widget/icons/tb-logo-white.svg +0 -16
- package/src/widget/icons/tb-logo.svg +0 -16
- package/src/widget/locales/cs.js +0 -42
package/views/examples.ejs
CHANGED
|
@@ -1,51 +1,47 @@
|
|
|
1
|
-
<html>
|
|
2
|
-
<head>
|
|
3
|
-
<meta charset="UTF-8">
|
|
4
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
5
|
-
<title>example</title>
|
|
6
|
-
<link rel="stylesheet" href="https://
|
|
7
|
-
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">-->
|
|
8
|
-
<script src="https://
|
|
9
|
-
<script src="https://
|
|
10
|
-
<!-- <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,fetch,Promise"></script> -->
|
|
11
|
-
|
|
12
|
-
</head>
|
|
13
|
-
<body>
|
|
14
|
-
<div class="ui stackable two column grid padded">
|
|
15
|
-
<div class="column">
|
|
16
|
-
<form class="ui form">
|
|
17
|
-
<div class="field">
|
|
18
|
-
<label>widgetPath</label>
|
|
19
|
-
<input type="text" name="widgetPath" value="<%- query.widgetPath %>" placeholder="widgetPath">
|
|
20
|
-
</div>
|
|
21
|
-
<div class="field">
|
|
22
|
-
<label>apiPath</label>
|
|
23
|
-
<input type="text" name="apiPath" value="<%- query.apiPath %>" placeholder="apiPath">
|
|
24
|
-
</div>
|
|
25
|
-
<div class="field">
|
|
26
|
-
<label>widgetId</label>
|
|
27
|
-
<input type="text" name="widgetId" value="<%- query.widgetId %>" placeholder="widgetId">
|
|
28
|
-
</div>
|
|
29
|
-
<div class="field">
|
|
30
|
-
<label>
|
|
31
|
-
<input type="text" name="
|
|
32
|
-
</div>
|
|
33
|
-
<
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
</div>
|
|
49
|
-
</div>
|
|
50
|
-
</body>
|
|
51
|
-
</html>
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<meta charset="UTF-8">
|
|
4
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
5
|
+
<title>example</title>
|
|
6
|
+
<link rel="stylesheet" href="https://unpkg.com/semantic-ui-css/semantic.min.css">
|
|
7
|
+
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">-->
|
|
8
|
+
<script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
|
|
9
|
+
<script src="https://unpkg.com/semantic-ui-css/semantic.min.js"></script>
|
|
10
|
+
<!-- <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,fetch,Promise"></script> -->
|
|
11
|
+
|
|
12
|
+
</head>
|
|
13
|
+
<body>
|
|
14
|
+
<div class="ui stackable two column grid padded">
|
|
15
|
+
<div class="column">
|
|
16
|
+
<form class="ui form">
|
|
17
|
+
<div class="field">
|
|
18
|
+
<label>widgetPath</label>
|
|
19
|
+
<input type="text" name="widgetPath" value="<%- query.widgetPath %>" placeholder="widgetPath">
|
|
20
|
+
</div>
|
|
21
|
+
<div class="field">
|
|
22
|
+
<label>apiPath</label>
|
|
23
|
+
<input type="text" name="apiPath" value="<%- query.apiPath %>" placeholder="apiPath">
|
|
24
|
+
</div>
|
|
25
|
+
<div class="field">
|
|
26
|
+
<label>widgetId</label>
|
|
27
|
+
<input type="text" name="widgetId" value="<%- query.widgetId %>" placeholder="widgetId">
|
|
28
|
+
</div>
|
|
29
|
+
<div class="field">
|
|
30
|
+
<label>data</label>
|
|
31
|
+
<input type="text" name="data" value=<%- `${query.data}` %> placeholder="data">
|
|
32
|
+
</div>
|
|
33
|
+
<button class="ui button primary" type="submit">Render</button>
|
|
34
|
+
<a href="/examples" class="ui button">Defaults</a>
|
|
35
|
+
</form>
|
|
36
|
+
</div>
|
|
37
|
+
<div class="column">
|
|
38
|
+
<%- widgetCode %>
|
|
39
|
+
|
|
40
|
+
<div class="ui segment">
|
|
41
|
+
<pre style="padding-bottom: 20px; margin: 0 0 -20px;"><%= widgetCode %></pre>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
</body>
|
|
47
|
+
</html>
|
package/views/sdk.html
CHANGED
|
@@ -109,9 +109,6 @@
|
|
|
109
109
|
.tb-btn.tb-whatsapp {
|
|
110
110
|
background-color: #189d0e;
|
|
111
111
|
}
|
|
112
|
-
.tb-btn.tb-whatsappb {
|
|
113
|
-
background-color: #189d0e;
|
|
114
|
-
}
|
|
115
112
|
</style>
|
|
116
113
|
|
|
117
114
|
<!-- <link rel="stylesheet" href="/views/tilda.css"> -->
|
|
@@ -122,21 +119,21 @@
|
|
|
122
119
|
<div class="col-lg-12">
|
|
123
120
|
<!-- <h1>Buttons</h1>
|
|
124
121
|
<div>
|
|
125
|
-
<button type="button" id="sign_tg" class="btn btn-primary">Telegram</button>
|
|
126
|
-
<button type="button" id="sign_vk" class="btn btn-small btn-white">VKontakte</button>
|
|
127
|
-
<button type="button" id="sign_fb">Facebook</button>
|
|
122
|
+
<button type="button" id="sign_tg" class="btn btn-primary">Telegram</button>
|
|
123
|
+
<button type="button" id="sign_vk" class="btn btn-small btn-white">VKontakte</button>
|
|
124
|
+
<button type="button" id="sign_fb">Facebook</button>
|
|
128
125
|
<button type="button" id="sign_viber">Viber</button>
|
|
129
126
|
<button type="button" id="sign_wa" class="btn btn-success">WhatsApp</button>
|
|
130
127
|
</div>
|
|
131
128
|
|
|
132
129
|
<h1>Random</h1>
|
|
133
130
|
<div>
|
|
134
|
-
<button type="button" id="sign_random" class="btn btn-lg btn-white"><i class="fa fa-refresh"></i> Subscribe to random messenger</button>
|
|
131
|
+
<button type="button" id="sign_random" class="btn btn-lg btn-white"><i class="fa fa-refresh"></i> Subscribe to random messenger</button>
|
|
135
132
|
</div> -->
|
|
136
133
|
<div class="tb-buttons">
|
|
137
134
|
<div class="tb-btn-wrapper" id="tb-link">
|
|
138
135
|
<a href="#" id="sign_tg" class="tb-btn tb-tg">
|
|
139
|
-
<img src="//
|
|
136
|
+
<img src="//unpkg.com/@textback/notification-widget@latest/src/widget/icons/icon_tg.svg" alt="">
|
|
140
137
|
Telegram
|
|
141
138
|
</a>
|
|
142
139
|
<div class="tb-btn-tooltip">
|
|
@@ -145,8 +142,8 @@
|
|
|
145
142
|
</div>
|
|
146
143
|
<div class="tb-btn-wrapper" id="tb-link">
|
|
147
144
|
<a href="#" id="sign_vk" class="tb-btn tb-vk">
|
|
148
|
-
<img src="//
|
|
149
|
-
|
|
145
|
+
<img src="//unpkg.com/@textback/notification-widget@latest/src/widget/icons/icon_vk.svg" alt="">
|
|
146
|
+
VKontakte
|
|
150
147
|
</a>
|
|
151
148
|
<div class="tb-btn-tooltip">
|
|
152
149
|
Нажмите "<strong>Разрешить</strong>" во всплывающем окне
|
|
@@ -154,7 +151,7 @@
|
|
|
154
151
|
</div>
|
|
155
152
|
<div class="tb-btn-wrapper" id="tb-link">
|
|
156
153
|
<a href="#" id="sign_fb" class="tb-btn tb-facebook">
|
|
157
|
-
<img src="//
|
|
154
|
+
<img src="//unpkg.com/@textback/notification-widget@latest/src/widget/icons/icon_facebook.svg" alt="">
|
|
158
155
|
Facebook
|
|
159
156
|
</a>
|
|
160
157
|
<div class="tb-btn-tooltip">
|
|
@@ -163,7 +160,7 @@
|
|
|
163
160
|
</div>
|
|
164
161
|
<div class="tb-btn-wrapper" id="tb-link">
|
|
165
162
|
<a href="#" id="sign_viber" class="tb-btn tb-viber">
|
|
166
|
-
<img src="//
|
|
163
|
+
<img src="//unpkg.com/@textback/notification-widget@latest/src/widget/icons/icon_viber.svg" alt="">
|
|
167
164
|
Viber
|
|
168
165
|
</a>
|
|
169
166
|
<div class="tb-btn-tooltip">
|
|
@@ -172,16 +169,7 @@
|
|
|
172
169
|
</div>
|
|
173
170
|
<div class="tb-btn-wrapper" id="tb-link">
|
|
174
171
|
<a href="#" id="sign_wa" class="tb-btn tb-whatsapp">
|
|
175
|
-
<img src="//
|
|
176
|
-
WhatsApp
|
|
177
|
-
</a>
|
|
178
|
-
<div class="tb-btn-tooltip">
|
|
179
|
-
Отправьте <strong>предзаполненный текст</strong> в WhatsApp без изменений
|
|
180
|
-
</div>
|
|
181
|
-
</div>
|
|
182
|
-
<div class="tb-btn-wrapper" id="tb-link">
|
|
183
|
-
<a href="#" id="sign_wab" class="tb-btn tb-whatsapp">
|
|
184
|
-
<img src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/src/widget/icons/icon_whatsappb.svg" alt="">
|
|
172
|
+
<img src="//unpkg.com/@textback/notification-widget@latest/src/widget/icons/icon_whatsapp.svg" alt="">
|
|
185
173
|
WhatsApp
|
|
186
174
|
</a>
|
|
187
175
|
<div class="tb-btn-tooltip">
|
|
@@ -200,17 +188,17 @@
|
|
|
200
188
|
someProp: 123,
|
|
201
189
|
};
|
|
202
190
|
</script>
|
|
191
|
+
|
|
192
|
+
|
|
203
193
|
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
<script src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/build/sdk.js"></script>
|
|
194
|
+
<script src="//unpkg.com/@textback/notification-widget@latest/build/sdk.js"></script>
|
|
207
195
|
<!-- <script src="/build/sdk.js"></script> -->
|
|
208
196
|
|
|
209
197
|
<script type="text/javascript">
|
|
210
|
-
var config = {
|
|
198
|
+
var config = {
|
|
211
199
|
widgetId: 'a74bf35b-bbef-482d-b4aa-0c6795021806',
|
|
212
200
|
apiPath: 'https://tb-apisrv-dev.textback.io/api',
|
|
213
|
-
};
|
|
201
|
+
};
|
|
214
202
|
|
|
215
203
|
var off = TextBack.SDK.on('widget.init', function(event) {
|
|
216
204
|
console.log(`First widget has been initialized. ${event.widgetId}`);
|
|
@@ -251,13 +239,7 @@
|
|
|
251
239
|
event.preventDefault();
|
|
252
240
|
widget.subscribe('whatsapp');
|
|
253
241
|
});
|
|
254
|
-
|
|
255
|
-
// WhatsApp Business
|
|
256
|
-
document.getElementById('sign_wab').addEventListener('click', function(event) {
|
|
257
|
-
event.preventDefault();
|
|
258
|
-
widget.subscribe('whatsappb');
|
|
259
|
-
});
|
|
260
|
-
}, function(err) {
|
|
242
|
+
}, function(err) {
|
|
261
243
|
console.log('error', err)
|
|
262
244
|
});
|
|
263
245
|
|
|
@@ -271,4 +253,4 @@
|
|
|
271
253
|
// });
|
|
272
254
|
</script>
|
|
273
255
|
</body>
|
|
274
|
-
</html>
|
|
256
|
+
</html>
|
package/webpack.dev.js
CHANGED
|
@@ -2,7 +2,7 @@ const merge = require('webpack-merge');
|
|
|
2
2
|
const common = require('./webpack.common.js');
|
|
3
3
|
|
|
4
4
|
module.exports = merge(common, {
|
|
5
|
-
devtool: '
|
|
5
|
+
devtool: 'cheap-inline-module-source-map',
|
|
6
6
|
watch: true,
|
|
7
7
|
/*devServer: {
|
|
8
8
|
contentBase: './build',
|
|
@@ -12,4 +12,4 @@ module.exports = merge(common, {
|
|
|
12
12
|
poll: 1000
|
|
13
13
|
},
|
|
14
14
|
}*/
|
|
15
|
-
});
|
|
15
|
+
});
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import Channel from './channel.js';
|
|
2
|
-
import browserInfo from '../utils/browserInfo.js';
|
|
3
|
-
import getLocale from '../../libraries/localization/getLocale.js';
|
|
4
|
-
import text from '../../libraries/localization/text.js';
|
|
5
|
-
|
|
6
|
-
export default class WhatsappbChannel extends Channel {
|
|
7
|
-
constructor(channelData = {}, deeplink, widget) {
|
|
8
|
-
super(channelData, deeplink, widget);
|
|
9
|
-
|
|
10
|
-
this.domainPrefix = browserInfo.isMobile() ? 'api' : 'web';
|
|
11
|
-
|
|
12
|
-
if(channelData.hasOwnProperty('additionalProperties') && channelData.additionalProperties.hasOwnProperty('customDeeplinkValue')) {
|
|
13
|
-
this.customText = channelData.additionalProperties.customDeeplinkValue;
|
|
14
|
-
} else {
|
|
15
|
-
this.customText = null;
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
subscribe() {
|
|
20
|
-
super.subscribe();
|
|
21
|
-
|
|
22
|
-
let prefixText = text('whatsapp_prefixtext', getLocale());
|
|
23
|
-
let deeplink = this.customText ? this.customText : `${prefixText} ${this.deeplink}`;
|
|
24
|
-
|
|
25
|
-
window.open(`https://api.whatsapp.com/send/?phone=+${this.id}&text=${encodeURIComponent(deeplink)}&app_absent=0`, 'whatsappb');
|
|
26
|
-
}
|
|
27
|
-
}
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import Button from './index.js';
|
|
2
|
-
import icon from '../../icons/icon_whatsappb.svg';
|
|
3
|
-
import iconNew from '../../icons/icon_whatsappb_new.svg';
|
|
4
|
-
import iconCircle from '../../icons/icon_whatsappb_circle.svg';
|
|
5
|
-
import constants from '../../../sdk/utils/constants.js';
|
|
6
|
-
|
|
7
|
-
const prefixText = encodeURIComponent('Отправьте не изменяя это сообщение ');
|
|
8
|
-
|
|
9
|
-
class WhatsappbButton extends Button {
|
|
10
|
-
render() {
|
|
11
|
-
super.render();
|
|
12
|
-
|
|
13
|
-
const link = this.element.querySelector('a');
|
|
14
|
-
link.addEventListener('click', (event) => {
|
|
15
|
-
event.preventDefault();
|
|
16
|
-
this.channelAPI.subscribe();
|
|
17
|
-
});
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
get template() {
|
|
21
|
-
if (this.config.type === constants.WIDGET_TYPE_API_CALL) {
|
|
22
|
-
return `
|
|
23
|
-
<a target="_blank" href="https://api.whatsapp.com/send/?phone=+${this.config.id}&text=${prefixText + this.deepLink}">
|
|
24
|
-
<tb-notification-button__icon>${icon}</tb-notification-button__icon>
|
|
25
|
-
<tb-notification-button__text>${this.text('whatsappb')}</tb-notification-button__text>
|
|
26
|
-
</a>
|
|
27
|
-
<p class="tb-notification-button__tip">
|
|
28
|
-
${this.text('whatsappTip')}
|
|
29
|
-
</p>
|
|
30
|
-
`;
|
|
31
|
-
} else if(this.config.markUp.style === 'gradient' || this.config.markUp.style === 'icons') {
|
|
32
|
-
return `
|
|
33
|
-
<a target="_blank" href="https://api.whatsapp.com/send/?phone=+${this.config.id}&text=${prefixText + this.deepLink}">
|
|
34
|
-
<tb-notification-button__icon>${iconCircle}</tb-notification-button__icon>
|
|
35
|
-
<tb-notification-button__text>${this.text('whatsappb')}</tb-notification-button__text>
|
|
36
|
-
</a>
|
|
37
|
-
`;
|
|
38
|
-
} else if (this.config.markUp.style !== 'square') {
|
|
39
|
-
return `
|
|
40
|
-
<a target="_blank" href="https://api.whatsapp.com/send/?phone=+${this.config.id}&text=${prefixText + this.deepLink}">
|
|
41
|
-
<tb-notification-button__icon>${( this.config.markUp.style === 'rounded' ? iconCircle : icon )}</tb-notification-button__icon>
|
|
42
|
-
<tb-notification-button__text>${this.text('whatsappb')}</tb-notification-button__text>
|
|
43
|
-
</a>
|
|
44
|
-
`;
|
|
45
|
-
} else {
|
|
46
|
-
return `
|
|
47
|
-
<div class="tb-notification-button__inner">
|
|
48
|
-
<tb-notification-button__icon>${iconNew}</tb-notification-button__icon>
|
|
49
|
-
<a target="_blank" href="https://api.whatsapp.com/send/?phone=+${this.config.id}&text=${prefixText + this.deepLink}">
|
|
50
|
-
<tb-notification-button__text>${this.text('whatsappbExtended')}</tb-notification-button__text>
|
|
51
|
-
</a>
|
|
52
|
-
</div>
|
|
53
|
-
`;
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
module.exports = WhatsappbButton;
|
|
@@ -1,261 +0,0 @@
|
|
|
1
|
-
import Component from '../index.js';
|
|
2
|
-
import arrowIcon from '../../icons/paper-plane-arrow.svg';
|
|
3
|
-
import waIcon from '../../icons/icon_whatsapp_new.svg';
|
|
4
|
-
import iconTbLogoLightRu from '../../icons/tb-logo-light-ru.svg'
|
|
5
|
-
import iconTbLogoLightEn from '../../icons/tb-logo-light-en.svg'
|
|
6
|
-
|
|
7
|
-
import './styles.scss';
|
|
8
|
-
|
|
9
|
-
const parsePhoneNumber = (phoneString) => phoneString.replace(/[^\d]/g, '');
|
|
10
|
-
|
|
11
|
-
export default class Wahunter extends Component {
|
|
12
|
-
constructor() {
|
|
13
|
-
super(...arguments);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
render() {
|
|
18
|
-
this.lang = this.widgetAPI.config.lang || this.parentElement.getAttribute('lang');
|
|
19
|
-
this.logo = (this.lang === 'ru') ? iconTbLogoLightRu : iconTbLogoLightEn || iconTbLogoLightRu;
|
|
20
|
-
|
|
21
|
-
super.render();
|
|
22
|
-
this.submitFormElem = this.element.querySelector(`.${Wahunter.tagName}__submit-form`);
|
|
23
|
-
this.addListeners();
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
addListeners() {
|
|
27
|
-
this.submitFormElem.addEventListener('submit', (e) => {
|
|
28
|
-
e.preventDefault();
|
|
29
|
-
this.submit();
|
|
30
|
-
});
|
|
31
|
-
|
|
32
|
-
this.submitFormElem.phoneNumber.addEventListener('input', (e) => {
|
|
33
|
-
const target = e.target;
|
|
34
|
-
let selectionPos = target.selectionStart;
|
|
35
|
-
let newValue = parsePhoneNumber(target.value);
|
|
36
|
-
|
|
37
|
-
if (['7', '8'].includes(newValue[0]) || newValue.slice(0, 2) === '+7') {
|
|
38
|
-
newValue = newValue.slice(0, 11);
|
|
39
|
-
newValue = (newValue + '_'.repeat(11 - newValue.length)).replace(/(.{1})(.{3})(.{3})(.{2})(.{2})/, "+7 ($2) $3-$4-$5");
|
|
40
|
-
|
|
41
|
-
const indexOfFirstUnderscore = newValue.indexOf('_');
|
|
42
|
-
const indexOfLastNumber = newValue.lastIndexOf(newValue.match(/\d/g).pop());
|
|
43
|
-
|
|
44
|
-
if (target.value[selectionPos] === "_") {
|
|
45
|
-
selectionPos = indexOfLastNumber + 1;
|
|
46
|
-
} else {
|
|
47
|
-
selectionPos = indexOfFirstUnderscore;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
target.value = newValue;
|
|
51
|
-
return target.setSelectionRange(selectionPos, selectionPos);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
if (target.value[0] === '+') {
|
|
55
|
-
newValue = `+${newValue}`;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
target.value = newValue;
|
|
59
|
-
});
|
|
60
|
-
|
|
61
|
-
this.submitFormElem.tryAgain.addEventListener('click', (e) => {
|
|
62
|
-
if (this.widgetAPI.config.displayMode !== 'inline') {
|
|
63
|
-
this.element.querySelector(`.${Wahunter.tagName}__text-content`).style = null;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
this.changeSubmitFormState('initial');
|
|
67
|
-
});
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
getTbBrandBadge({ displayMode }) {
|
|
71
|
-
const utmMedium = 'hunter';
|
|
72
|
-
return `
|
|
73
|
-
<a target="_blank"
|
|
74
|
-
href="//textback.ru/?utm_source=TextBack_tool&utm_medium=${utmMedium}&utm_campaign=${window.location.origin}${window.location.pathname}&utm_content=${displayMode}"
|
|
75
|
-
|
|
76
|
-
id="tb-notification-brand-badge"
|
|
77
|
-
style="${displayMode === 'inline' ? 'fill:inherit; color: inherit;' : ''}"
|
|
78
|
-
>
|
|
79
|
-
${this.logo}
|
|
80
|
-
</a>
|
|
81
|
-
`;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
submit() {
|
|
86
|
-
const phoneNumber = +parsePhoneNumber(this.submitFormElem.phoneNumber.value);
|
|
87
|
-
|
|
88
|
-
if (this.widgetAPI.config.displayMode !== 'inline') {
|
|
89
|
-
this.element.querySelector(`.${Wahunter.tagName}__text-content`).style.display = 'none';
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
this.changeSubmitFormState('pending');
|
|
93
|
-
|
|
94
|
-
setTimeout(() => {
|
|
95
|
-
this.widgetAPI.runWahunter(phoneNumber)
|
|
96
|
-
.then(() => this.changeSubmitFormState('success'))
|
|
97
|
-
.catch((error) => {
|
|
98
|
-
if (error.status === 400) return this.changeSubmitFormState('notFound');
|
|
99
|
-
|
|
100
|
-
this.changeSubmitFormState('error');
|
|
101
|
-
});
|
|
102
|
-
}, 1500);
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
changeSubmitFormState(stateName) {
|
|
107
|
-
const submitFormElem = this.submitFormElem;
|
|
108
|
-
let messageText = '';
|
|
109
|
-
let tryAgainText = '';
|
|
110
|
-
let emoji = '';
|
|
111
|
-
|
|
112
|
-
switch (stateName) {
|
|
113
|
-
case 'pending': {
|
|
114
|
-
submitFormElem.dataset.state = 'pending';
|
|
115
|
-
messageText = this.text('sendMessage');
|
|
116
|
-
emoji = '⏳';
|
|
117
|
-
break;
|
|
118
|
-
}
|
|
119
|
-
case 'success': {
|
|
120
|
-
submitFormElem.dataset.state = 'success';
|
|
121
|
-
messageText = this.text('answerSuccessful');
|
|
122
|
-
emoji = '👍';
|
|
123
|
-
break;
|
|
124
|
-
}
|
|
125
|
-
case 'notFound': {
|
|
126
|
-
submitFormElem.dataset.state = 'notFound';
|
|
127
|
-
messageText = this.text('numberNotFound');
|
|
128
|
-
emoji = '🕵️♂️';
|
|
129
|
-
tryAgainText = this.text('tryAgain');
|
|
130
|
-
break;
|
|
131
|
-
}
|
|
132
|
-
case 'error': {
|
|
133
|
-
submitFormElem.dataset.state = 'error';
|
|
134
|
-
messageText = this.text('somethingWentWrong');
|
|
135
|
-
emoji = '👨🔧';
|
|
136
|
-
tryAgainText = this.text('errorTryAgain');
|
|
137
|
-
break;
|
|
138
|
-
}
|
|
139
|
-
default: {
|
|
140
|
-
submitFormElem.dataset.state = 'initial';
|
|
141
|
-
break;
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
submitFormElem.querySelector(`.${Wahunter.tagName}__state-report-emoji`).textContent = emoji;
|
|
146
|
-
submitFormElem.querySelector(`.${Wahunter.tagName}__state-report-message`).innerHTML = messageText;
|
|
147
|
-
submitFormElem.tryAgain.textContent = tryAgainText;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
get template() {
|
|
152
|
-
const {
|
|
153
|
-
displayMode,
|
|
154
|
-
markUp: {
|
|
155
|
-
image,
|
|
156
|
-
header,
|
|
157
|
-
description,
|
|
158
|
-
},
|
|
159
|
-
} = this.widgetAPI.config;
|
|
160
|
-
|
|
161
|
-
if (displayMode === 'inline') return this.submitFormTemplate;
|
|
162
|
-
|
|
163
|
-
if (displayMode === 'popup') {
|
|
164
|
-
return `
|
|
165
|
-
<div class="${Wahunter.tagName}__top-img" style="background-image: url(${image.url})"></div>
|
|
166
|
-
|
|
167
|
-
<div class="${Wahunter.tagName}__img">
|
|
168
|
-
<img src="${image.url}">
|
|
169
|
-
</div>
|
|
170
|
-
|
|
171
|
-
<div class="${Wahunter.tagName}__main-content">
|
|
172
|
-
<div class="${Wahunter.tagName}__text-content">
|
|
173
|
-
<div class="${Wahunter.tagName}__headline" style="color:${header.color}">
|
|
174
|
-
${header.value}
|
|
175
|
-
</div>
|
|
176
|
-
<div class="${Wahunter.tagName}__description" style="color:${description.color}">
|
|
177
|
-
${description.value}
|
|
178
|
-
</div>
|
|
179
|
-
</div>
|
|
180
|
-
|
|
181
|
-
${this.submitFormTemplate}
|
|
182
|
-
</div>
|
|
183
|
-
`;
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
if (displayMode === 'corner-popup') {
|
|
187
|
-
return `
|
|
188
|
-
<div class="${Wahunter.tagName}__text-content">
|
|
189
|
-
<div class="${Wahunter.tagName}__headline" style="color:${header.color}">
|
|
190
|
-
${header.value}
|
|
191
|
-
</div>
|
|
192
|
-
</div>
|
|
193
|
-
${this.submitFormTemplate}
|
|
194
|
-
`
|
|
195
|
-
}
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
get submitFormTemplate() {
|
|
200
|
-
let {
|
|
201
|
-
displayMode,
|
|
202
|
-
showWahunterAgreement,
|
|
203
|
-
markUp: {
|
|
204
|
-
wahunterButton,
|
|
205
|
-
header,
|
|
206
|
-
},
|
|
207
|
-
} = this.widgetAPI.config;
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
const landingPlacesUrls = [
|
|
211
|
-
'lp.textback.ru',
|
|
212
|
-
'lp.textback.io',
|
|
213
|
-
'lp-dev.textback.ru',
|
|
214
|
-
'tb-opsrv-dev.textback.io/messaging.html#!/mini-landings',
|
|
215
|
-
'my.textback.io/messaging.html#!/mini-landings',
|
|
216
|
-
'landings.textback.io',
|
|
217
|
-
];
|
|
218
|
-
|
|
219
|
-
const isTBMiniLanding = landingPlacesUrls.some((url) => location.href.includes(url));
|
|
220
|
-
|
|
221
|
-
return `
|
|
222
|
-
<form class="${Wahunter.tagName}__submit-form" data-state="initial">
|
|
223
|
-
<div class="${Wahunter.tagName}__submit-form-controls">
|
|
224
|
-
<div class="${Wahunter.tagName}__phone-input-container">
|
|
225
|
-
<input type="text" class="${Wahunter.tagName}__phone-input" name="phoneNumber" placeholder="${this.text('enterNumber')}" required>
|
|
226
|
-
|
|
227
|
-
<button class="${Wahunter.tagName}__submit-button" style="color:${wahunterButton.textColor};background-color:${wahunterButton.color}">
|
|
228
|
-
${wahunterButton.text}
|
|
229
|
-
<div class="${Wahunter.tagName}__submit-button-icon">
|
|
230
|
-
${arrowIcon}
|
|
231
|
-
</div>
|
|
232
|
-
</button>
|
|
233
|
-
</div>
|
|
234
|
-
|
|
235
|
-
<div class="${Wahunter.tagName}__submit-form-footer" style="${showWahunterAgreement ? '' : 'display:none'}">
|
|
236
|
-
<label class="${Wahunter.tagName}__agreement">
|
|
237
|
-
<input type="checkbox" required checked>
|
|
238
|
-
<span class="${Wahunter.tagName}__agreement-text">${this.text('getAnswer')}<span class="${Wahunter.tagName}__agreement-wa-icon">${waIcon}</span>WhatsApp</span>
|
|
239
|
-
</label>
|
|
240
|
-
</div>
|
|
241
|
-
</div>
|
|
242
|
-
|
|
243
|
-
<div class="${Wahunter.tagName}__state-report">
|
|
244
|
-
<div class="${Wahunter.tagName}__state-report-emoji"></div>
|
|
245
|
-
|
|
246
|
-
<div class="${Wahunter.tagName}__state-report-message-container"
|
|
247
|
-
style="${displayMode === 'inline' ? ('color:' + header.color + ';' + 'fill:' + header.color) : ''}">
|
|
248
|
-
<div class="${Wahunter.tagName}__state-report-message"></div>
|
|
249
|
-
<button class="${Wahunter.tagName}__try-again-button" type="button" name="tryAgain"></button>
|
|
250
|
-
${displayMode === 'inline' && !isTBMiniLanding ? this.getTbBrandBadge(this.widgetAPI.config) : ''}
|
|
251
|
-
</div>
|
|
252
|
-
</div>
|
|
253
|
-
</form>
|
|
254
|
-
`
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
static get tagName() {
|
|
259
|
-
return 'tb-nw-wahunter';
|
|
260
|
-
}
|
|
261
|
-
};
|