@subiz/widget-v4 4.0.50 → 4.0.55

package/dist/HASH

@@ -1 +1 @@
-17d029eeb07
+17d7ef84382

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="./17d7ef84382.screenshoot.js"></script></body></html>

package/package.json

@@ -1,41 +1,41 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.0.50",
+	"version": "4.0.55",
 	"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.0",
-		"preact": "^10.5.15"
+		"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.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.62.1",
+		"puppeteer": "^12.0.1",
+		"webpack": "^5.64.4",
 		"webpack-bundle-analyzer": "^4.5.0",
 		"webpack-cli": "^4.9.1",
-		"webpack-dev-server": "^4.4.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,28 @@
+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.account_id = accid
+	widget._overridePlugin([plugin])
+	// widget._overrideDeviceType('mobile')
+	widget.setAccount(accid, $div)
+}
+
+main()

package/src/chatbox/Event.js

@@ -7,6 +7,7 @@ import FormAttachments from './FormAttachments.js'
 import FormSubmitAttachments from './FormSubmitAttachments.js'
 import GenericTemplateAttachments from './GenericTemplateAttachments.js'
 import ProductAttachments from './ProductAttachments.js'
+import OrderAttachments from './OrderAttachments.js'
 //import FormSubmitAttachment from './formSubmitAttachment.js'
 import VideoAttachments from './VideoAttachments.js'
 import TextMessage from './TextMessage.js'
@@ -140,6 +141,7 @@ export default class Event extends Com {
 					<FormSubmitAttachments store={this.props.store} ev={ev} t={this.props.t} />
 					<GenericTemplateAttachments store={this.props.store} ev={ev} onSelect={(e) => this.choosePostbackBtn(e)} />
 					<ProductAttachments t={this.props.t} store={this.props.store} ev={ev} />
+					<OrderAttachments t={this.props.t} store={this.props.store} ev={ev} />
 					<QuickReplies store={this.props.store} ev={ev} onSelect={(e) => this.chooseQuickReply(e)} />
 				</div>
 			)

package/src/chatbox/OrderAttachments.js

@@ -0,0 +1,107 @@
+import sb from '../util/index.js'
+import {Com} from '../common.js'
+import {h, createRef, Fragment} from 'preact'
+
+export default class ProductAttachments extends Com {
+	render() {
+		let byType = sb.get(this.props.ev, 'by.type')
+		if (byType === 'user') return null
+		// filter out all generic
+
+		let acc = this.props.store.matchAccount()
+		var attachments = sb.get(this.props.ev, 'data.message.attachments', [])
+		let orders = sb.filter(attachments, (att) => att.type === 'order' && att.order).map((att) => att.order)
+
+		if (orders.length === 0) return null
+
+		let $orders = sb.map(orders, (order, index) => {
+			let $note = null
+			if (order.note) {
+				$note = (
+					<div>
+						<div class='order_attachment__label'>{this.props.t('note')}</div>
+						<div class='order_attachment__text_truncate'>{order.note}</div>
+					</div>
+				)
+			}
+
+			let $products = null
+			if (sb.size(order.items) > 0) {
+				$products = (
+					<div>
+						<div class='order_attachment__label'>{this.props.t('product')}</div>
+						{sb.map(order.items, (item) => {
+							let product = item.product || {}
+
+							return (
+								<div class='order_attachment__product'>
+									<img
+										class='order_attachment__product_img'
+										src={(sb.get(product, 'images.0'), require('../../assets/img/default.jpg'))}
+									/>
+									<div style='overflow: hidden !important;'>
+										<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('qty')} {item.quantity}&nbsp;·&nbsp;{sb.formatCurrency(product.price)}
+										</div>
+									</div>
+								</div>
+							)
+						})}
+					</div>
+				)
+			}
+
+			let $total = (
+				<div class='order_attachment__footer'>
+					<div>{this.props.t('total')}</div>{' '}
+					<div>
+						<b>{sb.formatCurrency(order.total)}</b>
+					</div>
+				</div>
+			)
+
+			let addr = sb.get(order, 'shipping.address', {})
+			let fulladdr = [addr.street, addr.ward, addr.district, addr.region, addr.country].filter((a) => a).join(', ')
+			let address = fulladdr
+
+			let phoneattr = sb.find(sb.get(order, 'user.attributes', []), (attr) => attr.key === 'phones') || {
+				key: 'phones',
+				text: '',
+			}
+			let phone = sb.get(order, 'shipping.address.phone', '').trim()
+			phone = phone || sb.trim(phoneattr.text)
+			if (phone) phone = this.props.t('phn') + ': ' + phone
+
+			let $shipto = null
+			if (address || phone) {
+				$shipto = (
+					<div>
+						<div class='order_attachment__label'>{this.props.t('ship_to')}</div>
+						<div class='order_attachment__text_truncate'>{address}</div>
+						<div class='order_attachment__text_truncate'>{phone}</div>
+					</div>
+				)
+			}
+
+			return (
+				<div class={`order_attachment order_attachment__${byType}`}>
+					<div class='order_attachment__header'>
+						{this.props.t('order')}
+						<span class='order_attachment__text_muted order_attachment__text_sm'>#{order.id}</span>
+					</div>
+					{$products}
+					{$shipto}
+					<div>
+						<div class='order_attachment__label'>{this.props.t('payment')}</div>
+						<div>COD</div>
+					</div>
+					{$note}
+					{$total}
+				</div>
+			)
+		})
+		return $orders
+	}
+}

