@subiz/widget-v4 4.1.27 → 4.1.29
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/compiled_src/chatbox/GenericTemplateAttachments.js +5 -1
- package/compiled_src/chatbox/ProductAttachments.js +7 -2
- package/compiled_src/chatbox/Widget.js +12 -0
- package/compiled_src/chatbox/main.js +24 -2
- package/compiled_src/util/campaign.js +23 -10
- package/compiled_src/util/common.js +667 -4
- package/compiled_src/util/order.js +4 -2
- package/compiled_src/util/pubsub.js +6 -3
- package/index.html +8 -0
- package/package.json +10 -10
- package/src/chatbox/GenericTemplateAttachments.js +5 -5
- package/src/chatbox/ProductAttachments.js +7 -6
- package/src/chatbox/Widget.js +14 -0
- package/src/chatbox/main.js +24 -1
- package/src/util/campaign.js +29 -8
- package/src/util/common.js +198 -3
|
@@ -46,12 +46,16 @@ class GenericTemplateAttachments extends _common.Com {
|
|
|
46
46
|
let $subtitle = subtitle ? (0, _preact.h)("div", {
|
|
47
47
|
class: "generic-attachment--element-subtitle"
|
|
48
48
|
}, subtitle) : null;
|
|
49
|
+
let imgsrc = this.props.store.replaceFileUrl(ele.image_url);
|
|
50
|
+
if (!ele.image_url) {
|
|
51
|
+
imgsrc = require('../../assets/img/default.jpg');
|
|
52
|
+
}
|
|
49
53
|
return (0, _preact.h)("div", {
|
|
50
54
|
class: "generic-attachment--element swiper-slide"
|
|
51
55
|
}, (0, _preact.h)("div", null, (0, _preact.h)("img", {
|
|
52
56
|
alt: "generic attachment element",
|
|
53
57
|
class: "generic-attachment--element-img",
|
|
54
|
-
src:
|
|
58
|
+
src: imgsrc
|
|
55
59
|
})), (0, _preact.h)("div", {
|
|
56
60
|
class: "generic-attachment--element-content"
|
|
57
61
|
}, $title, $subtitle), (0, _preact.h)(_Buttons.default, {
|
|
@@ -72,11 +72,16 @@ class ProductAttachments extends _common.Com {
|
|
|
72
72
|
if (desc) $subtitle = (0, _preact.h)("div", {
|
|
73
73
|
class: "product_attachment__subtitle"
|
|
74
74
|
}, desc);
|
|
75
|
+
let currency = product.currency || _index.default.get(acc, 'currency', 'VND');
|
|
75
76
|
let $price = null;
|
|
76
77
|
if (product.price) {
|
|
77
78
|
$price = (0, _preact.h)("div", {
|
|
78
79
|
class: "product_attachment__price"
|
|
79
|
-
},
|
|
80
|
+
}, _index.default.formatCurrency(product.price, currency));
|
|
81
|
+
}
|
|
82
|
+
let imgsrc = this.props.store.replaceFileUrl(product.image);
|
|
83
|
+
if (!product.image) {
|
|
84
|
+
imgsrc = require('../../assets/img/default.jpg');
|
|
80
85
|
}
|
|
81
86
|
return (0, _preact.h)("div", {
|
|
82
87
|
class: 'product_attachment product_attachment__' + byType
|
|
@@ -85,7 +90,7 @@ class ProductAttachments extends _common.Com {
|
|
|
85
90
|
target: "_blank"
|
|
86
91
|
}, (0, _preact.h)("img", {
|
|
87
92
|
class: "product_attachment__img",
|
|
88
|
-
src:
|
|
93
|
+
src: imgsrc
|
|
89
94
|
}))), $title, $subtitle, $price, (0, _preact.h)("div", {
|
|
90
95
|
class: "product_attachment__btns"
|
|
91
96
|
}, $detailbtns));
|
|
@@ -86,6 +86,7 @@ class Widget extends _common.Com {
|
|
|
86
86
|
this.focusInput();
|
|
87
87
|
});
|
|
88
88
|
this.userSent = {};
|
|
89
|
+
this.wasFormInputed = false;
|
|
89
90
|
this.setState({
|
|
90
91
|
creating: false,
|
|
91
92
|
clickedJoin: false,
|
|
@@ -289,6 +290,7 @@ class Widget extends _common.Com {
|
|
|
289
290
|
if (!this.props.store.isMobile()) this.focusInput();
|
|
290
291
|
}
|
|
291
292
|
onBooleanChange(key, e) {
|
|
293
|
+
this.wasFormInputed = true;
|
|
292
294
|
let formData = _index.default.cloneDeep(this.state.formData);
|
|
293
295
|
let field = _index.default.find(formData, (_, fkkey) => fkkey === key);
|
|
294
296
|
if (!field) return;
|
|
@@ -298,6 +300,7 @@ class Widget extends _common.Com {
|
|
|
298
300
|
});
|
|
299
301
|
}
|
|
300
302
|
onInputChange(key, val) {
|
|
303
|
+
this.wasFormInputed = true;
|
|
301
304
|
let formData = _index.default.cloneDeep(this.state.formData);
|
|
302
305
|
let field = _index.default.find(formData, (_, fkkey) => fkkey === key);
|
|
303
306
|
if (!field) return;
|
|
@@ -307,6 +310,7 @@ class Widget extends _common.Com {
|
|
|
307
310
|
});
|
|
308
311
|
}
|
|
309
312
|
onListAddItem(key, val) {
|
|
313
|
+
this.wasFormInputed = true;
|
|
310
314
|
let formData = _index.default.cloneDeep(this.state.formData);
|
|
311
315
|
let field = _index.default.find(formData, (_, fkkey) => fkkey === key);
|
|
312
316
|
if (!field) return;
|
|
@@ -317,6 +321,7 @@ class Widget extends _common.Com {
|
|
|
317
321
|
});
|
|
318
322
|
}
|
|
319
323
|
onListRemoveItem(key, index) {
|
|
324
|
+
this.wasFormInputed = true;
|
|
320
325
|
let formData = _index.default.cloneDeep(this.state.formData);
|
|
321
326
|
let field = _index.default.find(formData, (_, fkkey) => fkkey === key);
|
|
322
327
|
if (!field) return;
|
|
@@ -348,6 +353,7 @@ class Widget extends _common.Com {
|
|
|
348
353
|
}));
|
|
349
354
|
}
|
|
350
355
|
toggleCheckboxField(key, v) {
|
|
356
|
+
this.wasFormInputed = true;
|
|
351
357
|
let formData = _index.default.cloneDeep(this.state.formData);
|
|
352
358
|
let field = _index.default.find(formData, (f, fkkey) => f.key === key);
|
|
353
359
|
if (!field) return;
|
|
@@ -385,6 +391,7 @@ class Widget extends _common.Com {
|
|
|
385
391
|
}));
|
|
386
392
|
}
|
|
387
393
|
toggleRadioField(key, v) {
|
|
394
|
+
this.wasFormInputed = true;
|
|
388
395
|
let formData = _index.default.cloneDeep(this.state.formData);
|
|
389
396
|
let field = _index.default.find(formData, (f, fkkey) => f.key === key);
|
|
390
397
|
if (!field) return;
|
|
@@ -394,6 +401,7 @@ class Widget extends _common.Com {
|
|
|
394
401
|
});
|
|
395
402
|
}
|
|
396
403
|
selectDropdownField(key, v) {
|
|
404
|
+
this.wasFormInputed = true;
|
|
397
405
|
let formData = _index.default.cloneDeep(this.state.formData);
|
|
398
406
|
let field = _index.default.find(formData, (f, fkkey) => f.key === key);
|
|
399
407
|
if (!field) return;
|
|
@@ -690,11 +698,15 @@ class Widget extends _common.Com {
|
|
|
690
698
|
createPostback(postback) {
|
|
691
699
|
this.props.store.createPostback(this.props.cid, postback);
|
|
692
700
|
}
|
|
701
|
+
onChangeMessageInput() {
|
|
702
|
+
this.wasFormInputed = true;
|
|
703
|
+
}
|
|
693
704
|
renderChat() {
|
|
694
705
|
let $input = (0, _preact.h)(_MessageInput.default, {
|
|
695
706
|
store: this.props.store,
|
|
696
707
|
ref: this.msgInput,
|
|
697
708
|
cid: this.props.cid,
|
|
709
|
+
onChange: this.onChangeMessageInput,
|
|
698
710
|
onSend: this.sendMessage,
|
|
699
711
|
t: this.props.t
|
|
700
712
|
});
|
|
@@ -17,6 +17,7 @@ class Main extends _common.Com {
|
|
|
17
17
|
constructor(props) {
|
|
18
18
|
super(props);
|
|
19
19
|
this.refButton = (0, _preact.createRef)();
|
|
20
|
+
this.refWidget = (0, _preact.createRef)();
|
|
20
21
|
}
|
|
21
22
|
async refreshCSS() {
|
|
22
23
|
let plugins = this.props.store.matchPlugin();
|
|
@@ -45,7 +46,7 @@ class Main extends _common.Com {
|
|
|
45
46
|
});
|
|
46
47
|
this.checkExpand();
|
|
47
48
|
this.props.store.onResetCSS(this, () => this.refreshCSS());
|
|
48
|
-
this.props.store.onConvoEvent(this,
|
|
49
|
+
this.props.store.onConvoEvent(this, ev => this.onConvoEvent(ev));
|
|
49
50
|
this.props.store.onUpdate(this, _ => this.checkExpand());
|
|
50
51
|
await this.refreshCSS();
|
|
51
52
|
this.setState({
|
|
@@ -83,9 +84,30 @@ class Main extends _common.Com {
|
|
|
83
84
|
isShow: this.state.isShowWidget,
|
|
84
85
|
onClose: a => this.onWidgetClose(a),
|
|
85
86
|
onGo: a => this.showWidget(a),
|
|
86
|
-
t: this.props.t
|
|
87
|
+
t: this.props.t,
|
|
88
|
+
ref: this.refWidget
|
|
87
89
|
}));
|
|
88
90
|
}
|
|
91
|
+
onConvoEvent(ev) {
|
|
92
|
+
this.checkExpand();
|
|
93
|
+
this.checkShowBotConvo(ev);
|
|
94
|
+
}
|
|
95
|
+
checkShowBotConvo(ev) {
|
|
96
|
+
let $widget = this.refWidget.current;
|
|
97
|
+
if (!$widget) return;
|
|
98
|
+
if ($widget.wasFormInputed) return;
|
|
99
|
+
if (ev.type !== 'message_sent') return;
|
|
100
|
+
if (!this.state.isShowWidget) return;
|
|
101
|
+
let byType = _index.default.get(ev, 'by.type');
|
|
102
|
+
let byid = _index.default.get(ev, 'by.id') || '';
|
|
103
|
+
if (!byid.startsWith('bb') || byType !== 'agent') return;
|
|
104
|
+
let cid = _index.default.get(ev, 'data.message.conversation_id');
|
|
105
|
+
if (!cid) return;
|
|
106
|
+
this.showWidget({
|
|
107
|
+
cid,
|
|
108
|
+
view: 'chat'
|
|
109
|
+
});
|
|
110
|
+
}
|
|
89
111
|
checkExpand() {
|
|
90
112
|
if (this.props.store.isMobile()) return;
|
|
91
113
|
if (this.props.plugin._no_auto_expand) return;
|
|
@@ -34,17 +34,12 @@ function trackAreaClicked(selector, cb) {
|
|
|
34
34
|
common.map(selector.split('\n'), selector => {
|
|
35
35
|
selector = common.trim(selector);
|
|
36
36
|
if (!selector) return;
|
|
37
|
-
|
|
38
|
-
try {
|
|
39
|
-
doms = document.querySelectorAll(selector);
|
|
40
|
-
} catch (e) {}
|
|
41
|
-
common.map(doms, dom => {
|
|
42
|
-
if (!dom) return;
|
|
43
|
-
dom.addEventListener('click', cb, false);
|
|
44
|
-
});
|
|
37
|
+
on('click', selector, cb);
|
|
45
38
|
});
|
|
46
39
|
}
|
|
47
|
-
function trackInactivity(
|
|
40
|
+
function trackInactivity() {
|
|
41
|
+
let seconds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
42
|
+
let cb = arguments.length > 1 ? arguments[1] : undefined;
|
|
48
43
|
let events = ['scroll', 'keyup', 'keydown', 'mousemove', 'mousewheel', 'mouseenter', 'mouseover', 'mousedown', 'touchstart', 'touchmove', 'touchenter'];
|
|
49
44
|
let inactiveSeconds = 0;
|
|
50
45
|
let resetTime = () => {
|
|
@@ -67,7 +62,9 @@ let timeOnPage = 0;
|
|
|
67
62
|
common.setInterval(() => {
|
|
68
63
|
timeOnPage += 5;
|
|
69
64
|
}, 5000);
|
|
70
|
-
function trackTimeOnPage(
|
|
65
|
+
function trackTimeOnPage() {
|
|
66
|
+
let seconds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
67
|
+
let cb = arguments.length > 1 ? arguments[1] : undefined;
|
|
71
68
|
if (seconds < 1) {
|
|
72
69
|
return common.setTimeout(function () {
|
|
73
70
|
cb(seconds);
|
|
@@ -78,4 +75,20 @@ function trackTimeOnPage(seconds = 0, cb) {
|
|
|
78
75
|
if (cb) cb(timeOnPage);
|
|
79
76
|
common.clearInterval(timer);
|
|
80
77
|
}, 1000);
|
|
78
|
+
}
|
|
79
|
+
function on(eventName, selector, fn) {
|
|
80
|
+
document.addEventListener(eventName, function (event) {
|
|
81
|
+
let possibleTargets = document.querySelectorAll(selector);
|
|
82
|
+
let target = event.target;
|
|
83
|
+
for (let i = 0, l = possibleTargets.length; i < l; i++) {
|
|
84
|
+
let el = target;
|
|
85
|
+
let p = possibleTargets[i];
|
|
86
|
+
while (el && el !== document) {
|
|
87
|
+
if (el === p) {
|
|
88
|
+
return fn.call(p, event);
|
|
89
|
+
}
|
|
90
|
+
el = el.parentNode;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
});
|
|
81
94
|
}
|