@subiz/widget-v4 4.1.15 → 4.1.17

package/assets/less/avatar.less

@@ -15,7 +15,6 @@
 }
 
 .group-avatar--secondary {
-	align-self: center;
 }
 
 .group-avatar--secondary .avatar {

package/assets/less/message.less

@@ -12,6 +12,13 @@
 	flex: 1;
 }
 
+.mobile .widget-body--events {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding-bottom: 15px;
+}
+
 .widget-body--events-container.widget-body--events-container__error {
 	align-items: center;
 	justify-content: center;

package/assets/less/widget_header.less

@@ -23,14 +23,14 @@
 }
 
 .widget-header--collapsed {
-	height: 72px;
+	height: auto;
 
 }
 
 .widget-header--inner.widget-header--inner--collapsed {
-	height: 72px;
-	align-items: center;
+	height: auto;
 	padding: 15px;
+	position: relative;
 
 	.widget-header--title {
 		white-space: nowrap;
@@ -41,14 +41,11 @@
 	}
 
 	.widget-header--description {
-		font-size: 16px;
+		font-size: 14px;
 		opacity: 0.8;
 		flex: 1;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
 		.color(@white);
-		margin-top: 3.75px;
+		margin-top: 2.5px;
 		position: relative;
 	}
 }
@@ -165,6 +162,7 @@
 	position: relative;
 	margin-left: -9px;
 	cursor: pointer;
