@subiz/widget-v4 4.0.75 → 4.0.79

package/assets/less/message.less

@@ -452,6 +452,7 @@ a.message_error {
 	.generic-attachment--element-img {
 		width: 100%;
 		height: 150px;
+		object-fit: cover;
 	}
 
 	.url-button-attachment:first-child {
@@ -479,6 +480,7 @@ a.message_error {
 		font-weight: 500;
 		font-size: 16px;
 		line-height: 20px;
+		white-space: normal;
 	}
 
 	.generic-attachment--element-subtitle {
@@ -688,13 +690,21 @@ a.product_attachment__title {
 	font-weight: 500;
 	.color(@black);
 
-	word-break: break-all;
+	word-break: break-word;
+	margin-bottom: 5px;
 }
 
 .product_attachment__subtitle {
+	white-space: pre-wrap;
+	display: -webkit-box;
+	-webkit-line-clamp: 3;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
 	padding: 5px 10px;
 	.color(#aaa);
 	padding-top: 0;
+	padding-bottom: 0;
+	margin-bottom: 5px;
 }
 
 .product_attachment__btn_external_link {

package/compiled_src/chatbox/ButtonAttachments.js

@@ -36,7 +36,8 @@ class ButtonAttachments extends _common.Com {
 
     return (0, _preact.h)(_Buttons.default, {
       store: this.props.store,
-      buttons: buttons
+      buttons: buttons,
+      t: this.props.t
     });
   }
 

package/compiled_src/chatbox/Buttons.js

@@ -28,7 +28,7 @@ class Buttons extends _common.Com {
           href: 'tel:' + button.phone_number,
           key: index,
           title: button.title
-        }, button.title);
+        }, this.props.t.i18n(button.i18n_title) || button.title);
       }
 
       if (button.type === 'url_button') {
@@ -38,7 +38,7 @@ class Buttons extends _common.Com {
           target: "_blank",
           key: index,
           title: button.title
-        }, button.title || button.url);
+        }, this.props.t.i18n(button.i18n_title) || button.title || button.url);
       }
 
       if (button.type === 'postback_button') {
@@ -46,7 +46,7 @@ class Buttons extends _common.Com {
           class: "url-button-attachment",
           href: "javascript:;",
           onClick: _ => this.props.onSelect(button)
-        }, button.title);
+        }, this.props.t.i18n(button.i18n_title) || button.title);
       }
 
       if (button.type === 'widget_ask_desktop_notify_button') return null;

package/compiled_src/chatbox/Event.js

