@subiz/widget-v4 4.0.55 → 4.0.59

package/dist/{17d7ef84382.screenshoot.js → screenshoot.js}

@@ -2686,7 +2686,7 @@ function trackScrollingPercentage(percent, cb) {
     let scrollTop = e.srcElement.scrollingElement ? e.srcElement.scrollingElement.scrollTop : e.srcElement.scrollTop;
     let scrollHeight = e.srcElement.scrollingElement ? e.srcElement.scrollingElement.scrollHeight : e.srcElement.scrollHeight;
 
-    if (scrollTop > 0 && scrollHeight > 0 && scrollTop / scrollHeight >= percent) {
+    if (scrollTop > 0 && scrollHeight > 0 && (scrollTop + window.innerHeight) / scrollHeight >= percent) {
       if (cb) cb();
       window.removeEventListener('scroll', handleScroll, false);
     }
@@ -3159,7 +3159,7 @@ var n,l,u,i,t,r,o,f,e={},c=[],s=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[c
 /******/ 		// This function allow to reference async chunks
 /******/ 		__webpack_require__.u = (chunkId) => {
 /******/ 			// return url for filenames based on template
-/******/ 			return "17d7ef84382." + chunkId + ".js";
+/******/ 			return "" + chunkId + ".js";
 /******/ 		};
 /******/ 	})();
 /******/ 	
@@ -4325,18 +4325,19 @@ class Store {
     if (!this.isInsync('account')) this.reconnect();
   }
 
-  async init(accid) {
+  async init(accid, mask) {
     this.readyGate.close();
     accid = (accid || '').trim();
     this.api.setAuth({
       accid: accid
     });
     this.g_sync = {};
-    let mask = '';
 
-    try {
-      mask = this.cookie.get('__sbmask', '');
-    } catch (e) {}
+    if (!mask) {
+      try {
+        mask = this.cookie.get('__sbmask', '');
+      } catch (e) {}
+    }
 
     let localstorageMask = this.kv.match('mask');
     if (!mask && localstorageMask) mask = localstorageMask;
@@ -4379,6 +4380,7 @@ class Store {
     await this.reconnect();
     this.readyGate.open();
     this.reconnectWs(accid, userId);
+    return mask;
   }
 
   seenLoop() {
@@ -5551,8 +5553,13 @@ class Widget {
     xhttp.send();
   }
 
-  async setAccount(id, $container) {
-    await this.store.init(id);
+  async waitReady(cb) {
+    await this.store.readyGate.entry();
+    cb();
+  }
+
+  async setAccount(id, $container, mask, cb) {
+    let outmask = await this.store.init(id, mask);
     if (!$container) $container = document.body;
     this.pluginMgr = new PluginMgr(this, $container);
     let clean = setInterval(() => {
@@ -5561,6 +5568,8 @@ class Widget {
       clearInterval(clean);
     }, 1000);
     this.domGate.open();
+    cb && cb(outmask);
+    return outmask;
   }
 
   _setAccount(id, $con) {
@@ -5705,6 +5714,34 @@ function main() {
   if (plugin.popup) plugin.popup.overlay = false;
   plugin._dont_close = true;
   plugin._page_index = 0;
+  plugin.conditions = [];
+
+  if (plugin.type === 'notification') {
+    if (!plugin.notification) return console.log('EMPTY PLUGIN');
+
+    if (!plugin.notification.profiles || plugin.notification.profiles.length == 0) {
+      plugin.notification.profiles = [{
+        address: 'Hàng Da, Hoàn Kiếm, Hà Nội',
+        age: 26,
+        avatar_url: 'https://vcdn.subiz-cdn.com/file/firegedmbhqftirxacho-avatar3.jpeg',
+        country: 'VN',
+        email: 'linhxx@gmail.com',
+        gender: 'Female',
+        fullname: 'Nguyễn Linh',
+        phone: '0823588xxx'
+      }, {
+        address: 'Lũng Cú, Đồng Văn, Hà Giang',
+        age: 23,
+        avatar_url: 'https://vcdn.subiz-cdn.com/file/fiqvzdstytzxlbsguaci-ellipse_2319.png',
+        country: 'VN',
+        email: 'lannhoanggxx@gmail.com',
+        gender: 'Female',
+        name: 'Nguyễn Hoàng Lan',
+        phone: '0326789xxx'
+      }];
+    }
+  }
+
   plugin.account_id = accid;
 
   widget._overridePlugin([plugin]);

package/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<meta name="description" content="Subiz preview">
+		<meta name="description" content="Subiz preview" />
 		<meta charset="utf-8" />
 		<title>Widget v4</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -32,7 +32,23 @@
 			}
 			window.subiz.q = []
 			// set account it in the very first call
-			window.subiz('setAccount', accid)
+			let mask = '' // old mask
+			window.subiz('setAccount', accid, undefined, mask, (mask) => {
+				console.log('MKA', mask)
+			})
+
+			subiz('overrideChatbox', {
+				type: 'chatbox',
+				chatbox: {
+					triggers: [{type: 'after_pageview'}],
+					hide_close_button: true,
+					desktop_button: {hidden: true},
+					mobile_button: {hidden: true},
+				},
+			})
+			subiz('waitReady', () => {})
+			subiz('shrinkWidget')
+			subiz('expandWidget')
 		</script>
 	</body>
 </html>

package/package.json

@@ -1,10 +1,10 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.0.55",
+	"version": "4.0.59",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
-		"build": "rm -rf dist && npx webpack --config webpack.prod.js && npx webpack --config webpack.screenshoot.js",
+		"build": "rm -rf dist && npx webpack --config webpack.screenshoot.js && npx webpack --config webpack.prod.js",
 		"report": "npx webpack --config webpack.report.js",
 		"lib": "rm -rf compiled_src && npx babel --out-dir=compiled_src src"
 	},
@@ -15,7 +15,7 @@
 		"@subiz/storage": "0.0.8",
 		"@subiz/wsclient": "^3.1.7",
 		"cookie_js": "1.4.2",
-		"core-js": "^3.19.2",
+		"core-js": "^3.19.3",
 		"css-loader": "^5.2.6",
 		"file-loader": "^6.2.0",
 		"less": "^4.1.2",
@@ -33,7 +33,7 @@
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.5.0",
 		"puppeteer": "^12.0.1",
-		"webpack": "^5.64.4",
+		"webpack": "^5.65.0",
 		"webpack-bundle-analyzer": "^4.5.0",
 		"webpack-cli": "^4.9.1",
 		"webpack-dev-server": "^4.6.0"

package/screenshoot.js

@@ -13,11 +13,42 @@ function main() {
 	var $div = document.createElement('div')
 	document.body.appendChild($div)
 	let hash = document.location.hash.substr(1)
+
 	let plugin = JSON.parse(decodeURIComponent(atob(hash)))
 	plugin.triggers = [{type: 'after_pageview', after_pageview_sec: 0, enabled: true}]
 	if (plugin.popup) plugin.popup.overlay = false
 	plugin._dont_close = true
 	plugin._page_index = 0
+	plugin.conditions = []
+
+	if (plugin.type === 'notification') {
+		if (!plugin.notification) return console.log('EMPTY PLUGIN')
+
+		if (!plugin.notification.profiles || plugin.notification.profiles.length == 0) {
+			plugin.notification.profiles = [
+				{
+					address: 'Hàng Da, Hoàn Kiếm, Hà Nội',
+					age: 26,
+					avatar_url: 'https://vcdn.subiz-cdn.com/file/firegedmbhqftirxacho-avatar3.jpeg',
+					country: 'VN',
+					email: 'linhxx@gmail.com',
+					gender: 'Female',
+					fullname: 'Nguyễn Linh',
+					phone: '0823588xxx',
+				},
+				{
+					address: 'Lũng Cú, Đồng Văn, Hà Giang',
+					age: 23,
+					avatar_url: 'https://vcdn.subiz-cdn.com/file/fiqvzdstytzxlbsguaci-ellipse_2319.png',
+					country: 'VN',
+					email: 'lannhoanggxx@gmail.com',
+					gender: 'Female',
+					name: 'Nguyễn Hoàng Lan',
+					phone: '0326789xxx',
+				},
+			]
+		}
+	}
 
 	plugin.account_id = accid
 	widget._overridePlugin([plugin])

package/src/chatbox/Header.js

@@ -44,17 +44,19 @@ export default class Header extends Com {
 		let state = acc.is_online ? this.props.t('agent_online') : this.props.t('agent_offline')
 		let tagline = sb.get(accSetting, `tagline`, {})
 		let desc = this.props.t.i18n(tagline) || accSetting.introduction || state
-		let agentIdsJoined = sb.map(this.getAgentJoined(this.props.cid), agent => agent.id)
+		let agentIdsJoined = sb.map(this.getAgentJoined(this.props.cid), (agent) => agent.id)
 		let cls = 'widget-header--inner widget-header--inner--collapsed'
 		if (!show) cls += ' widget-header--inner--hidden'
 
 		return (
 			<div class={cls}>
 				{this.renderBackButton()}
-				<AgentsAvatar plugin={this.props.plugin} store={this.props.store} mode="secondary" agent_ids={agentIdsJoined} />
-				<div class="widget-header--title-container">
-					<div class="widget-header--title">{this.getTitle()}</div>
-					<div class="widget-header--description" title={desc}>{desc}</div>
+				<AgentsAvatar plugin={this.props.plugin} store={this.props.store} mode='secondary' agent_ids={agentIdsJoined} />
+				<div class='widget-header--title-container'>
+					<div class='widget-header--title'>{this.getTitle()}</div>
+					<div class='widget-header--description' title={desc}>
+						{desc}
+					</div>
 				</div>
 				{this.renderCloseButton()}
 			</div>
@@ -65,7 +67,7 @@ export default class Header extends Com {
 		let accSetting = this.props.plugin.chatbox || {}
 		let acc = this.props.store.matchAccount()
 		let links = sb.get(accSetting, 'header.links') || []
-		let $links = sb.map(links, link => {
+		let $links = sb.map(links, (link) => {
 			if (!link.url || !link.type || link.type === 'subiz') return null
 			if (link.type === 'email') {
 				return (
@@ -79,7 +81,7 @@ export default class Header extends Com {
 
 			return (
 				<div>
-					<a href={link.url} target="_blank" title={link.url} rel="noreferrer">
+					<a href={link.url} target='_blank' title={link.url} rel='noreferrer'>
 						<i class={`social__links-logo social__links-logo--${link.type}`}></i>
 					</a>
 				</div>
@@ -90,7 +92,7 @@ export default class Header extends Com {
 Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi của bạn`
 		let tagline = sb.get(accSetting, `tagline`, {})
 		var teamintro = this.props.t.i18n(tagline) || accSetting.introduction || this.props.t('team_intro') || DEFTEAMINTO
-		var tags = sb.extractText(teamintro).map(tag => {
+		var tags = sb.extractText(teamintro).map((tag) => {
 			if (tag.type === 'emoji') return <Emoji emojiCode={tag.text} />
 			return tag.text
 		})
@@ -99,17 +101,21 @@ Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi
 		if (!show) cls += ' widget-header--inner--hidden'
 		return (
 			<div class={cls}>
-				<div class="widget-header-expand-container">
-					<div class="widget-header--top-wrapper">
-						<div class="widget-header--title">{this.getTitle()}</div>
+				<div class='widget-header-expand-container'>
+					<div class='widget-header--top-wrapper'>
+						<div class='widget-header--title'>{this.getTitle()}</div>
 						{this.renderCloseButton()}
 					</div>
-					<div class="widget_header__body widget_header__body__social">
-						<img alt="logo" class="social__account_logo" src={this.props.store.replaceFileUrl(sb.get(acc, 'logo_url'))} />
+					<div class='widget_header__body widget_header__body__social'>
+						<img
+							alt='logo'
+							class='social__account_logo'
+							src={this.props.store.replaceFileUrl(sb.get(acc, 'logo_url'))}
+						/>
 
 						<div>
-							<div class="social__introduction">{tags}</div>
-							<div class="social__links">{$links}</div>
+							<div class='social__introduction'>{tags}</div>
+							<div class='social__links'>{$links}</div>
 						</div>
 					</div>
 				</div>
@@ -123,7 +129,7 @@ Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi
 Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi của bạn`
 		let tagline = sb.get(accSetting, `tagline`, {})
 		var teamintro = this.props.t.i18n(tagline) || accSetting.introduction || this.props.t('team_intro') || DEFTEAMINTO
-		var tags = sb.extractText(teamintro).map(tag => {
+		var tags = sb.extractText(teamintro).map((tag) => {
 			if (tag.type === 'emoji') return <Emoji emojiCode={tag.text} />
 			return tag.text
 		})
@@ -132,17 +138,17 @@ Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi
 		if (!show) cls += ' widget-header--inner--hidden'
 		return (
 			<div class={cls}>
-				<div class="widget-header-expand-container">
-					<div class="widget-header--top-wrapper">
-						<div class="widget-header--title">{this.getTitle()}</div>
+				<div class='widget-header-expand-container'>
+					<div class='widget-header--top-wrapper'>
+						<div class='widget-header--title'>{this.getTitle()}</div>
 						{this.renderCloseButton()}
 					</div>
-					<div class="widget_header__body">
-						<div class="widget-header--avatar-wrapper">
-							<AgentsAvatar plugin={this.props.plugin} store={this.props.store} mode="primary" />
+					<div class='widget_header__body'>
+						<div class='widget-header--avatar-wrapper'>
+							<AgentsAvatar plugin={this.props.plugin} store={this.props.store} mode='primary' />
 						</div>
-						<div class="widget-header--title-container">
-							<div class="widget-header--description">{tags}</div>
+						<div class='widget-header--title-container'>
+							<div class='widget-header--description'>{tags}</div>
 						</div>
 					</div>
 				</div>
@@ -170,32 +176,34 @@ Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi
 		let user = this.props.store.matchUser()
 
 		let unreadcount = 0
-		sb.map(allconvos, convo => {
+		sb.map(allconvos, (convo) => {
 			if (convo.id == this.props.cid) return
 			if (!sb.isConvoSeen(convo, user.id)) unreadcount++
 		})
 
 		if (unreadcount !== 0) {
-			$unreadcount = <span class="widget-header--total-unread-convo">{unreadcount}</span>
+			$unreadcount = <span class='widget-header--total-unread-convo'>{unreadcount}</span>
 		}
 		return (
 			<div
 				class={`widget-header--wrap-button-back ${unreadcount ? 'widget-header--has-convo-unred' : ''}`}
-				onClick={e => this.onBackClick(e)}>
-				<div class="widget-header--button-back" data-tooltip={this.props.t('menu_back')}></div>
+				onClick={(e) => this.onBackClick(e)}>
+				<div class='widget-header--button-back' data-tooltip={this.props.t('menu_back')}></div>
 				{$unreadcount}
 			</div>
 		)
 	}
 
 	renderCloseButton() {
+		let accSetting = this.props.plugin.chatbox || {}
+		if (accSetting.hide_close_button) return null
 		return (
 			<div
-				class="widget-header--button widget-header--button-close"
+				class='widget-header--button widget-header--button-close'
 				data-tooltip={this.props.t('close')}
-				data-tooltip-position="bottom"
-				onClick={e => this.onCloseClick(e)}>
-				<span class="widget-header--button-close-icon"></span>
+				data-tooltip-position='bottom'
+				onClick={(e) => this.onCloseClick(e)}>
+				<span class='widget-header--button-close-icon'></span>
 			</div>
 		)
 	}
@@ -214,9 +222,9 @@ Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi
 
 	getAgentJoined(cid) {
 		var convo = this.props.store.matchConvo(cid) || {}
-		let joined = sb.filter(convo.members, mem => mem.type === 'agent' && mem.membership === 'active')
+		let joined = sb.filter(convo.members, (mem) => mem.type === 'agent' && mem.membership === 'active')
 		return joined
 	}
 }
 
-let getJoinedNameMember = agents => sb.map(agents, agent => agent.name).join(', ')
+let getJoinedNameMember = (agents) => sb.map(agents, (agent) => agent.name).join(', ')

package/src/lib.js

@@ -32,9 +32,13 @@ class Widget {
 		xhttp.send()
 	}
 
-	async setAccount(id, $container) {
-		await this.store.init(id)
+	async waitReady(cb) {
+		await this.store.readyGate.entry()
+		cb()
+	}
 
+	async setAccount(id, $container, mask, cb) {
+		let outmask = await this.store.init(id, mask)
 		// add container to client site
 		if (!$container) $container = document.body
 		this.pluginMgr = new PluginMgr(this, $container)
@@ -45,8 +49,9 @@ class Widget {
 			this.pluginMgr.destroy()
 			clearInterval(clean)
 		}, 1000)
-
 		this.domGate.open()
+		cb && cb(outmask)
+		return outmask
 	}
 
 	// deprecated

package/src/notif/notif.js

@@ -100,7 +100,7 @@ export default class Notif extends Com {
 			this.setState({closeAnimation: false})
 			let timestamp = this.randomTimestampt()
 			let profiles = sb.get(this.props, 'plugin.notification.profiles', [])
-			let user = profiles[Math.floor(Math.random() * sb.size(profiles))]
+			let user = profiles[Math.floor(Math.random() * sb.size(profiles))] || {}
 			// make sure image loaded
 			if (user.avatar_url && user.avatar_url.startsWith('http')) {
 				await sb.preloadImg(user.avatar_url)

package/src/plugin.js

@@ -29,10 +29,9 @@ function Plugin(plugin, store, $container, lib) {
 
 	this.getState = () => state
 
-	var run = async function () {
+	var run = async function() {
 		if (_destroy) return
 		if (state !== 'hold') return
-
 		// dont run converted plugin twice
 		if (plugin.type === 'popup' && store.isConverted(plugin.id)) return
 
@@ -375,8 +374,16 @@ const getLocale = (plugin, loc) => {
 	if (found) return found
 
 	found = sb.find(plugin.locales, (l) => {
-		l = l.replace('-', '_').split('_')[0].trim().toLowerCase()
-		let compareloc = loc.replace('-', '_').split('_')[0].trim().toLowerCase()
+		l = l
+			.replace('-', '_')
+			.split('_')[0]
+			.trim()
+			.toLowerCase()
+		let compareloc = loc
+			.replace('-', '_')
+			.split('_')[0]
+			.trim()
+			.toLowerCase()
 		return l == compareloc
 	})
 	if (found) return found

package/src/popup/popup.js

@@ -13,6 +13,7 @@ export default class Popup extends Com {
 		closeAnimation: true,
 		pressedSubmit: false,
 		imageReady: false,
+		fontReady: false,
 	}
 
 	constructor(props) {
@@ -39,14 +40,37 @@ export default class Popup extends Com {
 					}
 				})
 			})
+			delete fonts.undefined
+			delete fonts.null
+			delete fonts['']
 
 			if (sb.size(images) == 0) this.setState({imageReady: true})
 			// preload images and fonts
 			sb.map(images, (_, image) => sb.preloadImg(image, () => this.setState({imageReady: true})))
 			sb.preloadWebfonts(Object.keys(fonts))
+			setTimeout(async () => {
+				await this.waitForFont(Object.keys(fonts))
+				this.setState({fontReady: true})
+			})
 		})
 	}
 
+	async waitForFont(fonts) {
+		if (sb.size(fonts) == 0) return
+		// 2 sec timeout
+		let ready = {}
+		for (var t = 0; t < 10; t++) {
+			for (var i = 0; i < fonts.length; i++) {
+				try {
+					if (document.fonts.check('normal 16px ' + fonts[i])) ready[fonts[i]] = true
+					if (Object.keys(readycount) == fonts.length) return
+				} catch (e) {}
+			}
+			await sb.sleep(200)
+		}
+		return
+	}
+
 	openPopup() {
 		this.setState({close: false})
 	}
@@ -833,6 +857,7 @@ export default class Popup extends Com {
 		if (!this.props.t) return null
 		if (!this.state.cssready) return null
 		if (!this.state.imageReady) return null
+		if (!this.state.fontReady) return null
 		if (this.state.close) return null
 
 		let popup = sb.get(this.props.plugin, 'popup', {})

package/src/store/store.js

@@ -276,16 +276,18 @@ export default class Store {
 
 	now = () => sb.Date.now() + this.timeDiff // millisecond on server
 
-	async init(accid) {
+	async init(accid, mask) {
 		this.readyGate.close()
 		accid = (accid || '').trim()
 		this.api.setAuth({accid: accid})
 
 		this.g_sync = {}
-		let mask = '' // try to find mask in cookie
-		try {
-			mask = this.cookie.get('__sbmask', '')
-		} catch (e) {}
+		// try to find mask in cookie
+		if (!mask) {
+			try {
+				mask = this.cookie.get('__sbmask', '')
+			} catch (e) {}
+		}
 
 		let localstorageMask = this.kv.match('mask')
 		// cookie is deleted, fallback to local storage
@@ -333,6 +335,8 @@ export default class Store {
 		await this.reconnect()
 		this.readyGate.open()
 		this.reconnectWs(accid, userId)
+
+		return mask
 	}
 
 	seenQueue = [] // convoid will be seen

package/src/util/campaign.js

@@ -14,11 +14,12 @@ export function trackExitIntent(cb) {
 export function trackScrollingPercentage(percent, cb) {
 	let handleScroll = (e) => {
 		let scrollTop = e.srcElement.scrollingElement ? e.srcElement.scrollingElement.scrollTop : e.srcElement.scrollTop
+
 		let scrollHeight = e.srcElement.scrollingElement
 			? e.srcElement.scrollingElement.scrollHeight
 			: e.srcElement.scrollHeight
 
-		if (scrollTop > 0 && scrollHeight > 0 && scrollTop / scrollHeight >= percent) {
+		if (scrollTop > 0 && scrollHeight > 0 && (scrollTop + window.innerHeight) / scrollHeight >= percent) {
 			if (cb) cb()
 			window.removeEventListener('scroll', handleScroll, false)
 		}

package/src/util/common.js

@@ -905,7 +905,7 @@ export function getDayName(dayOfWeek) {
 }
 
 let loadedFonts = {}
-export function preloadWebfonts(fonts) {
+export function preloadWebfonts(fonts, done) {
 	for (var i = 0; i < fonts.length; i++) {
 		let font = fonts[i]
 		if (!font) continue
@@ -920,7 +920,9 @@ export function preloadWebfonts(fonts) {
 			// Visible - so we can measure it - but not on the screen
 			node.style.position = 'absolute'
 			node.style.display = 'block'
-			node.style.fontSize = '1px'
+			node.style.opacity = '0.1'
+			node.style.color = 'transparent'
+			node.style.fontSize = '20px'
 			node.style.height = '0px'
 			node.style.width = '0px'
 

package/webpack.screenshoot.js

@@ -6,14 +6,6 @@ webpackconfig.output.publicPath = './'
 
 webpackconfig.entry = {screenshoot: './screenshoot.js'}
 
-const HASH = Date.now().toString(16)
-// create hash
-if (!fs.existsSync('dist')) fs.mkdirSync('dist')
-fs.writeFileSync('dist/HASH', HASH)
-
-webpackconfig.output.chunkFilename = HASH + '.[name].js'
-webpackconfig.output.filename = HASH + '.[name].js'
-
 webpackconfig.optimization.minimize = false
 webpackconfig.mode = 'production'
 webpackconfig.plugins = [

package/dist/17d7ef81b7a.605.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunk_subiz_widget_v4=self.webpackChunk_subiz_widget_v4||[]).push([[605],{2493:(t,e,s)=>{s.d(e,{M:()=>o,u:()=>n});var i=s(6400);s(819);class o extends i.wA{constructor(t){super(t),this._isMounted=!0,setTimeout((()=>{if(this.componentWillUnmount){let t=this.componentWillUnmount.bind(this);this.componentWillUnmount=()=>{t(),this._isMounted=!1}}}),10)}}class n extends o{constructor(t){super(t),this.setWrapperRef=this.setWrapperRef.bind(this),this.onClick=this.onClick.bind(this)}componentDidMount(){document.addEventListener("mousedown",this.onClick)}componentWillUnmount(){document.removeEventListener("mousedown",this.onClick)}setWrapperRef(t){this.wrapperRef=t}onClick(t){this.wrapperRef&&!this.wrapperRef.contains(t.target)&&this.props.onClickaway&&this.props.onClickaway()}render(){return(0,i.h)("div",{ref:this.setWrapperRef},this.props.children)}}},9605:(t,e,s)=>{s.r(e),s.d(e,{default:()=>r});var i=s(819),o=s(6400),n=s(2493);let a=s.e(362).then(s.bind(s,362));class r extends n.M{constructor(t){var e,s;super(t),s={close:!0,cssready:!1,closeAnimation:!0,imageReady:!1,user:{},timestamp:"",message:"",title:"",last_show:0},(e="state")in this?Object.defineProperty(this,e,{value:s,enumerable:!0,configurable:!0,writable:!0}):this[e]=s,setTimeout((async()=>{let{body:t}=await this.props.store.sendImpression(this.props.plugin.id);this.impressionToken=i.Z.get(t,"impression_token")||"";let e=i.Z.get(this.props,"plugin.notification.background_url");i.Z.preloadImg(e,(()=>this.setState({imageReady:!0})))}))}setOver(t){this.mouse_leave=t?0:i.Z.Date.now()}randomTimestampt(){let t=Math.floor(5*Math.random());return 0==t?this.props.t("just_now"):1==t?"1 "+this.props.t("minute_ago"):2==t?"2 "+this.props.t("minutes_ago"):3==t?"3 "+this.props.t("minutes_ago"):"4 "+this.props.t("minutes_ago")}onClick(t){if(t.stopPropagation(),this.props.plugin._dont_follow)return;this.props.store.sendConversion(this.props.plugin.id,null,this.impressionToken);let e=i.Z.get(this.props,"plugin.notification.url");return e?(e.startsWith("http://")||e.startsWith("https://")||(e="//"+e),i.Z.get(this.props,"plugin.notification.new_tab",!1)?window.open(e):void(window.location.href=e)):void 0}onCloseButtonClick(t){t.preventDefault(),t.stopPropagation(),this.setClose(!0)}renderCloseButton(){return(0,o.h)("div",{class:"btn_close",onClick:t=>this.onCloseButtonClick(t)},(0,o.h)("svg",{class:"btn_close__icon",xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24","stroke-linecap":"round","stroke-linejoin":"round"},(0,o.h)("line",{x1:"18",y1:"6",x2:"6",y2:"18",style:"stroke-width: 3 !important;"}),(0,o.h)("line",{x1:"6",y1:"6",x2:"18",y2:"18",style:"stroke-width: 3 !important;"})))}async waitForT(){if(!this.props.t)return await i.Z.sleep(100),this.waitForT()}async setClose(t){if(await this.waitForT(),this.props.t){if(!t){clearTimeout(this.lastCloseTimeout),this.setState({closeAnimation:!1});let t=this.randomTimestampt(),e=i.Z.get(this.props,"plugin.notification.profiles",[]),s=e[Math.floor(Math.random()*i.Z.size(e))];s.avatar_url&&s.avatar_url.startsWith("http")&&await i.Z.preloadImg(s.avatar_url),i.Z.map(i.Z.get(this.props.plugin,"notification.custom_avatar_urls"),(t=>{e.push({type:"person",fullname:l(),avatar_url:t,email:l().split(" ").join(".").toLowerCase()+"@gmail.com",address:h(),phone:"+84"+Math.floor(10*Math.random())+Math.floor(10*Math.random())+Math.floor(10*Math.random())+Math.floor(10*Math.random())+Math.floor(10*Math.random())+Math.floor(10*Math.random())+"xxxx",age:15+Math.floor(20*Math.random())})}));let o=i.Z.get(this.props,"plugin.notification.i18n_message_quill_deltas",[]),n=o[Math.floor(Math.random()*i.Z.size(o))],a=i.Z.get(this.props,"plugin.notification.message_quill_deltas",[]),r=a[Math.floor(Math.random()*i.Z.size(a))],p=i.Z.get(this.props,"plugin.notification.i18n_title_quill_delta");return this.setState({close:!1,last_show:i.Z.Date.now(),timestamp:t,user:s,title:this.props.t.i18n(p)||i.Z.get(this.props,"plugin.notification.title_quill_delta"),message:this.props.t.i18n(n)||r})}this.setState({closeAnimation:!0}),this.mouse_leave=i.Z.Date.now(),this.lastCloseTimeout=setTimeout((()=>this.setState({close:!0,closeAnimation:!1})),150),this.props.plugin._dont_close&&setTimeout((()=>this.setState({closeAnimation:!1,close:!1})),1e3)}}async refreshCSS(){let t=this.props.store.matchPlugin();if(!i.Z.find(t,(t=>t.id===this.props.plugin.id)))return;let e=(await a).default.default.toString();i.Z.setCss(this.props.plugin.id,this.$cssStyleDiv,e),this.setClose(this.state.close)}componentWillUnmount(){clearInterval(this.interval),i.Z.setCss(this.props.plugin.id,this.$cssStyleDiv,"")}async componentDidMount(){this.setState({last_show:i.Z.Date.now()}),this.$cssStyleDiv=document.getElementById("subiz-style-for-"+this.props.plugin.id),this.$cssStyleDiv||(this.$cssStyleDiv=document.createElement("style"),document.head.appendChild(this.$cssStyleDiv),this.$cssStyleDiv.type="text/css",this.$cssStyleDiv.id="subiz-style-for-"+this.props.plugin.id),this.props.store.onResetCSS(this,(()=>this.refreshCSS())),await this.refreshCSS(),this.interval=setInterval((()=>{if(this.props._destroy)return this.componentWillUnmount();let t=this.mouse_leave;return 0===t&&(t=i.Z.Date.now()),i.Z.Date.now()-t<1e3?void 0:this.state.close||this.props.plugin._dont_close?i.Z.Date.now()-this.state.last_show>this.props.plugin.notification.interval_sec?this.setClose(!1):void 0:i.Z.Date.now()-this.state.last_show>8e3?this.setClose(!0):void 0}),1e3),setTimeout((()=>{this.setState({cssready:!0}),this.setClose(!1)}),50)}renderTextFromQuillDelta(t,e){let s=i.Z.parseJSON(t);return s&&s.ops?i.Z.map(s.ops,(t=>{let s=null;if(!t.insert)return null;if("string"==typeof t.insert&&(s=t.insert),i.Z.get(t,"insert.dynamicField")){let o=i.Z.get(t,"insert.dynamicField.key");"user.fullname"===o&&(s=e.fullname),"user.email"===o&&(s=e.email),"user.address"===o&&(s=e.address),"user.phone"===o&&(s=e.phone)}return i.Z.get(t,"attributes.bold")&&(s=(0,o.h)("b",null,s)),i.Z.get(t,"attributes.italic")&&(s=(0,o.h)("b",null,s)),s})):null}render(){if(!this.props.t)return null;if(!this.state.cssready)return null;if(!this.state.imageReady)return null;if(this.state.close)return null;if(!this.state.message)return null;let t=i.Z.get(this.props.plugin,"notification",{});if(!t)return null;let e="",s=i.Z.get(t,"position","bottom-left");this.props.mobile&&(s=i.Z.get(t,"mobile_position",s)),"top-left"===s||"top-right"===s?e="fadeInDown":"top-center"===s?e="fadeInDownCenter":"bottom-center"===s?e="fadeInUpCenter":("bottom-right"===s||(s="bottom-left"),e="fadeInUpBig");let n=this.state.user||{},a=t.subtext_style||{};void 0===a.color&&(a.color=i.Z.get(t,"message_style.color","black"));let r="position: fixed !important; z-index: 1000000000 !important";return this.props.plugin._preview&&(r="position: absolute !important;"),this.state.closeAnimation&&(e="fadeOut"),(0,o.h)("div",{class:e+" notif notif__"+s,onClick:t=>this.onClick(t),onmouseover:t=>this.setOver(!0),style:r,onmouseleave:t=>this.setOver(!1)},(0,o.h)("div",{style:"position: relative !important; display: flex !important; align-items: center !important;"},(0,o.h)("img",{alt:"notification background",class:"notif_bg",src:t.background_url,style:i.Z.js2css(t.background_style)}),this.renderCloseButton(),(0,o.h)("div",{class:"notif_avatar",style:i.Z.js2css(t.avatar_style)},(0,o.h)("img",{alt:"notification avatar",class:"notif_avatar__img",src:n.avatar_url})),(0,o.h)("div",{class:"notif_body"},(0,o.h)("div",{class:"notif_title",style:i.Z.js2css(t.title_style)},this.renderTextFromQuillDelta(this.state.title,n)),(0,o.h)("div",{class:"notif_message",style:i.Z.js2css(t.message_style)},this.renderTextFromQuillDelta(this.state.message,n)),(0,o.h)("div",{class:"notif_time",style:i.Z.js2css(t.subtext_style)},this.state.timestamp))))}}function l(){let t=["Kiều Thanh","Phương Anh","Lê Thùy Linh","Trang Nguyễn","Thanh Hoa","Hoài Đức","Huơng Giang"];return t[Math.floor(Math.random()*t.length)]}function h(){let t=["Dịch Vọng Hậu, Cầu Giấy","Quận 1, TP Hồ Chí Minh","Ngõ 34 Tôn Thất Thuyết","87 Phạm Hùng","Đống Đa, Hà Nội"];return t[Math.floor(Math.random()*t.length)]}}}]);