@subiz/widget-v4 4.0.51 → 4.0.56

package/dist/HASH

@@ -1 +1 @@
-17d02a15859
+17d7f338b23

package/dist/screenshoot.html

@@ -0,0 +1,7 @@
+<html><head><meta name="viewport" content="width=device-width,intial-scale=1"/><style>/* make the environment look like widget environment */
+			#sbz-pop * {
+				all: unset;
+			}
+			body {
+				background: #ddd;
+			}</style></head><body><script defer="defer" src="./17d7f338b23.screenshoot.js"></script></body></html>

package/package.json

@@ -1,41 +1,41 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.0.51",
+	"version": "4.0.56",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
-		"build": "npx webpack --config webpack.prod.js",
+		"build": "rm -rf dist && npx webpack --config webpack.prod.js && npx webpack --config webpack.screenshoot.js",
 		"report": "npx webpack --config webpack.report.js",
 		"lib": "rm -rf compiled_src && npx babel --out-dir=compiled_src src"
 	},
 	"dependencies": {
-		"@babel/core": "^7.16.0",
-		"@googlemaps/js-api-loader": "^1.11.4",
+		"@googlemaps/js-api-loader": "^1.12.11",
 		"@subiz/ajax": "^3.0.12",
 		"@subiz/flow": "^1.0.9",
 		"@subiz/storage": "0.0.8",
 		"@subiz/wsclient": "^3.1.7",
-		"babel-loader": "^8.2.3",
 		"cookie_js": "1.4.2",
-		"core-js": "^3.19.1",
+		"core-js": "^3.19.2",
 		"css-loader": "^5.2.6",
 		"file-loader": "^6.2.0",
 		"less": "^4.1.2",
 		"less-loader": "^10.2.0",
-		"marked": "^4.0.4",
-		"preact": "^10.6.0"
+		"marked": "^4.0.6",
+		"preact": "^10.6.2"
 	},
 	"devDependencies": {
+		"babel-loader": "^8.2.3",
+		"@babel/core": "^7.16.0",
 		"@babel/cli": "^7.16.0",
 		"@babel/plugin-proposal-class-properties": "^7.16.0",
 		"@babel/plugin-transform-react-jsx": "^7.16.0",
 		"@babel/preset-env": "^7.16.4",
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.5.0",
-		"prettier": "^2.4.1",
-		"webpack": "^5.64.3",
+		"puppeteer": "^12.0.1",
+		"webpack": "^5.64.4",
 		"webpack-bundle-analyzer": "^4.5.0",
 		"webpack-cli": "^4.9.1",
-		"webpack-dev-server": "^4.5.0"
+		"webpack-dev-server": "^4.6.0"
 	}
 }

package/screenshoot.html

@@ -0,0 +1,15 @@
+<html>
+	<head>
+		<meta name="viewport" content="width=device-width, intial-scale=1.0" />
+		<style>
+			/* make the environment look like widget environment */
+			#sbz-pop * {
+				all: unset;
+			}
+			body {
+				background: #ddd;
+			}
+		</style>
+	</head>
+	<body></body>
+</html>

package/screenshoot.js

@@ -0,0 +1,59 @@
+import Widget from './src/lib.js'
+
+let accid = 'acqsulrowbxiugvginhw'
+let widget = new Widget(
+	'https://api.subiz.com.vn/4.0/',
+	'https://file-subiz.com/',
+	'https://rt-0.subiz.com.vn/',
+	true,
+	true,
+)
+
+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])
+	// widget._overrideDeviceType('mobile')
+	widget.setAccount(accid, $div)
+}
+
+main()

package/src/chatbox/OrderAttachments.js