@@ -183,7 +183,8 @@ class Event extends _common.Com {
         ev: ev
       }), (0, _preact.h)(_ButtonAttachments.default, {
         store: this.props.store,
-        ev: ev
+        ev: ev,
+        t: this.props.t
       }), (0, _preact.h)(_FormAttachments.default, {
         store: this.props.store,
         onSubmit: this.props.onFormSubmit,
@@ -197,7 +198,8 @@ class Event extends _common.Com {
       }), (0, _preact.h)(_GenericTemplateAttachments.default, {
         store: this.props.store,
         ev: ev,
-        onSelect: e => this.choosePostbackBtn(e)
+        onSelect: e => this.choosePostbackBtn(e),
+        t: this.props.t
       }), (0, _preact.h)(_ProductAttachments.default, {
         t: this.props.t,
         onPostback: e => this.choosePostbackBtn(e),
@@ -272,7 +274,8 @@ class Event extends _common.Com {
       ev: ev
     }), (0, _preact.h)(_ButtonAttachments.default, {
       store: this.props.store,
-      ev: ev
+      ev: ev,
+      t: this.props.t
     }), (0, _preact.h)(_FormAttachments.default, {
       store: this.props.store,
       onSubmit: this.props.onFormSubmit,

package/compiled_src/chatbox/GenericTemplateAttachments.js

@@ -34,7 +34,10 @@ class GenericTemplateAttachments extends _common.Com {
     this.setState({
       focusing: eleindex
     });
-    this.galleryRef.current.scrollLeft = 190 * eleindex - 20;
+    this.galleryRef.current.scrollTo({
+      left: 220 * eleindex,
+      behavior: 'smooth'
+    });
   }
 
   render() {
@@ -50,12 +53,14 @@ class GenericTemplateAttachments extends _common.Com {
 
     var $generics = _index.default.map(generics, (gen, index) => {
       var $eles = _index.default.map(gen.elements, ele => {
-        let $title = ele.title ? (0, _preact.h)("div", {
+        let title = this.props.t.i18n(ele.i18n_title) || ele.title;
+        let subtitle = this.props.t.i18n(ele.i18n_subtitle) || ele.subtitle;
+        let $title = title ? (0, _preact.h)("div", {
           class: "generic-attachment--element-title"
-        }, ele.title) : null;
-        let $subtitle = ele.subtitle ? (0, _preact.h)("div", {
+        }, title) : null;
+        let $subtitle = subtitle ? (0, _preact.h)("div", {
           class: "generic-attachment--element-subtitle"
-        }, ele.subtitle) : null;
+        }, subtitle) : null;
         return (0, _preact.h)("div", {
           class: "generic-attachment--element swiper-slide"
         }, (0, _preact.h)("div", null, (0, _preact.h)("img", {
@@ -64,7 +69,8 @@ class GenericTemplateAttachments extends _common.Com {
           src: this.props.store.replaceFileUrl(ele.image_url)
         })), $title, $subtitle, (0, _preact.h)(_Buttons.default, {
           buttons: ele.buttons,
-          onSelect: button => this.props.onSelect(button)
+          onSelect: button => this.props.onSelect(button),
+          t: this.props.t
         }));
       });
 

package/compiled_src/chatbox/ProductAttachments.js

@@ -40,7 +40,7 @@ class ProductAttachments extends _common.Com {
         src: require('../../assets/img/external-link.svg'),
         class: "product_attachment__btn_external_link"
       })));
-      console.log("P", product);
+      console.log('P', product);
 
       if (_index.default.size(product.buttons) > 0) {
         $detailbtns = $detailbtns.concat(_index.default.map(product.buttons, (button, index) => {
@@ -50,7 +50,7 @@ class ProductAttachments extends _common.Com {
               href: 'tel:' + button.phone_number,
               key: index,
               title: button.title
-            }, button.title);
+            }, this.props.t.i18n(button.i18n_title) || button.title);
           }
 
           if (button.type === 'url_button') {
@@ -60,7 +60,7 @@ class ProductAttachments extends _common.Com {
               target: "_blank",
               key: index,
               title: button.title
-            }, button.title || this.props.t('detail'), ' ', (0, _preact.h)("img", {
+            }, this.props.t.i18n(button.i18n_title) || button.title || this.props.t('detail'), ' ', (0, _preact.h)("img", {
               src: require('../../assets/img/external-link.svg'),
               class: "product_attachment__btn_external_link"
             }));
@@ -71,7 +71,7 @@ class ProductAttachments extends _common.Com {
               class: "product_attachment__btn",
               href: "javascript:;",
               onClick: _ => this.props.onPostback(button)
-            }, button.title);
+            }, this.props.t.i18n(button.i18n_title) || button.title);
           }
         }));
       }

package/compiled_src/lib.js