+	top: 2px;
 }
 
 .widget-header--has-convo-unred .widget-header--button-back {

package/compiled_src/popup/popup.js

@@ -850,7 +850,8 @@ class Popup extends _common.Com {
       background: pagestyle.background || popup.background || '#fff',
       border: pagestyle.border,
       overflow: layout === 'row' ? 'auto' : '',
-      max_height: layout === 'row' ? '100%' : ''
+      max_height: layout === 'row' ? '100%' : '',
+      min_height: layout === 'row' ? '100%' : ''
     };
     let bodycss = {
       overflow: layout === 'column' ? 'auto' : '',

package/compiled_src/store/store.js

@@ -29,7 +29,7 @@ class Store {
     _defineProperty(this, "new_visitor", true);
     _defineProperty(this, "matchUser", () => {
       this._touchAcc();
-      return this.kv.match('user');
+      return this.cache.match('user');
     });
     _defineProperty(this, "suggest_addresses", keyword => this.api.suggest_address(keyword));
     _defineProperty(this, "matchAccount", () => this.cache.match('account'));
@@ -82,7 +82,7 @@ class Store {
     _defineProperty(this, "listEvents", id => {
       if (!id || id === '*' || typeof id !== 'string') return;
       if (!this.isInsync('events' + id)) {
-        setTimeout(async () => {
+        _index.default.setTimeout(async () => {
           await this.readyGate.entry();
           await this.reconnectGate.entry(undefined, true);
           if (this.isInsync('events' + id)) return this.reconnectGate.open();
@@ -109,14 +109,20 @@ class Store {
     _defineProperty(this, "convoGate", new _index.default.Gate(true));
     _defineProperty(this, "reconnectGate", new _index.default.Gate(true));
     _defineProperty(this, "wsGate", new _index.default.Gate(true));
-    _defineProperty(this, "matchLastview", () => this.kv.match('lastview') || {});
+    _defineProperty(this, "matchLastview", () => {
+      let lastView = this.kv.match('lastview') || {};
+      let user = this.cache.match('user') || {};
+      if (!user.id) return {};
+      if (lastView.user_id != user.id) return {};
+      return lastView;
+    });
     _defineProperty(this, "matchIsOpen", () => !!this.kv.match('isopen'));
     _defineProperty(this, "matchHasManuallyClosed", () => !!this.kv.match('hasManuallyClosed'));
     _defineProperty(this, "matchClosePreviewAt", () => this.kv.match('close_preview_at') || 0);
     _defineProperty(this, "sendPresence", _index.default.throttle(async () => {
       await this.readyGate.entry();
-      if (!_index.default.get(this.kv.match('user'), 'id')) return;
-      if (_index.default.isUserBanned(this.kv.match('user'))) return;
+      if (!_index.default.get(this.cache.match('user'), 'id')) return;
+      if (_index.default.isUserBanned(this.cache.match('user'))) return;
       let hasfocus = this.browserVisibility === 'visible' && document.hasFocus();
       if (!hasfocus) {
         this.api.sendLostFocus(this.device, this._currentViewingProduct.id, this._currentViewingProduct.source_id, this._currentViewingProduct.sku);
@@ -149,10 +155,15 @@ class Store {
       }
     });
     _defineProperty(this, "closePreview", () => this.kv.put('close_preview_at', new _index.default.Date().getTime()));
-    _defineProperty(this, "setLastview", (view, opts) => this.kv.put('lastview', {
-      view,
-      opts
-    }));
+    _defineProperty(this, "setLastview", (view, opts) => {
+      let user = this.cache.match('user') || {};
+      if (!user.id) return;
+      this.kv.put('lastview', {
+        user_id: user.id,
+        view,
+        opts
+      });
+    });
     _defineProperty(this, "timeDiff", 0);
     this.g_sync = {};
     this.forceDevice = null;
@@ -175,24 +186,25 @@ class Store {
       this.inmem = inmem;
       this.cookie = inmemCookie;
     }
+    cleanLocalStorage();
     this.pubsub = new _index.default.Pubsub();
-    this.kv = new _storage.default.kv(new _storage.default.lsdb('sbz2020', this.inmem), 'kv');
-    this.cache = new _storage.default.kv(new _storage.default.lsdb('sbz2020', true), 'kv');
-    this.chain = new _storage.default.chain(new _storage.default.lsdb('cbz2020', true), 'ch');
+    this.kv = new _storage.default.kv(new _storage.default.lsdb('sbz2023', this.inmem), 'kv');
+    this.cache = new _storage.default.kv(new _storage.default.lsdb('sbz2023', true), 'kv');
+    this.chain = new _storage.default.chain(new _storage.default.lsdb('cbz2023', true), 'ch');
     this.getLocaleContent = this.api.getLocaleContent;
     this.g_haveSentSeenM = {};
     window.addEventListener('blur', () => this.sendPresence());
     window.addEventListener('focus', () => this.sendPresence());
-    setInterval(() => this.browserVisibility === 'visible' && document.hasFocus() && this.sendPresence(), 20000);
-    setInterval(() => (this.browserVisibility !== 'visible' || document.hasFocus()) && this.sendPresence(), 60000);
+    _index.default.setInterval(() => this.browserVisibility === 'visible' && document.hasFocus() && this.sendPresence(), 20000);
+    _index.default.setInterval(() => (this.browserVisibility !== 'visible' || document.hasFocus()) && this.sendPresence(), 60000);
     onVisibilityChange(val => {
       this.browserVisibility = val;
       this.sendPresence();
     });
     this.loopTime();
     this.device = this.getDeviceInfo();
-    const _gaInterval = setInterval(() => {
-      let user = this.kv.match('user') || {};
+    const _gaInterval = _index.default.setInterval(() => {
+      let user = this.cache.match('user') || {};
       if (!user.id) return;
       var dev = this.getDeviceInfo();
       if (!dev.ga_tracking_ids || !dev.ga_client_id) return;
@@ -250,7 +262,7 @@ class Store {
     await this.readyGate.entry();
     this.disconnect('account');
     await this.reconnect();
-    setTimeout(this.pubsub.publish('resetCSS'), 10);
+    _index.default.setTimeout(this.pubsub.publish('resetCSS'), 10);
   }
   getDeviceInfo() {
     let device = {
@@ -394,9 +406,9 @@ class Store {
   seenLoop() {
     this.seenQueue = [];
     clearInterval(this._seenInterval);
-    this._seenInterval = setInterval(() => {
+    this._seenInterval = _index.default.setInterval(() => {
       this.seenQueue = [...new Set(this.seenQueue)];
-      let user = this.kv.match('user') || {};
+      let user = this.cache.match('user') || {};
       _index.default.map(this.seenQueue, id => {
         var events = this.listEvents(id);
         if (!events) return;
@@ -455,7 +467,7 @@ class Store {
   }
   _setUser(user) {
     user = _index.default.cloneDeep(user);
-    let olduser = this.kv.match('user') || {};
+    let olduser = this.cache.match('user') || {};
     var accid = olduser.account_id || user.account_id;
     var id = olduser.id || user.id;
     _index.default.each(user.attributes, newattr => {
@@ -469,7 +481,7 @@ class Store {
     olduser.attributes = olduser.attributes.concat(user.attributes);
     olduser.account_id = accid;
     olduser.id = id;
-    this.kv.put('user', olduser);
+    this.cache.put('user', olduser);
     this.pubsub.publish('account');
   }
   async setSetting(setting) {
@@ -539,13 +551,13 @@ class Store {
     if (!ev || !ev.type) return;
     ev.created = _index.default.getMs(ev.created);
     if (ev.type === 'user_info_updated') {
-      let user = _index.default.cloneDeep(this.kv.match('user'));
+      let user = _index.default.cloneDeep(this.cache.match('user'));
       let attrs = _index.default.get(ev, 'data.user.attributes') || [];
       _index.default.map(attrs, attr => _index.default.setUserAttr(user, attr));
       this._setUser(user);
       return;
     }
-    let user = this.kv.match('user') || {};
+    let user = this.cache.match('user') || {};
     let cid = _index.default.convoOfEv(ev);
     let convo;
     let alreadyFetched = false;
@@ -568,7 +580,7 @@ class Store {
     this.pubsub.publish('events', ev);
     if (ev.type === 'conversation_joined') {
       let members = _index.default.get(ev, 'data.conversation.members', []);
-      let me = _index.default.find(members, m => m.id === this.kv.match('user').id);
+      let me = _index.default.find(members, m => m.id === this.cache.match('user').id);
       if (me) {
         await this.chain.reload(cid, (type, anchor, limit) => this.listmessageapi(type, anchor, limit));
         this.markSync('events' + cid);
@@ -598,7 +610,7 @@ class Store {
     }
   }
   async restConvoEvent(ev) {
-    let user = this.kv.match('user');
+    let user = this.cache.match('user');
     let cid = _index.default.convoOfEv(ev);
     let convo = this.cache.match('convo_' + cid) || {};
     if (ev.type === 'conversation_state_updated') {
@@ -704,7 +716,7 @@ class Store {
   async sendConvoEvent(cid, type, data) {
     await this.readyGate.entry();
     var idempotency = _index.default.randomString(36);
-    let user = this.kv.match('user') || {};
+    let user = this.cache.match('user') || {};
     var event = {
       id: idempotency,
       by: {
@@ -767,7 +779,7 @@ class Store {
   }
   _setConvo(convo) {
     let count = 0;
-    let user = this.kv.match('user');
+    let user = this.cache.match('user');
     let channel = _index.default.get(convo, 'touchpoint.channel', '');
     if (channel && channel != 'subiz') return;
     let allconvo = {};
@@ -804,7 +816,7 @@ class Store {
     this.kv.put('bot_run_logs', log);
   }
   sendImpression(id) {
-    let user = this.kv.match('user') || {};
+    let user = this.cache.match('user') || {};
     let log = this.kv.match('plugin_run_logs') || {};
     log[id] = {
       web_plugin_id: id,
@@ -821,7 +833,7 @@ class Store {
     });
   }
   sendConversion(id, fields, impressionToken) {
-    let user = this.kv.match('user') || {};
+    let user = this.cache.match('user') || {};
     let submission = {
       account_id: user.account_id,
       user_id: user.id,
@@ -862,7 +874,7 @@ class Store {
         value: event
       };
     });
-    let user = this.kv.match('user') || {};
+    let user = this.cache.match('user') || {};
     for (let i = 0; i < events.length; i++) {
       let ev = events[i].value;
       if (ev.type !== 'message_sent') continue;
@@ -876,17 +888,17 @@ class Store {
   }
   async loopTime() {
     let startms = _index.default.Date.now();
-    if (!_index.default.get(this.kv.match('user'), 'id')) return setTimeout(() => this.loopTime(), 240000);
+    if (!_index.default.get(this.cache.match('user'), 'id')) return _index.default.setTimeout(() => this.loopTime(), 240000);
     let {
       body: t,
       error
     } = await this.api.time();
-    if (error) return setTimeout(() => this.loopTime(), 30000);
+    if (error) return _index.default.setTimeout(() => this.loopTime(), 30000);
     var latences = Math.abs(_index.default.Date.now() - startms) / 2;
     var serverMs = new _index.default.Date(t).getTime() + latences;
     var localMs = _index.default.Date.now();
     this.timeDiff = Math.floor(serverMs - localMs);
-    setTimeout(() => this.loopTime(), 240000);
+    _index.default.setTimeout(() => this.loopTime(), 240000);
   }
   replaceFileUrl(src) {
     if (!src) return '';
@@ -914,9 +926,9 @@ class Store {
       if ((k || '').startsWith('__sb')) this.cookie.remove(k);
     });
     this.kv.destroy();
-    this.kv = new _storage.default.kv(new _storage.default.lsdb('sbz2020', this.inmem), 'kv');
+    this.kv = new _storage.default.kv(new _storage.default.lsdb('sbz2023', this.inmem), 'kv');
     this.chain.destroy();
-    this.chain = new _storage.default.chain(new _storage.default.lsdb('cbz2020', true), 'ch');
+    this.chain = new _storage.default.chain(new _storage.default.lsdb('cbz2023', true), 'ch');
   }
   destroy() {
     this._die = true;
@@ -1034,4 +1046,18 @@ function sendEventToThirdParty(category, action, label) {
 let mobileCheck = function (a) {
   return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4));
 }(navigator.userAgent || navigator.vendor || window.opera);
-let tabletCheck = /(ipad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch))|kindle|playbook|silk|(puffin(?!.*(IP|AP|WP))))/.test(navigator.userAgent);
+let tabletCheck = /(ipad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch))|kindle|playbook|silk|(puffin(?!.*(IP|AP|WP))))/.test(navigator.userAgent);
+let cleanLocalStorage = () => {
+  try {
+    localStorage;
+  } catch (e) {
+    return;
+  }
+  _index.default.setTimeout(() => {
+    for (var key in localStorage) {
+      if (key && (key.startsWith('cbz2020') || key.startsWith('sbz2020'))) {
+        localStorage.removeItem(key);
+      }
+    }
+  });
+};

package/compiled_src/util/common.js

@@ -80,9 +80,9 @@ var Date = f.contentWindow.Date;
 exports.Date = Date;
 var requestAnimationFrame = f.contentWindow.requestAnimationFrame;
 exports.requestAnimationFrame = requestAnimationFrame;
-var setTimeout = f.contentWindow.setTimeout;
+var setTimeout = f.contentWindow.setTimeout.bind(f.contentWindow);
 exports.setTimeout = setTimeout;
-var setInterval = f.contentWindow.setInterval;
+var setInterval = f.contentWindow.setInterval.bind(f.contentWindow);
 exports.setInterval = setInterval;
 function convoOfEv(ev) {
   if (!ev) return '';

package/inject.js

@@ -13,13 +13,14 @@ function getUrlParameter(name) {
 function runChatbox(subiz) {
 	let popup = {
 		account_id: 'acqsulrowbxiugvginhw',
-		id: 'cprolocggdxtgbzrdtvkp',
-		name: 'Lì xì đầu năm',
+		id: 'cpropvrepsupxyuqcxsqu',
+		name: 'Khuyến mãi xe hơi',
 		type: 'popup',
-		created: 1675306404915,
+		created: 1675912199122,
 		created_by: 'agqsulrowbxilyzhds',
-		updated: 1675307604095,
+		updated: 1675912207092,
 		updated_by: 'agqsulrowbxilyzhds',
+		enabled: true,
 		triggers: [
 			{
 				type: 'after_pageview',
@@ -36,60 +37,42 @@ function runChatbox(subiz) {
 			animation: true,
 			show_close_button: true,
 			overlay: true,
-			text_color: '#333',
+			text_color: 'rgba(0,0,0,1)',
 			font_family: 'Roboto',
-			font_size: '16px',
+			font_size: '14px',
 			background: 'white',
 			spacer: '10',
-			theme: 'bold',
+			theme: 'classic',
 			pages: [
 				{
 					components: [
-						{
-							type: 'image',
-							style: {
-								background_position: '0% 100%',
-								left: '0px',
-								right: '0px',
-								top: '0px',
-								bottom: '0px',
-							},
-							mobile_style: {
-								background_position: '0% 100%',
-								left: '0px',
-								right: '0px',
-								top: '0px',
-								bottom: '0px',
-							},
-							image: {
-								url: 'https://vcdn.subiz-cdn.com/file/firobdruwymdykrgoikj-10.png',
-							},
-						},
 						{
 							type: 'text',
 							style: {
-								font_family: 'Dancing Script',
-								color: 'rgba(207,32,47,1)',
+								font_family: 'Yeseva One',
+								color: 'rgba(208,2,27,1)',
+								background: 'rgba(0,0,0,0)',
 								text_align: 'center',
 								font_style: 'normal',
 								font_weight: 'bold',
 								margin_bottom: '20px',
-								font_size: '72px',
+								font_size: '30px',
 							},
 							mobile_style: {
-								font_family: 'Dancing Script',
-								color: 'rgba(207,32,47,1)',
+								font_family: 'Yeseva One',
+								color: 'rgba(208,2,27,1)',
+								background: 'rgba(0,0,0,0)',
 								text_align: 'center',
 								font_style: 'normal',
 								font_weight: 'bold',
-								margin_bottom: '10px',
-								font_size: '14px',
+								margin_bottom: '20px',
+								font_size: '20px',
 							},
 							text: {
-								html: 'Đăng ký nhận ưu đãi khủng',
+								html: 'CƠ HỘI TRONG TAY\nRINH NGAY XẾ XỊN',
 								i18n_html: {
-									en_US: 'Lì xì đầu năm',
-									vi_VN: 'Lì xì đầu năm',
+									en_US: 'CƠ HỘI TRONG TAY\nRINH NGAY XẾ XỊN',
+									vi_VN: 'CƠ HỘI TRONG TAY\nRINH NGAY XẾ XỊN',
 								},
 								i18n_quill_delta: {},
 							},
@@ -97,54 +80,86 @@ function runChatbox(subiz) {
 						{
 							type: 'text',
 							style: {
-								font_family: 'Montserrat',
 								text_align: 'center',
-								font_style: 'normal',
+								font_style: 'italic',
 								font_weight: 'normal',
 								margin_bottom: '20px',
-								font_size: '20px',
+								font_size: '16px',
 							},
 							mobile_style: {
-								font_family: 'Montserrat',
 								text_align: 'center',
-								font_style: 'normal',
+								font_style: 'italic',
 								font_weight: 'normal',
-								margin_bottom: '10px',
-								font_size: '10px',
 							},
 							text: {
-								html: 'Giảm giá tới 95%\nMiễn phí vận chuyển nội thành',
+								html: 'Lãi suất ưu đãi - Hỗ trợ trả góp 90%\nCùng dịch vụ hậu mãi đẳng cấp đi kèm nhiều phần quà hấp dẫn khác',
 								i18n_html: {
 									en_US:
-										'Mừng xuân mới, tặng ngay bao lì xì \nmệnh giá 100.000 đến 500.000 VND \ncho 50 đơn hàng đầu tiên',
+										'Lãi suất ưu đãi - Hỗ trợ trả góp 90%\nCùng dịch vụ hậu mãi đẳng cấp đi kèm nhiều phần quà hấp dẫn khác',
 									vi_VN:
-										'Mừng xuân mới, tặng ngay bao lì xì \nmệnh giá 100.000 đến 500.000 VND \ncho 50 đơn hàng đầu tiên',
+										'Lãi suất ưu đãi - Hỗ trợ trả góp 90%\nCùng dịch vụ hậu mãi đẳng cấp đi kèm nhiều phần quà hấp dẫn khác',
 								},
 								i18n_quill_delta: {},
 							},
 						},
+						{
+							type: 'form',
+							style: {
+								margin_bottom: '20px',
+							},
+							form: {
+								fields: [
+									{
+										key: 'email',
+										label: 'Email',
+										i18n_label: {
+											en_US: 'Email',
+											vi_VN: 'Email',
+										},
+										is_required: true,
+										type: 'email',
+										validate: 'email',
+										placeholder: 'abc@example.com',
+										i18n_placeholder: {
+											en_US: 'abc@example.com',
+											vi_VN: 'abc@example.com',
+										},
+									},
+									{
+										key: 'phone',
+										label: 'Số điện thoại',
+										i18n_label: {
+											en_US: 'Số điện thoại',
+											vi_VN: 'Số điện thoại',
+										},
+										is_required: true,
+										type: 'text',
+										validate: 'phone',
+										placeholder: '036123456',
+										i18n_placeholder: {
+											en_US: '036123456',
+											vi_VN: '036123456',
+										},
+									},
+								],
+							},
+						},
 						{
 							type: 'buttons',
 							style: {
 								border_radius: '12px',
-								background: 'rgba(207,32,47,1)',
+								background: 'rgba(174,0,0,1)',
 								flex_direction: 'column',
-							},
-							mobile_style: {
-								font_size: '10px',
-								padding_top: '5px',
-								padding_bottom: '5px',
+								align_items: 'center',
 							},
 							buttons: {
 								primary_enabled: true,
 								primary_actions: [
 									{
-										action: 'open_url',
-										url: 'https://subiz.com.vn',
-										new_tab: true,
+										action: 'conversion',
 									},
 									{
-										action: 'close',
+										action: 'next_page',
 									},
 								],
 								primary_text: 'Đăng ký ngay',
@@ -158,41 +173,59 @@ function runChatbox(subiz) {
 									},
 								],
 								i18n_secondary_text: {
-									en_US: 'Cancel',
 									vi_VN: 'Đăng ký ngay',
 								},
 							},
 						},
+						{
+							type: 'image',
+							style: {
+								width: '375px',
+								height: '100%',
+								background_position: '28.711790393013125% 0%',
+								right: '0',
+								top: '0',
+							},
+							mobile_style: {
+								width: '100%',
+								height: '150px',
+								background_position: '0% 51.66666666666666%',
+								left: '0',
+								top: '0',
+							},
+							image: {
+								url: 'https://images.unsplash.com/photo-1606220838315-056192d5e927?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMjA3fDB8MXxzZWFyY2h8NDJ8fGNhciUzRCUzRCUzRCUzRCUzRCUzRCUzRHxlbnwwfHx8fDE2MjAzNjA3NDc&ixlib=rb-1.2.1&q=80&w=1080',
+							},
+						},
 					],
 					style: {
-						background: 'rgba(255,255,255,0)',
-						width: '800px',
-						height: '565px',
+						background: 'rgba(255,255,255,1)',
+						width: '751px',
+						height: 'auto',
 						padding_left: '40px',
 						padding_right: '40px',
 						padding_top: '40px',
 						padding_bottom: '40px',
-						margin_left: '150px',
-						margin_right: '150px',
-						margin_top: '120px',
-						margin_bottom: '120px',
+						margin_left: '0px',
+						margin_right: '375px',
+						margin_top: '0px',
+						margin_bottom: '0px',
 						overflow: 'hidden',
 					},
 					mobile_style: {
-						background: 'rgba(255,255,255,0)',
-						width: '300px',
-						height: '200px',
+						background: 'rgba(255,255,255,1)',
+						width: '400px',
 						padding_left: '40px',
 						padding_right: '40px',
 						padding_top: '40px',
 						padding_bottom: '40px',
 						margin_left: '0px',
 						margin_right: '0px',
-						margin_top: '0px',
+						margin_top: '149px',
 						margin_bottom: '0px',
 					},
 					layout: 'row',
-					mobile_layout: 'row',
+					mobile_layout: 'column',
 				},
 				{
 					components: [
@@ -211,8 +244,8 @@ function runChatbox(subiz) {
 							text: {
 								html: 'Cảm ơn',
 								i18n_html: {
-									en_US: 'Thank you',
-									vi_VN: 'Thank you',
+									en_US: 'Cảm ơn',
+									vi_VN: 'Cảm ơn',
 								},
 								i18n_quill_delta: {},
 							},
@@ -227,8 +260,8 @@ function runChatbox(subiz) {
 							text: {
 								html: 'Chúng tôi đã ghi nhận được yêu cầu của bạn',
 								i18n_html: {
-									en_US: 'We had received your request',
-									vi_VN: 'We had received your request',
+									en_US: 'Chúng tôi đã ghi nhận được yêu cầu của bạn',
+									vi_VN: 'Chúng tôi đã ghi nhận được yêu cầu của bạn',
 								},
 								i18n_quill_delta: {},
 							},
@@ -252,16 +285,17 @@ function runChatbox(subiz) {
 								],
 								primary_text: 'Đóng',
 								i18n_primary_text: {
-									en_US: 'Close',
-									vi_VN: 'Close',
+									en_US: 'Đóng',
+									vi_VN: 'Đóng',
 								},
 								i18n_secondary_text: {
-									vi_VN: 'Close',
+									vi_VN: 'Đóng',
 								},
 							},
 						},
 					],
 					style: {
+						background: '#fff',
 						width: '300px',
 						padding_left: '40px',
 						padding_right: '40px',
@@ -270,6 +304,7 @@ function runChatbox(subiz) {
 						overflow: 'hidden',
 					},
 					mobile_style: {
+						background: '#fff',
 						width: '300px',
 						padding_left: '40px',
 						padding_right: '40px',
@@ -282,13 +317,11 @@ function runChatbox(subiz) {
 		conversion_notification: {
 			all_agents: true,
 		},
-		template_categories: ['Năm mới'],
-		template_title: 'Lì xì đầu năm',
-		thumbnail_url:
-			'https://vcdn.subiz-cdn.com/file/firobhhkwjwiirovikuh-firobhhkfosiufzphxicwptp1673839749423clmwirrp.jpg',
+		template_categories: ['Xe hơi'],
+		template_title: 'Khuyến mãi xe hơi',
+		thumbnail_url: 'https://file-subiz.com/fiqzycspqbycpbawhjzbwptpkufqxwin.jpg',
 	}
 	subiz._overridePlugin([popup])
-	console.log('GGGGGGG', popup)
 
 	setTimeout(() => {
 		subiz.showWidget()

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.15",
+	"version": "4.1.17",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -14,25 +14,25 @@
 		"@subiz/storage": "0.0.8",
 		"@subiz/wsclient": "^3.1.9",
 		"cookie_js": "1.4.2",
-		"core-js": "^3.27.0",
+		"core-js": "^3.27.2",
 		"css-loader": "5.2.7",
 		"file-loader": "^6.2.0",
 		"less": "^4.1.3",
 		"less-loader": "^11.1.0",
-		"marked": "^4.2.5",
+		"marked": "^4.2.12",
 		"preact": "^10.11.3"
 	},
 	"devDependencies": {
 		"@babel/cli": "^7.20.7",
-		"@babel/core": "^7.20.7",
+		"@babel/core": "^7.20.12",
 		"@babel/plugin-proposal-class-properties": "^7.18.6",
-		"@babel/plugin-transform-react-jsx": "^7.20.7",
+		"@babel/plugin-transform-react-jsx": "^7.20.13",
 		"@babel/preset-env": "^7.20.2",
-		"babel-loader": "^9.1.0",
+		"babel-loader": "^9.1.2",
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.5.0",
-		"prettier": "^2.8.1",
-		"puppeteer": "^19.4.1",
+		"prettier": "^2.8.3",
+		"puppeteer": "^19.6.3",
 		"webpack": "^5.75.0",
 		"webpack-bundle-analyzer": "^4.7.0",
 		"webpack-cli": "^5.0.1",

package/src/popup/popup.js

@@ -927,6 +927,7 @@ export default class Popup extends Com {
 			border: pagestyle.border,
 			overflow: layout === 'row' ? 'auto' : '',
 			max_height: layout === 'row' ? '100%' : '',
+			min_height: layout === 'row' ? '100%' : '',
 		}
 		let bodycss = {
 			overflow: layout === 'column' ? 'auto' : '',

package/src/store/store.js

@@ -47,10 +47,11 @@ export default class Store {
 			this.cookie = inmemCookie
 		}
 
+		cleanLocalStorage()
 		this.pubsub = new sb.Pubsub()
-		this.kv = new stor8.kv(new stor8.lsdb('sbz2020', this.inmem), 'kv')
-		this.cache = new stor8.kv(new stor8.lsdb('sbz2020', true), 'kv')
-		this.chain = new stor8.chain(new stor8.lsdb('cbz2020', true), 'ch')
+		this.kv = new stor8.kv(new stor8.lsdb('sbz2023', this.inmem), 'kv')
+		this.cache = new stor8.kv(new stor8.lsdb('sbz2023', true), 'kv')
+		this.chain = new stor8.chain(new stor8.lsdb('cbz2023', true), 'ch')
 		this.getLocaleContent = this.api.getLocaleContent
 
 		// dont dupplicate seen
@@ -60,9 +61,9 @@ export default class Store {
 		window.addEventListener('focus', () => this.sendPresence())
 
 		// faster send rate when has focus
-		setInterval(() => this.browserVisibility === 'visible' && document.hasFocus() && this.sendPresence(), 20000) // dont bother delete this
+		sb.setInterval(() => this.browserVisibility === 'visible' && document.hasFocus() && this.sendPresence(), 20000) // dont bother delete this
 		// slower send rate send when no focus
-		setInterval(() => (this.browserVisibility !== 'visible' || document.hasFocus()) && this.sendPresence(), 60000) // dont bother delete this
+		sb.setInterval(() => (this.browserVisibility !== 'visible' || document.hasFocus()) && this.sendPresence(), 60000) // dont bother delete this
 
 		onVisibilityChange((val) => {
 			this.browserVisibility = val
@@ -73,8 +74,8 @@ export default class Store {
 		this.device = this.getDeviceInfo()
 
 		// try to get Google Analytics tracking id and client id by periodically checking it after an interval
-		const _gaInterval = setInterval(() => {
-			let user = this.kv.match('user') || {}
+		const _gaInterval = sb.setInterval(() => {
+			let user = this.cache.match('user') || {}
 			if (!user.id) return // store not init
 			var dev = this.getDeviceInfo()
 			if (!dev.ga_tracking_ids || !dev.ga_client_id) return
@@ -142,7 +143,7 @@ export default class Store {
 		await this.readyGate.entry()
 		this.disconnect('account')
 		await this.reconnect()
-		setTimeout(this.pubsub.publish('resetCSS'), 10)
+		sb.setTimeout(this.pubsub.publish('resetCSS'), 10)
 	}
 
 	getDeviceInfo() {
@@ -225,7 +226,7 @@ export default class Store {
 	// must ensure only call this function after init is done
 	matchUser = () => {
 		this._touchAcc()
-		return this.kv.match('user')
+		return this.cache.match('user')
 	}
 
 	suggest_addresses = (keyword) => this.api.suggest_address(keyword)
@@ -293,7 +294,7 @@ export default class Store {
 	listEvents = (id) => {
 		if (!id || id === '*' || typeof id !== 'string') return
 		if (!this.isInsync('events' + id)) {
-			setTimeout(async () => {
+			sb.setTimeout(async () => {
 				await this.readyGate.entry()
 				await this.reconnectGate.entry(undefined, true)
 				if (this.isInsync('events' + id)) return this.reconnectGate.open()
@@ -324,7 +325,16 @@ export default class Store {
 	wsGate = new sb.Gate(true)
 
 	// last widget screen
-	matchLastview = () => this.kv.match('lastview') || {}
+	matchLastview = () => {
+		let lastView = this.kv.match('lastview') || {}
+
+		// make sure last view of correct user
+		let user = this.cache.match('user') || {}
+		if (!user.id) return {}
+		if (lastView.user_id != user.id) return {}
+		return lastView
+	}
+
 	matchIsOpen = () => !!this.kv.match('isopen') // is widget currently open
 	matchHasManuallyClosed = () => !!this.kv.match('hasManuallyClosed') // true if user has ever closed the widget
 	matchClosePreviewAt = () => this.kv.match('close_preview_at') || 0
@@ -332,8 +342,8 @@ export default class Store {
 	sendPresence = sb.throttle(
 		async () => {
 			await this.readyGate.entry()
-			if (!sb.get(this.kv.match('user'), 'id')) return // store not init
-			if (sb.isUserBanned(this.kv.match('user'))) return
+			if (!sb.get(this.cache.match('user'), 'id')) return // store not init
+			if (sb.isUserBanned(this.cache.match('user'))) return
 
 			let hasfocus = this.browserVisibility === 'visible' && document.hasFocus()
 			if (!hasfocus) {
@@ -454,10 +464,10 @@ export default class Store {
 		// periodically send seen
 		this.seenQueue = []
 		clearInterval(this._seenInterval)
-		this._seenInterval = setInterval(() => {
+		this._seenInterval = sb.setInterval(() => {
 			// deduplicate
 			this.seenQueue = [...new Set(this.seenQueue)]
-			let user = this.kv.match('user') || {}
+			let user = this.cache.match('user') || {}
 			sb.map(this.seenQueue, (id) => {
 				var events = this.listEvents(id)
 				if (!events) return
@@ -550,7 +560,7 @@ export default class Store {
 
 	_setUser(user) {
 		user = sb.cloneDeep(user)
-		let olduser = this.kv.match('user') || {}
+		let olduser = this.cache.match('user') || {}
 		var accid = olduser.account_id || user.account_id
 		var id = olduser.id || user.id
 
@@ -567,7 +577,7 @@ export default class Store {
 		olduser.account_id = accid
 		olduser.id = id
 
-		this.kv.put('user', olduser)
+		this.cache.put('user', olduser)
 		this.pubsub.publish('account')
 	}
 
@@ -666,7 +676,7 @@ export default class Store {
 		if (!ev || !ev.type) return
 		ev.created = sb.getMs(ev.created)
 		if (ev.type === 'user_info_updated') {
-			let user = sb.cloneDeep(this.kv.match('user'))
+			let user = sb.cloneDeep(this.cache.match('user'))
 			let attrs = sb.get(ev, 'data.user.attributes') || []
 			sb.map(attrs, (attr) => sb.setUserAttr(user, attr))
 			this._setUser(user)
@@ -674,7 +684,7 @@ export default class Store {
 		}
 
 		// convo events
-		let user = this.kv.match('user') || {}
+		let user = this.cache.match('user') || {}
 		let cid = sb.convoOfEv(ev)
 		let convo
 
@@ -702,7 +712,7 @@ export default class Store {
 		// so re-get events of this conversation to ensure we dont miss any event
 		if (ev.type === 'conversation_joined') {
 			let members = sb.get(ev, 'data.conversation.members', [])
-			let me = sb.find(members, (m) => m.id === this.kv.match('user').id)
+			let me = sb.find(members, (m) => m.id === this.cache.match('user').id)
 			if (me) {
 				await this.chain.reload(cid, (type, anchor, limit) => this.listmessageapi(type, anchor, limit))
 				this.markSync('events' + cid)
@@ -733,7 +743,7 @@ export default class Store {
 	}
 
 	async restConvoEvent(ev) {
-		let user = this.kv.match('user')
+		let user = this.cache.match('user')
 		let cid = sb.convoOfEv(ev)
 		let convo = this.cache.match('convo_' + cid) || {}
 		if (ev.type === 'conversation_state_updated') {
@@ -858,7 +868,7 @@ export default class Store {
 		await this.readyGate.entry()
 		var idempotency = sb.randomString(36)
 
-		let user = this.kv.match('user') || {}
+		let user = this.cache.match('user') || {}
 
 		var event = {
 			id: idempotency,
@@ -925,7 +935,7 @@ export default class Store {
 		let count = 0
 
 		// ignore invalid conversation
-		let user = this.kv.match('user')
+		let user = this.cache.match('user')
 
 		let channel = sb.get(convo, 'touchpoint.channel', '')
 		if (channel && channel != 'subiz') return
@@ -964,7 +974,11 @@ export default class Store {
 		}
 	}
 	closePreview = () => this.kv.put('close_preview_at', new sb.Date().getTime())
-	setLastview = (view, opts) => this.kv.put('lastview', {view, opts})
+	setLastview = (view, opts) => {
+		let user = this.cache.match('user') || {}
+		if (!user.id) return // store not init
+		this.kv.put('lastview', {user_id: user.id, view, opts})
+	}
 
 	matchLastPluginRun(pluginid) {
 		let log = this.kv.match('plugin_run_logs') || {}
@@ -983,7 +997,7 @@ export default class Store {
 	}
 
 	sendImpression(id) {
-		let user = this.kv.match('user') || {}
+		let user = this.cache.match('user') || {}
 		let log = this.kv.match('plugin_run_logs') || {}
 		log[id] = {web_plugin_id: id, created: this.now()}
 		this.kv.put('plugin_run_logs', log)
@@ -998,7 +1012,7 @@ export default class Store {
 	}
 
 	sendConversion(id, fields, impressionToken) {
-		let user = this.kv.match('user') || {}
+		let user = this.cache.match('user') || {}
 		let submission = {account_id: user.account_id, user_id: user.id, fields: fields}
 
 		let conv = this.kv.match('conversions') || {}
@@ -1034,7 +1048,7 @@ export default class Store {
 		})
 
 		// mark conversation as received
-		let user = this.kv.match('user') || {}
+		let user = this.cache.match('user') || {}
 		for (let i = 0; i < events.length; i++) {
 			let ev = events[i].value
 
@@ -1055,15 +1069,15 @@ export default class Store {
 		let startms = sb.Date.now()
 
 		// store not init
-		if (!sb.get(this.kv.match('user'), 'id')) return setTimeout(() => this.loopTime(), 240000)
+		if (!sb.get(this.cache.match('user'), 'id')) return sb.setTimeout(() => this.loopTime(), 240000)
 
 		let {body: t, error} = await this.api.time()
-		if (error) return setTimeout(() => this.loopTime(), 30000)
+		if (error) return sb.setTimeout(() => this.loopTime(), 30000)
 		var latences = Math.abs(sb.Date.now() - startms) / 2
 		var serverMs = new sb.Date(t).getTime() + latences
 		var localMs = sb.Date.now()
 		this.timeDiff = Math.floor(serverMs - localMs)
-		setTimeout(() => this.loopTime(), 240000)
+		sb.setTimeout(() => this.loopTime(), 240000)
 	}
 
 	replaceFileUrl(src) {
@@ -1098,9 +1112,9 @@ export default class Store {
 			if ((k || '').startsWith('__sb')) this.cookie.remove(k)
 		})
 		this.kv.destroy()
-		this.kv = new stor8.kv(new stor8.lsdb('sbz2020', this.inmem), 'kv')
+		this.kv = new stor8.kv(new stor8.lsdb('sbz2023', this.inmem), 'kv')
 		this.chain.destroy()
-		this.chain = new stor8.chain(new stor8.lsdb('cbz2020', true), 'ch')
+		this.chain = new stor8.chain(new stor8.lsdb('cbz2023', true), 'ch')
 	}
 
 	destroy() {
@@ -1245,3 +1259,18 @@ let tabletCheck =
 	/(ipad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch))|kindle|playbook|silk|(puffin(?!.*(IP|AP|WP))))/.test(
 		navigator.userAgent,
 	)
+
+let cleanLocalStorage = () => {
+	try {
+		localStorage
+	} catch (e) {
+		return
+	}
+	sb.setTimeout(() => {
+		for (var key in localStorage) {
+			if (key && (key.startsWith('cbz2020') || key.startsWith('sbz2020'))) {
+				localStorage.removeItem(key)
+			}
+		}
+	})
+}

package/src/util/common.js

@@ -14,8 +14,8 @@ export var stringify = f.contentWindow.JSON.stringify
 var parse = f.contentWindow.JSON.parse
 export var Date = f.contentWindow.Date
 export var requestAnimationFrame = f.contentWindow.requestAnimationFrame
-export var setTimeout = f.contentWindow.setTimeout
-export var setInterval = f.contentWindow.setInterval
+export var setTimeout = f.contentWindow.setTimeout.bind(f.contentWindow)
+export var setInterval = f.contentWindow.setInterval.bind(f.contentWindow)
 
 // convoOfEv extracts the ID of the conversation
 // that event is sent to