@@ -33,7 +33,6 @@ export default class ProductAttachments extends Com {
 						{sb.map(order.items, (item) => {
 							let product = item.product || {}
 
-							let price = this.props.store.getPrice(product, 'price', order.currency)
 							return (
 								<div class='order_attachment__product'>
 									<img
@@ -41,12 +40,10 @@ export default class ProductAttachments extends Com {
 										src={(sb.get(product, 'images.0'), require('../../assets/img/default.jpg'))}
 									/>
 									<div style='overflow: hidden !important;'>
-										<div class='order_attachment__product_name'>{this.props.t.i18n(product.name)}</div>
+										<div class='order_attachment__product_name'>{product.name}</div>
+										<div class='order_attachment__product_desc'>{product.description || product.long_description}</div>
 										<div class='order_attachment__product_desc'>
-											{this.props.t.i18n(product.short_description) || this.props.t.i18n(product.description)}
-										</div>
-										<div class='order_attachment__product_desc'>
-											{this.props.t('qty')} {item.quantity}&nbsp;·&nbsp;{sb.formatCurrency(price)}
+											{this.props.t('qty')} {item.quantity}&nbsp;·&nbsp;{sb.formatCurrency(product.price)}
 										</div>
 									</div>
 								</div>
@@ -56,13 +53,11 @@ export default class ProductAttachments extends Com {
 				)
 			}
 
-			let {total} = this.props.store.getOrderTotal(order)
-
 			let $total = (
 				<div class='order_attachment__footer'>
 					<div>{this.props.t('total')}</div>{' '}
 					<div>
-						<b>{sb.formatCurrency(total)}</b>
+						<b>{sb.formatCurrency(order.total)}</b>
 					</div>
 				</div>
 			)

package/src/chatbox/ProductAttachments.js

@@ -35,11 +35,11 @@ export default class ProductAttachments extends Com {
 
 			let $title = (
 				<a href={url} class='product_attachment__title' target='_blank'>
-					{this.props.t.i18n(product.name)}
+					{product.name}
 				</a>
 			)
 			let $subtitle = null
-			let desc = this.props.t.i18n(product.short_description) || this.props.t.i18n(product.description)
+			let desc = product.description || product.long_description
 			if (desc) $subtitle = <div class='product_attachment__subtitle'>{desc}</div>
 
 			let $price = null
@@ -53,8 +53,8 @@ export default class ProductAttachments extends Com {
 			return (
 				<div class={'product_attachment product_attachment__' + byType}>
 					<div>
-						<a href={this.props.store.replaceFileUrl(product.images[0])} target='_blank'>
-							<img class='product_attachment__img' src={this.props.store.replaceFileUrl(product.images[0])} />
+						<a href={this.props.store.replaceFileUrl(product.image)} target='_blank'>
+							<img class='product_attachment__img' src={this.props.store.replaceFileUrl(product.image)} />
 						</a>
 					</div>
 					{$title}

package/src/notif/notif.js

@@ -68,17 +68,17 @@ export default class Notif extends Com {
 
 	renderCloseButton() {
 		return (
-			<div class="btn_close" onClick={e => this.onCloseButtonClick(e)}>
+			<div class='btn_close' onClick={(e) => this.onCloseButtonClick(e)}>
 				<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">
-					<line x1="18" y1="6" x2="6" y2="18" style="stroke-width: 3 !important;"></line>
-					<line x1="6" y1="6" x2="18" y2="18" style="stroke-width: 3 !important;"></line>
+					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'>
+					<line x1='18' y1='6' x2='6' y2='18' style='stroke-width: 3 !important;'></line>
+					<line x1='6' y1='6' x2='18' y2='18' style='stroke-width: 3 !important;'></line>
 				</svg>
 			</div>
 		)
@@ -100,13 +100,13 @@ 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)
 			}
 
-			sb.map(sb.get(this.props.plugin, 'notification.custom_avatar_urls'), url => {
+			sb.map(sb.get(this.props.plugin, 'notification.custom_avatar_urls'), (url) => {
 				profiles.push({
 					type: 'person',
 					fullname: randomName(),
@@ -119,7 +119,12 @@ export default class Notif extends Com {
 			})
 
 			let i18n_messages = sb.get(this.props, 'plugin.notification.i18n_message_quill_deltas', [])
+
 			let i18n_message = i18n_messages[Math.floor(Math.random() * sb.size(i18n_messages))]
+
+			let fallbackmsgs = sb.get(this.props, 'plugin.notification.message_quill_deltas', [])
+			let fallbackmessage = fallbackmsgs[Math.floor(Math.random() * sb.size(fallbackmsgs))]
+
 			let i18n_title = sb.get(this.props, 'plugin.notification.i18n_title_quill_delta')
 
 			return this.setState({
@@ -127,8 +132,8 @@ export default class Notif extends Com {
 				last_show: sb.Date.now(),
 				timestamp: timestamp,
 				user: user,
-				title: this.props.t.i18n(i18n_title),
-				message: this.props.t.i18n(i18n_message),
+				title: this.props.t.i18n(i18n_title) || sb.get(this.props, 'plugin.notification.title_quill_delta'),
+				message: this.props.t.i18n(i18n_message) || fallbackmessage,
 			})
 		}
 		this.setState({closeAnimation: true})
@@ -140,7 +145,7 @@ export default class Notif extends Com {
 	async refreshCSS() {
 		// make sure you are still alive
 		let plugins = this.props.store.matchPlugin()
-		let found = sb.find(plugins, plugin => plugin.id === this.props.plugin.id)
+		let found = sb.find(plugins, (plugin) => plugin.id === this.props.plugin.id)
 		if (!found) return
 		let css = (await notifCSS).default.default.toString()
 		// var outcss = sb.replaceCssVariablePlugin(css, this.props.plugin.popup)
@@ -191,7 +196,7 @@ export default class Notif extends Com {
 	renderTextFromQuillDelta(quilldelta, profile) {
 		let qd = sb.parseJSON(quilldelta)
 		if (!qd || !qd.ops) return null
-		return sb.map(qd.ops, op => {
+		return sb.map(qd.ops, (op) => {
 			let out = null
 			if (!op.insert) return null
 
@@ -215,7 +220,6 @@ export default class Notif extends Com {
 		if (!this.state.imageReady) return null
 		if (this.state.close) return null
 		if (!this.state.message) return null
-
 		let notif = sb.get(this.props.plugin, 'notification', {})
 		if (!notif) return null
 		let animation = ''
@@ -244,24 +248,29 @@ export default class Notif extends Com {
 		return (
 			<div
 				class={animation + ' notif' + ' notif__' + pos}
-				onClick={e => this.onClick(e)}
-				onmouseover={e => this.setOver(true)}
+				onClick={(e) => this.onClick(e)}
+				onmouseover={(e) => this.setOver(true)}
 				style={st}
-				onmouseleave={e => this.setOver(false)}>
-				<div style="position: relative !important; display: flex !important; align-items: center !important;">
-					<img alt="notification background" class="notif_bg" src={notif.background_url} style={sb.js2css(notif.background_style)} />
+				onmouseleave={(e) => this.setOver(false)}>
+				<div style='position: relative !important; display: flex !important; align-items: center !important;'>
+					<img
+						alt='notification background'
+						class='notif_bg'
+						src={notif.background_url}
+						style={sb.js2css(notif.background_style)}
+					/>
 					{this.renderCloseButton()}
-					<div class="notif_avatar" style={sb.js2css(notif.avatar_style)}>
-						<img alt="notification avatar" class="notif_avatar__img" src={user.avatar_url} />
+					<div class='notif_avatar' style={sb.js2css(notif.avatar_style)}>
+						<img alt='notification avatar' class='notif_avatar__img' src={user.avatar_url} />
 					</div>
-					<div class="notif_body">
-						<div class="notif_title" style={sb.js2css(notif.title_style)}>
+					<div class='notif_body'>
+						<div class='notif_title' style={sb.js2css(notif.title_style)}>
 							{this.renderTextFromQuillDelta(this.state.title, user)}
 						</div>
-						<div class="notif_message" style={sb.js2css(notif.message_style)}>
+						<div class='notif_message' style={sb.js2css(notif.message_style)}>
 							{this.renderTextFromQuillDelta(this.state.message, user)}
 						</div>
-						<div class="notif_time" style={sb.js2css(notif.subtext_style)}>
+						<div class='notif_time' style={sb.js2css(notif.subtext_style)}>
 							{this.state.timestamp}
 						</div>
 					</div>

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
 
@@ -372,11 +371,19 @@ function downloadLanguage(store, locale, force) {
 const getLocale = (plugin, loc) => {
 	if (!loc) loc = ''
 	let found = sb.find(plugin.locales, (l) => l.toLowerCase().trim() === loc.toLowerCase().trim())
-	if (found) return 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/store/api.js

@@ -47,10 +47,7 @@ export default class {
 			.get('/conversations')
 
 	listMessages = (cid, limit, start_id) =>
-		this.apireq
-			.addQuery('limit', limit)
-			.addQuery('start_id', start_id)
-			.get(`/conversations/${cid}/messages`)
+		this.apireq.addQuery('limit', limit).addQuery('start_id', start_id).get(`/conversations/${cid}/messages`)
 
 	ajax = ajax
 
@@ -85,7 +82,7 @@ export default class {
 		return this.sendEvent({
 			by: {id: this.uid, device: device},
 			type: 'content_viewed',
-			data: {product: {url: pageUrl, title: pageTitle}},
+			data: {product: {url: pageUrl, name: pageTitle, title: pageTitle}},
 		})
 	}
 

package/src/store/store.js

@@ -930,143 +930,6 @@ export default class Store {
 		setTimeout(() => this.loopTime(), 60000)
 	}
 
-	getPrice(obj, field, currency) {
-		if (!obj) return 0
-		if (!currency) return obj[field] || 0
-		let defcur = sb.get(this.matchAccount(), 'currency')
-		if (currency != defcur) return sb.get(obj, [field + '_locale', currency], 0)
-		return obj[field] || 0
-	}
-
-	getOrderTotal(order) {
-		let subtotal = 0
-		sb.map(order.items, (item) => {
-			if (!item.product) return 0
-			let price = this.getPrice(item.product, 'price', order.currency) * item.quantity
-
-			if (item.discount_type) {
-				if (item.discount_type == 'percentage') {
-					if (item.discount_before_tax && item.discount_percentage > 0) {
-						price = price * (1 - item.discount_percentage / 10000)
-					}
-				} else if (item.discount_type == 'amount') {
-					let computed_discount = this.getPrice(item, 'discount', order.currency)
-					if (item.discount_before_tax && computed_discount > 0) {
-						price = price - computed_discount
-						if (price <= 0) price = 0
-					}
-				}
-			}
-			subtotal += price
-		})
-
-		let computed_discount = 0
-		// add specific item discount after tax to computed_discount
-		sb.map(order.items, (item) => {
-			if (!item.discount_type) return
-			if (!item.product) return 0
-			let price = this.getPrice(item.product, 'price', order.currency) * item.quantity
-
-			let tax = item.product.tax
-			let taxprice = 0
-			if (tax && tax.id) taxprice = (price * tax.percentage) / 10000
-
-			if (item.discount_type == 'percentage' && !item.discount_before_tax && item.discount_percentage > 0) {
-				computed_discount += ((price + taxprice) * item.discount_percentage) / 10000
-			} else if (item.discount_type == 'amount') {
-				let itemdiscount = this.getPrice(item, 'discount', order.currency)
-				if (!item.discount_before_tax && itemdiscount > 0) {
-					// CAUTION: easy to miss condition
-					if (itemdiscount > price + taxprice) itemdiscount = price + taxprice
-					computed_discount += itemdiscount
-				}
-			}
-		})
-
-		// TAX
-		let totaltax = 0
-		let taxM = {}
-		sb.map(order.items, (item, i) => {
-			if (!item.product) return
-			let tax = item.product.tax
-			if (!tax) return
-			if (!tax.id) return
-			let price = this.getPrice(item.product, 'price', order.currency) * item.quantity
-
-			if (item.discount_type) {
-				if (item.discount_type == 'percentage') {
-					if (item.discount_before_tax && item.discount_percentage > 0) {
-						price = price * (1 - item.discount_percentage / 10000)
-					}
-				} else if (item.discount_type == 'amount') {
-					let computed_discount = this.getPrice(item, 'discount', order.currency)
-					if (item.discount_before_tax && computed_discount > 0) {
-						price = price - computed_discount
-						if (price <= 0) price = 0
-					}
-				}
-			}
-			let taxprice = (price * tax.percentage) / 10000
-
-			taxM[i] = {
-				tax: tax,
-				taxprice: taxprice,
-			}
-		})
-
-		// have discount before tax
-		if (order.discount_before_tax) {
-			// decrease tax by discount percentage
-			if (order.discount_type == 'percentage' && order.discount_percentage > 0) {
-				sb.map(taxM, (t) => {
-					t.taxprice = t.taxprice * (1 - order.discount_percentage / 10000)
-				})
-				computed_discount += (subtotal * order.discount_percentage) / 10000
-			} else if (order.discount_type == 'amount') {
-				let discount = this.getPrice(order, 'discount', order.currency)
-				if (subtotal > 0) {
-					sb.map(taxM, (t) => {
-						// CAUTION: easy to miss
-						if (discount > subtotal) discount = subtotal
-
-						t.taxprice = t.taxprice * (1 - discount / subtotal)
-					})
-				}
-				computed_discount += discount
-			}
-		} else {
-			if (order.discount_type == 'percentage' && order.discount_percentage > 0) {
-				let taxprice = 0
-				sb.map(taxM, (t) => (taxprice += t.taxprice))
-				computed_discount += ((subtotal + taxprice) * order.discount_percentage) / 10000
-			} else if (order.discount_type == 'amount') {
-				let discount = this.getPrice(order, 'discount', order.currency)
-				computed_discount += discount
-			}
-		}
-
-		// SHIP
-		let shippingfee = this.getPrice(order.shipping, 'fee', order.currency)
-		if (shippingfee > 0) {
-			if (sb.get(order, 'shipping.tax.id')) {
-				let tax = order.shipping.tax
-				let taxprice = (shippingfee * tax.percentage) / 10000
-				taxM['ship'] = {tax: tax, taxprice: taxprice}
-			}
-		}
-
-		let taxprice = 0
-		sb.map(taxM, (t) => (taxprice += t.taxprice))
-		let total = subtotal + taxprice - computed_discount + shippingfee
-
-		// add adjustment
-		let adj = this.getPrice(order, 'adjustment', order.currency)
-		total += adj
-
-		if (total < 0) total = 0
-		return {subtotal, computed_discount, taxM, total}
-	}
-
 	replaceFileUrl(src) {
 		if (!src) return ''
 

package/src/util/campaign.js

@@ -1,8 +1,8 @@
 var common = require('./common.js')
 
 // callback when user is about to leave site
-export function trackExitIntent (cb) {
-	let handler = e => {
+export function trackExitIntent(cb) {
+	let handler = (e) => {
 		if (e.clientY > 10) return // not move to top
 		if (cb) cb()
 		document.removeEventListener('mouseout', handler)
@@ -11,8 +11,8 @@ export function trackExitIntent (cb) {
 }
 
 // callback after user has scrolled X% down on the current page
-export function trackScrollingPercentage (percent, cb) {
-	let handleScroll = e => {
+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
@@ -28,14 +28,17 @@ export function trackScrollingPercentage (percent, cb) {
 }
 
 // callback when user clicks on a specific part of page
-export function trackAreaClicked (selector, cb) {
+export function trackAreaClicked(selector, cb) {
 	if (!selector) return
 	selector = selector || ''
-	common.map(selector.split('\n'), selector => {
+	common.map(selector.split('\n'), (selector) => {
 		selector = common.trim(selector)
 		if (!selector) return
-		let doms = document.querySelectorAll(selector)
-		common.map(doms, dom => {
+		let doms = []
+		try {
+			doms = document.querySelectorAll(selector)
+		} catch (e) {}
+		common.map(doms, (dom) => {
 			if (!dom) return
 			dom.addEventListener('click', cb, false)
 		})
@@ -43,7 +46,7 @@ export function trackAreaClicked (selector, cb) {
 }
 
 // callback when user has stopped all activity (clicking, scrolling, ...)
-export function trackInactivity (seconds, cb) {
+export function trackInactivity(seconds, cb) {
 	let events = [
 		'scroll',
 		'keyup',
@@ -80,9 +83,9 @@ let timeOnPage = 0 // seconds
 setInterval(() => timeOnPage++, 1000)
 
 // when user has been on the page for at least X seconds
-export function trackTimeOnPage (seconds, cb) {
+export function trackTimeOnPage(seconds, cb) {
 	if (seconds < 1) {
-		return setTimeout(function () {
+		return setTimeout(function() {
 			cb(seconds)
 		}, 100)
 	}

package/take.js

@@ -0,0 +1,36 @@
+const puppeteer = require('puppeteer')
+
+async function take() {
+	const browser = await puppeteer.launch({args: ['--no-sandbox']})
+	const page = await browser.newPage()
+	let templateBase64 = Buffer.from(encodeURIComponent(process.argv[2])).toString('base64')
+
+	await page.setViewport({width: 940, height: 700})
+	await page.goto('file://' + __dirname + '/dist/screenshoot.html#' + templateBase64, {
+		waitUntil: 'networkidle2',
+	})
+	await timeout(3000)
+	let out = makeid(20) + '.jpg'
+	await page.screenshot({path: out})
+	console.log(out)
+	browser.close()
+}
+
+function timeout(ms) {
+	return new Promise((resolve) => setTimeout(resolve, ms))
+}
+
+function makeid(length) {
+	var result = []
+	var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+	var charactersLength = characters.length
+	for (var i = 0; i < length; i++) {
+		result.push(characters.charAt(Math.floor(Math.random() * charactersLength)))
+	}
+	return result.join('')
+}
+
+take()
+
+// try (remember to run 'npm run build' before running following command)
+// node take.js '{"account_id":"acpxkgumifuoofoosble","id":"cpqzpnooosdhodmkjlixs","name":"Đặt hàng trước","type":"notification","created":1620813049308,"created_by":"agqmwfyuehpuzpehmv","updated":1620816899738,"updated_by":"agqmwfyuehpuzpehmv","triggers":[{"type":"after_pageview"}],"initiative_frequency":{"once_per_session":true},"notification":{"profile_tags":["nam thanh niên","nữ thanh niên"],"profiles":[{"avatar_url":"https://public-gcs.subiz-cdn.com/widget_assets/profile_images/VNM02.png","fullname":"Đoàn Hải Nam","country":"vn","gender":"Male","age":26,"tags":["nam thanh niên","vui tươi"],"email":"hainamxx@gmail.com","phone":"0823588xxx","address":"Hàng Da, Hoàn Kiếm, Hà Nội"},{"avatar_url":"https://public-gcs.subiz-cdn.com/widget_assets/profile_images/VNF03.png","fullname":"Nguyễn Hoàng Lan","country":"vn","gender":"Female","age":36,"tags":["nữ trung niên","lịch sự","vui tươi"],"email":"lannhoanggxx@gmail.com","phone":"0326789xxx","address":"Lũng Cú, Đồng Văn, Hà Giang"},{"avatar_url":"https://public-gcs.subiz-cdn.com/widget_assets/profile_images/VNM04.png","fullname":"Nguyễn Quý Tiến","country":"vn","gender":"Male","age":40,"tags":["nam trung niên","lịch sự"],"email":"tiendzxxx@gmail.com","phone":"056189xxxx","address":"Thụy Khuê, Tây Hồ, Hà Nội"},{"avatar_url":"https://public-gcs.subiz-cdn.com/widget_assets/profile_images/VNF05.png","fullname":"Phạm Hồng Thắm","country":"vn","gender":"Female","age":36,"tags":["nữ trung niên","lịch sự"],"email":"thampham1506xxx@gmail.com","phone":"033820xxxx","address":"Ngọc Đào, Hà Quang, Cao Bằng"},{"avatar_url":"https://public-gcs.subiz-cdn.com/widget_assets/profile_images/VNF06.png","fullname":"Ngô Thị Như Hòa","country":"vn","gender":"Female","age":29,"tags":["nữ thanh niên","lịch sự"],"email":"alice29xxx@gmail.com","phone":"058104xxxx","address":"Xuân Đỉnh, Bắc Từ Liêm, Hà Nội"}],"title_quill_delta":"{\"ops\":[{\"insert\":{\"dynamicField\":{\"id\":\"hesivydbbhoybwyk\",\"value\":\"Họ tên\",\"key\":\"user.fullname\"}}},{\"insert\":\" Ba \\n\"}]}","title_style":{"color":"rgba(255,255,255,1)"},"message_quill_deltas":["{\"ops\":[{\"insert\":\"Đặt trước Note 20 thành công\\n\"}]}"],"message_style":{"color":"rgba(216,207,207,1)"},"url":"https://subiz.com.vn","new_tab":true,"background_url":"https://public-gcs.subiz-cdn.com/widget_assets/notification_background/Frame%20129.png","subtext_style":{},"avatar_style":{"border_radius":"50%"},"position":"bottom-left","interval_sec":60000},"conversion_notification":{"all_agents":true},"template_title":"Đặt hàng trước","thumbnail_url":"https://file-subiz.com/fiqzpohaoyckhgxylulxcpqzpnooosdhodmkjlixs.jpg"}'