@@ -36,6 +36,12 @@ class Widget {
 
     _defineProperty(this, "getUser", () => _index.default.parseJSON(_index.default.stringify(this.store.matchUser())));
 
+    _defineProperty(this, "setViewingProduct", p => this.store.linkProduct(p));
+
+    _defineProperty(this, "getViewingProduct", () => this.store.getLinkedProduct());
+
+    _defineProperty(this, "track", () => this.store.track());
+
     this.domGate = new _index.default.Gate();
     this.store = new _store.default(ApiURL, FileURL, RealtimeURL, inmem, fake, agenttoken);
     window.sbz_store = this.store;

package/compiled_src/store/api.js

@@ -61,6 +61,23 @@ class _default {
 
     _defineProperty(this, "sendTyping", cid => this.apireq.post(`/conversations/${cid}/typing`));
 
+    _defineProperty(this, "sendPresence", (device, is_focused, productid, source_id, sku) => this.sendEvent({
+      by: {
+        id: this.uid,
+        device: device
+      },
+      type: 'presence_updated',
+      data: {
+        presence: {
+          viewing_product_sku: sku,
+          viewing_product_source_id: source_id,
+          viewing_product_id: productid,
+          pinged: _index.default.Date.now(),
+          is_focused
+        }
+      }
+    }));
+
     _defineProperty(this, "uploadToS3", async file => {
       let {
         body: signed,
@@ -151,23 +168,9 @@ class _default {
     this.uid = obj.uid;
   }
 
-  sendPresence(device, is_focused) {
-    return this.sendEvent({
-      by: {
-        id: this.uid,
-        device: device
-      },
-      type: 'presence_updated',
-      data: {
-        presence: {
-          pinged: _index.default.Date.now(),
-          is_focused
-        }
-      }
-    });
-  }
-
-  sendContent(device, pageUrl, pageTitle) {
+  sendContentView(device, pageUrl, pageTitle, id, source_id, sku) {
+    if (!id) id = undefined;
+    if (!source_id) source_id = undefined;
     return this.sendEvent({
       by: {
         id: this.uid,
@@ -176,9 +179,12 @@ class _default {
       type: 'content_viewed',
       data: {
         product: {
+          id: id,
+          source_id: source_id,
           url: pageUrl,
           name: pageTitle,
-          title: pageTitle
+          title: pageTitle,
+          sku: sku
         }
       }
     });

package/compiled_src/store/api_fake.js

@@ -162,30 +162,6 @@ function makeFakeConvo(accid, convoid, userid, agentid) {
       id: inteid
     },
     actived: 1610453070259,
-    last_event: {
-      id: 'evqyiykaoizbwnkaecwphttwk',
-      account_id: accid,
-      created: 1616213311830,
-      type: 'message_sent',
-      by: {
-        id: userid,
-        client_id: 'clsubizapi',
-        type: 'user'
-      },
-      data: {
-        message: {
-          conversation_id: convoid,
-          text: 'ok cám ơn!',
-          format: 'plaintext',
-          integration_id: inteid,
-          pongs: [{
-            member_id: userid,
-            type: 'seen',
-            created: 1616213312110
-          }]
-        }
-      }
-    },
     last_message_sent: {
       id: 'evqyiykaoizbwnkaecwphttwk',
       account_id: accid,

package/compiled_src/store/store.js

@@ -38,6 +38,8 @@ class Store {
 
     _defineProperty(this, "cookie", cookie);
 
+    _defineProperty(this, "_currentViewingProduct", {});
+
     _defineProperty(this, "new_visitor", true);
 
     _defineProperty(this, "matchUser", () => {
@@ -163,7 +165,7 @@ class Store {
       await this.readyGate.entry();
       if (!_index.default.get(this.kv.match('user'), 'id')) return;
       if (_index.default.isUserBanned(this.kv.match('user'))) return;
-      return this.api.sendPresence(this.device, this.browserVisibility === 'visible' && document.hasFocus());
+      return this.api.sendPresence(this.device, this.browserVisibility === 'visible' && document.hasFocus(), this._currentViewingProduct.id, this._currentViewingProduct.source_id, this._currentViewingProduct.sku);
     }, 1000));
 
     _defineProperty(this, "now", () => _index.default.Date.now() + this.timeDiff);
@@ -231,7 +233,8 @@ class Store {
     this.g_haveSentSeenM = {};
     window.addEventListener('blur', () => this.sendPresence());
     window.addEventListener('focus', () => this.sendPresence());
-    setInterval(() => this.sendPresence(), 30000);
+    setInterval(() => this.browserVisibility === 'visible' && document.hasFocus() && this.sendPresence(), 20000);
+    setInterval(() => (this.browserVisibility !== 'visible' || document.hasFocus()) && this.sendPresence(), 60000);
     onVisibilityChange(val => {
       this.browserVisibility = val;
       this.sendPresence();
@@ -260,6 +263,21 @@ class Store {
     }, 2000);
   }
 
+  linkProduct(p) {
+    if (!p) {
+      this._currentViewingProduct = {};
+      return;
+    }
+
+    if (p.id) this._currentViewingProduct.id = (p.id + '').trim();
+    if (p.source_id) this._currentViewingProduct.source_id = (p.source_id + '').trim();
+    if (p.sku) this._currentViewingProduct.sku = (p.sku + '').trim();
+  }
+
+  getLinkedProduct() {
+    return _index.default.cloneDeep(this._currentViewingProduct);
+  }
+
   isInsync(key) {
     return _index.default.Date.now() - (this.g_sync[key] || 0) < 300000;
   }
@@ -619,7 +637,7 @@ class Store {
 
   async track() {
     let user = this.kv.match('user') || {};
-    await this.api.sendContent(this.device, location.href, document.title);
+    await this.api.sendContentView(this.device, location.href, document.title, this._currentViewingProduct.id, this._currentViewingProduct.source_id, this._currentViewingProduct.sku);
     this.sendPresence();
   }
 
@@ -765,8 +783,6 @@ class Store {
       this.chain.put(cid, ev.id, _index.default.getMs(ev.created), ev);
     }
 
-    convo.last_event = ev;
-
     this._setConvo(convo);
 
     this.pubsub.publish('account');

package/dist/0b82fa7e5c3b07b40a44.png

@@ -0,0 +1 @@
+module.exports = __webpack_public_path__ + "assets/img/emoji/messenger/sub_58.824_78.431.f910f2a.png";

package/dist/0f4af006e38ee8b93633.png

@@ -0,0 +1 @@
+module.exports = __webpack_public_path__ + "assets/img/emoji/messenger/sub_60.784_29.412.e36d284.png";