package/src/chatbox/ProductAttachments.js

@@ -16,6 +16,9 @@ export default class ProductAttachments extends Com {
 		products = products.filter((product) => product.product && product.product.name)
 
 		if (products.length === 0) return null
+
+		let acc = this.props.store.matchAccount()
+
 		let $products = sb.map(products, (att, index) => {
 			let product = att.product
 
@@ -32,23 +35,26 @@ 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
-			if (product.short_description)
-				$subtitle = <div class='product_attachment__subtitle'>{product.short_description}</div>
+			let desc = product.description || product.long_description
+			if (desc) $subtitle = <div class='product_attachment__subtitle'>{desc}</div>
 
 			let $price = null
-			if (product.sale_price) {
-				$price = <div class='product_attachment__price'>{product.sale_price} VND</div>
+			if (product.price) {
+				$price = (
+					<div class='product_attachment__price'>
+						{product.currency || sb.get(acc, 'currency', '')} {sb.formatCurrency(product.price)}
+					</div>
+				)
 			}
-
 			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>
 		)
@@ -106,7 +106,7 @@ export default class Notif extends Com {
 				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

@@ -372,7 +372,7 @@ 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()

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

@@ -149,7 +149,7 @@ export default class Store {
 	overridePlugin(plugins) {
 		if (!Array.isArray(plugins)) throw 'plugins must be be an array'
 		let pluginM = {}
-		sb.map(plugins, function(plugin) {
+		sb.map(plugins, function (plugin) {
 			pluginM[plugin.id] = plugin
 		})
 		this.forcePlugins = pluginM
@@ -1042,7 +1042,7 @@ function getGaClientId() {
 	if (!hasGA()) return clientId
 
 	var allTrackers = window.ga.getAll() || []
-	allTrackers.forEach(function(tracker) {
+	allTrackers.forEach(function (tracker) {
 		clientId = tracker.get('clientId')
 	})
 
@@ -1059,7 +1059,7 @@ function getGaTrackingIds() {
 	if (!hasGA()) return trackingIds
 
 	const allTrackers = window.ga.getAll() || []
-	allTrackers.forEach(function(tracker) {
+	allTrackers.forEach(function (tracker) {
 		var trackingId = tracker.get('trackingId')
 		if (trackingId) trackingIds.push(trackingId)
 	})
@@ -1077,7 +1077,7 @@ function sendToGA(category, action, label) {
 	if (!hasGA()) return
 
 	const allTrackers = window.ga.getAll() || []
-	allTrackers.forEach(function(tracker) {
+	allTrackers.forEach(function (tracker) {
 		const name = tracker.get('name')
 		window.ga(name + '.send', 'event', category, action, label)
 	})
@@ -1090,7 +1090,7 @@ function sendEventToThirdParty(category, action, label) {
 }
 
 // from http://detectmobilebrowsers.com/
-let mobileCheck = (function(a) {
+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,
@@ -1101,6 +1101,7 @@ let mobileCheck = (function(a) {
 	)
 })(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,
+	)

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/src/util/common.js

@@ -1071,6 +1071,12 @@ export function getUrlParameter() {
 
 export var sleep = (ms) => new Promise((res) => setTimeout(res, ms))
 
+export function formatCurrency(val) {
+	if (!val) return 0
+	val = Math.round(val)
+	return val.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
+}
+
 function replaceFileUrl(src) {
 	let fileurl = 'https://vcdn.subiz-cdn.com/file/'
 	if (!src) return ''

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"}'

package/webpack.dev.js

@@ -7,6 +7,7 @@ module.exports = {
 		inject: './inject.js',
 		preview: './preview.js',
 		library: './library.js',
+		screenshoot: './screenshoot.js',
 	},
 	output: {publicPath: '/'},
 	devServer: {port: 8082, host: '0.0.0.0', hot: false, liveReload: false},
@@ -16,6 +17,12 @@ module.exports = {
 		new HtmlWebpackPlugin({filename: './preview.html', template: './preview.html', chunks: ['preview']}),
 		new HtmlWebpackPlugin({filename: './inject.html', template: './inject.html', inject: 'body', chunks: ['inject']}),
 		new HtmlWebpackPlugin({filename: './library.html', template: './index.html', inject: 'body', chunks: ['library']}),
+		new HtmlWebpackPlugin({
+			filename: './screenshoot.html',
+			template: './screenshoot.html',
+			inject: 'body',
+			chunks: ['screenshoot'],
+		}),
 	],
 	module: {
 		rules: [