@subiz/widget-v4 4.1.17 → 4.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.17",
+	"version": "4.1.18",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -12,15 +12,15 @@
 		"@subiz/ajax": "^3.0.12",
 		"@subiz/flow": "^1.0.9",
 		"@subiz/storage": "0.0.8",
-		"@subiz/wsclient": "^3.1.9",
+		"@subiz/wsclient": "^4.0.9",
 		"cookie_js": "1.4.2",
-		"core-js": "^3.27.2",
+		"core-js": "^3.28.0",
 		"css-loader": "5.2.7",
 		"file-loader": "^6.2.0",
 		"less": "^4.1.3",
 		"less-loader": "^11.1.0",
 		"marked": "^4.2.12",
-		"preact": "^10.11.3"
+		"preact": "^10.12.1"
 	},
 	"devDependencies": {
 		"@babel/cli": "^7.20.7",
@@ -31,10 +31,10 @@
 		"babel-loader": "^9.1.2",
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.5.0",
-		"prettier": "^2.8.3",
-		"puppeteer": "^19.6.3",
+		"prettier": "^2.8.4",
+		"puppeteer": "^19.7.0",
 		"webpack": "^5.75.0",
-		"webpack-bundle-analyzer": "^4.7.0",
+		"webpack-bundle-analyzer": "^4.8.0",
 		"webpack-cli": "^5.0.1",
 		"webpack-dev-server": "^4.11.1"
 	}

package/src/call/call.js

@@ -22,7 +22,7 @@ export default class Notif extends Com {
 	constructor(props) {
 		super(props)
 
-		setTimeout(async () => {
+		sb.setTimeout(async () => {
 			let {body: impression} = await this.props.store.sendImpression(this.props.plugin.id)
 			this.impressionToken = sb.get(impression, 'impression_token') || ''
 
@@ -95,7 +95,7 @@ export default class Notif extends Com {
 		if (!this.props.t) return
 
 		if (!close) {
-			clearTimeout(this.lastCloseTimeout)
+			sb.clearTimeout(this.lastCloseTimeout)
 
 			this.setState({closeAnimation: false})
 			let timestamp = this.randomTimestampt()
@@ -133,8 +133,8 @@ export default class Notif extends Com {
 		}
 		this.setState({closeAnimation: true})
 		this.mouse_leave = sb.Date.now()
-		this.lastCloseTimeout = setTimeout(() => this.setState({close: true, closeAnimation: false}), 150)
-		if (this.props.plugin._dont_close) setTimeout(() => this.setState({closeAnimation: false, close: false}), 1000)
+		this.lastCloseTimeout = sb.setTimeout(() => this.setState({close: true, closeAnimation: false}), 150)
+		if (this.props.plugin._dont_close) sb.setTimeout(() => this.setState({closeAnimation: false, close: false}), 1000)
 	}
 
 	async refreshCSS() {
@@ -149,7 +149,7 @@ export default class Notif extends Com {
 	}
 
 	componentWillUnmount() {
-		clearInterval(this.interval)
+		sb.clearInterval(this.interval)
 		sb.setCss(this.props.plugin.id, this.$cssStyleDiv, '')
 	}
 
@@ -166,7 +166,7 @@ export default class Notif extends Com {
 		this.props.store.onResetCSS(this, () => this.refreshCSS())
 		await this.refreshCSS()
 
-		this.interval = setInterval(() => {
+		this.interval = sb.setInterval(() => {
 			if (this.props._destroy) return this.componentWillUnmount()
 			// keep notification open when user hover on it
 			// but dont close right after mouse leave, activate after 1 sec
@@ -182,7 +182,7 @@ export default class Notif extends Com {
 			}
 		}, 1000)
 
-		setTimeout(() => {
+		sb.setTimeout(() => {
 			this.setState({cssready: true})
 			this.setClose(false) // auto open when created
 		}, 50)

package/src/chatbox/DropdownSelect.js

@@ -114,7 +114,7 @@ export default class DropdownSelect extends Com {
 	focusFilter() {
 		if (!this.filterRef.current) return
 		this.filterRef.current.focus()
-		setTimeout(() => {
+		sb.setTimeout(() => {
 			if (!this.filterRef.current) return
 			this.filterRef.current.focus()
 		}, 100)

package/src/chatbox/Event.js

@@ -167,7 +167,7 @@ export default class Event extends Com {
 		}
 
 		if (sb.getMsgField(ev, 'idempotency') === ev.id && this.props.store.now() - ev.created < 900) {
-			setTimeout(() => this.setState({refresh: this.state.refresh}), 1000)
+			sb.setTimeout(() => this.setState({refresh: this.state.refresh}), 1000)
 		}
 
 		// only show sending while the message is send too long (>300ms) but haven't returned from

package/src/chatbox/Events.js

@@ -173,7 +173,7 @@ export default class Events extends Com {
 		this.setState({error: false})
 		this.scrollToBottom()
 
-		setTimeout(() => this.setState({loading: false}), 50)
+		sb.setTimeout(() => this.setState({loading: false}), 50)
 	}
 
 	isBottom() {
@@ -183,11 +183,11 @@ export default class Events extends Com {
 	}
 
 	scrollToBottom() {
-		setTimeout(() => {
+		sb.setTimeout(() => {
 			const $div = this.refBody
 			if ($div) $div.scrollTop = $div.scrollHeight
 		})
-		setTimeout(() => {
+		sb.setTimeout(() => {
 			const $div = this.refBody
 			if ($div) $div.scrollTop = $div.scrollHeight
 		}, 200)

package/src/chatbox/MessageInput.js

@@ -228,10 +228,10 @@ export default class MessageInput extends Com {
 	focus() {
 		if (this.props.disabled) return
 		this.refMessageInput.current && this.refMessageInput.current.focus()
-		setTimeout(() => {
+		sb.setTimeout(() => {
 			this.refMessageInput.current && this.refMessageInput.current.focus()
 		})
-		setTimeout(() => {
+		sb.setTimeout(() => {
 			this.refMessageInput.current && this.refMessageInput.current.focus()
 		}, 100)
 	}

package/src/chatbox/Order.js

@@ -59,7 +59,7 @@ export default class Order extends Com {
 	render() {
 		if (this._show != this.props.show) {
 			this._show = this.props.show
-			setTimeout(() => {
+			sb.setTimeout(() => {
 				if (!this._show) this.close()
 				else this.open()
 			})

package/src/chatbox/Rating.js

@@ -155,7 +155,7 @@ export default class Rating extends Com {
 		if (!this.state.hide) return
 		this.setState({hide: false})
 		if (!this.refRating.current) return
-		setTimeout(() => {
+		sb.setTimeout(() => {
 			if (this.refComment.current) this.refComment.current.focus()
 		}, 400)
 		this.refComment.current.value = ''

package/src/chatbox/Typing.js

@@ -23,7 +23,7 @@ export default class Typing extends Com {
 
 			if (sb.get(ev, 'type') === 'message_sent') {
 				// stop the typing
-				if (this.timer) clearTimeout(this.timer)
+				if (this.timer) sb.clearTimeout(this.timer)
 				this.timer = null
 				this.setState({isShow: false})
 				return
@@ -35,8 +35,8 @@ export default class Typing extends Com {
 
 			if (sb.get(ev, 'type') !== 'conversation_typing') return
 			this.setState({ev: ev, isShow: true})
-			if (this.timer) clearTimeout(this.timer)
-			this.timer = setTimeout(() => {
+			if (this.timer) sb.clearTimeout(this.timer)
+			this.timer = sb.setTimeout(() => {
 				if (sb.convoOfEv(ev) !== this.props.cid) return
 
 				this.timer = null

package/src/chatbox/Widget.js

@@ -53,7 +53,7 @@ export default class Widget extends Com {
 			this.closeOrder()
 			this.setState({clickedJoin: false, quickReplyMessage: {}})
 			// this.props.store.setLastview('chat', { cid: this.props.cid })
-			setTimeout(() => {
+			sb.setTimeout(() => {
 				// focus Events then focus MessageInput
 				// if there is any pending form, MessageInput will be disabled
 				// and dont steal focus from Events
@@ -642,8 +642,8 @@ export default class Widget extends Com {
 		if (this.props.store.isPreview) return
 		var $input = this.msgInput.current
 		if (!$input) return
-		setTimeout(() => $input && $input.blur())
-		setTimeout(() => $input && $input.blur(), 300) // force lose focus
+		sb.setTimeout(() => $input && $input.blur())
+		sb.setTimeout(() => $input && $input.blur(), 300) // force lose focus
 	}
 
 	focusInput() {
@@ -659,7 +659,7 @@ export default class Widget extends Com {
 				if (!field.value) firstemptykey = key
 			})
 
-			setTimeout(() => {
+			sb.setTimeout(() => {
 				var $input = this['form_' + encode(firstemptykey)]
 				if (!$input) return
 
@@ -670,8 +670,8 @@ export default class Widget extends Com {
 
 		var $input = this.msgInput.current
 		if (!$input) return
-		setTimeout(() => $input.focus())
-		setTimeout(() => $input.focus(), 300) // force focus
+		sb.setTimeout(() => $input.focus())
+		sb.setTimeout(() => $input.focus(), 300) // force focus
 	}
 
 	onRate(rating) {

package/src/chatbox/time.js

@@ -1,7 +1,7 @@
 import sb from '../util/index.js'
 
 var g_pub = new sb.Pubsub()
-setInterval(() => g_pub.publish('time'), 20 * 1000)
+sb.setInterval(() => g_pub.publish('time'), 20 * 1000)
 
 import {Com} from '../common.js'
 import {h} from 'preact'

package/src/common.js

@@ -5,7 +5,7 @@ export class Com extends Component {
 	constructor(props) {
 		super(props)
 		this._isMounted = true
-		setTimeout(() => {
+		sb.setTimeout(() => {
 			if (this.componentWillUnmount) {
 				let old = this.componentWillUnmount.bind(this)
 				this.componentWillUnmount = () => {
@@ -74,7 +74,7 @@ let downloadLock = false
 
 export function downloadLanguage(store, locale, force) {
 	if (downloadLock)
-		return new Promise((resolve) => setTimeout(() => downloadLanguage(store, locale, force).then(resolve), 100))
+		return new Promise((resolve) => sb.setTimeout(() => downloadLanguage(store, locale, force).then(resolve), 100))
 
 	downloadLock = true
 	// let locale = getLocale()

package/src/contact/contact.js

@@ -262,7 +262,7 @@ export default class Contact extends Com {
 
 		if (this.state.pluginjson !== pluginstringify) {
 			this.refreshCSS()
-			setTimeout(() => this.setState({pluginjson: pluginstringify}))
+			sb.setTimeout(() => this.setState({pluginjson: pluginstringify}))
 		}
 
 		if (this.state.close) return null

package/src/lib.js

@@ -33,11 +33,11 @@ class Widget {
 		if (!$container) $container = document.body
 		this.pluginMgr = new PluginMgr(this, $container)
 
-		let clean = setInterval(() => {
+		let clean = sb.setInterval(() => {
 			// check if the dom is deleted
 			if ($container && $container.isConnected) return
 			this.pluginMgr.destroy()
-			clearInterval(clean)
+			sb.clearInterval(clean)
 		}, 1000)
 		this.domGate.open()
 		return user
@@ -57,11 +57,11 @@ class Widget {
 		if (!$container) $container = document.body || document
 		this.pluginMgr = new PluginMgr(this, $container)
 
-		let clean = setInterval(() => {
+		let clean = sb.setInterval(() => {
 			// check if the dom is deleted
 			if ($container && $container.isConnected) return
 			this.pluginMgr.destroy()
-			clearInterval(clean)
+			sb.clearInterval(clean)
 		}, 1000)
 		this.domGate.open()
 		return user
@@ -73,11 +73,11 @@ class Widget {
 		if (!$container) $container = document.body || document
 		this.pluginMgr = new PluginMgr(this, $container)
 
-		let clean = setInterval(() => {
+		let clean = sb.setInterval(() => {
 			// check if the dom is deleted
 			if ($container && $container.isConnected) return
 			this.pluginMgr.destroy()
-			clearInterval(clean)
+			sb.clearInterval(clean)
 		}, 1000)
 		this.domGate.open()
 		cb && cb(outmask)

package/src/notif/notif.js

@@ -22,7 +22,7 @@ export default class Notif extends Com {
 	constructor(props) {
 		super(props)
 
-		setTimeout(async () => {
+		sb.setTimeout(async () => {
 			let {body: impression} = await this.props.store.sendImpression(this.props.plugin.id)
 			this.impressionToken = sb.get(impression, 'impression_token') || ''
 
@@ -96,7 +96,7 @@ export default class Notif extends Com {
 		if (!this.props.t) return
 
 		if (!close) {
-			clearTimeout(this.lastCloseTimeout)
+			sb.clearTimeout(this.lastCloseTimeout)
 
 			this.setState({closeAnimation: false})
 			let timestamp = this.randomTimestampt()
@@ -139,8 +139,8 @@ export default class Notif extends Com {
 		}
 		this.setState({closeAnimation: true})
 		this.mouse_leave = sb.Date.now()
-		this.lastCloseTimeout = setTimeout(() => this.setState({close: true, closeAnimation: false}), 150)
-		if (this.props.plugin._dont_close) setTimeout(() => this.setState({closeAnimation: false, close: false}), 1000)
+		this.lastCloseTimeout = sb.setTimeout(() => this.setState({close: true, closeAnimation: false}), 150)
+		if (this.props.plugin._dont_close) sb.setTimeout(() => this.setState({closeAnimation: false, close: false}), 1000)
 	}
 
 	async refreshCSS() {
@@ -155,7 +155,7 @@ export default class Notif extends Com {
 	}
 
 	componentWillUnmount() {
-		clearInterval(this.interval)
+		sb.clearInterval(this.interval)
 		sb.setCss(this.props.plugin.id, this.$cssStyleDiv, '')
 	}
 
@@ -172,7 +172,7 @@ export default class Notif extends Com {
 		this.props.store.onResetCSS(this, () => this.refreshCSS())
 		await this.refreshCSS()
 
-		this.interval = setInterval(() => {
+		this.interval = sb.setInterval(() => {
 			if (this.props._destroy) return this.componentWillUnmount()
 			// keep notification open when user hover on it
 			// but dont close right after mouse leave, activate after 1 sec
@@ -188,7 +188,7 @@ export default class Notif extends Com {
 			}
 		}, 1000)
 
-		setTimeout(() => {
+		sb.setTimeout(() => {
 			this.setState({cssready: true})
 			this.setClose(false) // auto open when created
 		}, 50)

package/src/order/address_picker.js

@@ -106,7 +106,7 @@ export default class AddressPicker extends Com {
 	focusFilter() {
 		if (!this.filterRef.current) return
 		this.filterRef.current.focus()
-		setTimeout(() => {
+		sb.setTimeout(() => {
 			if (!this.filterRef.current) return
 			this.filterRef.current.focus()
 		}, 100)

package/src/popup/countdown.js

@@ -15,7 +15,7 @@ export default class Countdown extends Com {
 
 	constructor(props) {
 		super(props)
-		this.timer = setInterval(() => {
+		this.timer = sb.setInterval(() => {
 			if (this.props._destroy) return this.componentWillUnmount()
 			let cd = this.props.com.countdown || {}
 			let newFlipKey = 'cd' + ':' + cd.skin + ':' + cd.size + ':' + this.props.plugin.popup.font_family + ':'
@@ -25,7 +25,7 @@ export default class Countdown extends Com {
 	}
 
 	componentWillUnmount() {
-		clearInterval(this.timer)
+		sb.clearInterval(this.timer)
 	}
 
 	getCountDownDeltaSec(countdown) {

package/src/popup/popup.js

@@ -19,14 +19,14 @@ export default class Popup extends Com {
 	constructor(props) {
 		super(props)
 		this._formRef = createRef()
-		setTimeout(() => this.fillForm(), 1000)
+		sb.setTimeout(() => this.fillForm(), 1000)
 
-		setTimeout(async () => {
+		sb.setTimeout(async () => {
 			let {body: impression} = await this.props.store.sendImpression(this.props.plugin.id)
 			this.impressionToken = sb.get(impression, 'impression_token') || ''
 		}, 10)
 
-		setTimeout(() => {
+		sb.setTimeout(() => {
 			let fonts = {}
 			fonts[this.props.plugin.popup.font_family] = true
 			let images = {}
@@ -48,7 +48,7 @@ export default class Popup extends Com {
 			// preload images and fonts
 			sb.map(images, (_, image) => sb.preloadImg(image, () => this.setState({imageReady: true})))
 			sb.preloadWebfonts(Object.keys(fonts))
-			setTimeout(async () => {
+			sb.setTimeout(async () => {
 				await this.waitForFont(Object.keys(fonts))
 				this.setState({fontReady: true})
 			})
@@ -169,9 +169,9 @@ export default class Popup extends Com {
 		if (close) {
 			document.body.style.setProperty('overflow', this.lastoverflow)
 			this.setState({closeAnimation: true})
-			setTimeout(() => this.setState({close: true, closeAnimation: false}), 150)
+			sb.setTimeout(() => this.setState({close: true, closeAnimation: false}), 150)
 			if (this.props.plugin._dont_close)
-				setTimeout(() => {
+				sb.setTimeout(() => {
 					this.lastoverflow = window.getComputedStyle(document.body).getPropertyValue('overflow')
 					document.body.style.setProperty('overflow', 'hidden', 'important')
 					this.setState({closeAnimation: false, close: false})
@@ -255,7 +255,7 @@ export default class Popup extends Com {
 		}
 
 		for (let a of actions) {
-			if (a.action === 'close') setTimeout(() => this.setClose(true), 100)
+			if (a.action === 'close') sb.setTimeout(() => this.setClose(true), 100)
 			if (a.action === 'next_page') this.props.nextPage()
 		}
 
@@ -747,7 +747,7 @@ export default class Popup extends Com {
 		this.props.store.onResetCSS(this, () => this.refreshCSS())
 
 		await this.refreshCSS()
-		setTimeout(() => {
+		sb.setTimeout(() => {
 			this.setState({cssready: true})
 			this.setClose(false) // auto open when created
 		}, 50)

package/src/store/api.js

@@ -1,5 +1,4 @@
 import sb from '../util/index.js'
-
 const ajax = require('@subiz/ajax/src/ajax.js')
 ajax.env.XMLHttpRequest = window.XMLHttpRequest
 
@@ -41,7 +40,7 @@ export default class {
 
 				return done(true)
 			})
-		// .beforeHook((param, done) => setTimeout((_) => done(true), 1000))
+		// .beforeHook((param, done) => sb.setTimeout((_) => done(true), 1000))
 	}
 
 	setAgentId(agid) {
@@ -109,7 +108,7 @@ export default class {
 				if (!force && this.last_token && age < 3000) {
 					// the token is still good, but should get new one
 					if (this.token_generator)
-						setTimeout(async () => {
+						sb.setTimeout(async () => {
 							let token, err
 							try {
 								token = await tokenGenerator(profile_id)

package/src/store/store.js

@@ -4,7 +4,7 @@ import stor8 from '@subiz/storage'
 import API from './api.js'
 import APIFake from './api_fake.js'
 import RealtimeFake from './realtime_fake.js'
-var Realtime = require('@subiz/wsclient/index.js')
+var Realtime = require('@subiz/wsclient')
 var cookie = require('cookie_js')
 cookie.defaults.path = '/'
 cookie.expiresMultiplier = 60 * 60 * 24 // days
@@ -79,7 +79,7 @@ export default class Store {
 			if (!user.id) return // store not init
 			var dev = this.getDeviceInfo()
 			if (!dev.ga_tracking_ids || !dev.ga_client_id) return
-			clearInterval(_gaInterval)
+			sb.clearInterval(_gaInterval)
 			this.device = dev
 
 			// update gclient id
@@ -463,7 +463,7 @@ export default class Store {
 	seenLoop() {
 		// periodically send seen
 		this.seenQueue = []
-		clearInterval(this._seenInterval)
+		sb.clearInterval(this._seenInterval)
 		this._seenInterval = sb.setInterval(() => {
 			// deduplicate
 			this.seenQueue = [...new Set(this.seenQueue)]

package/src/util/campaign.js

@@ -65,14 +65,14 @@ export function trackInactivity(seconds, cb) {
 	let resetTime = () => {
 		inactiveSeconds = 0
 	}
-	let timer = setInterval(() => {
+	let timer = common.setInterval(() => {
 		inactiveSeconds++
 		if (inactiveSeconds < seconds) return
 		if (cb) cb()
 		for (let ev of events) {
 			document.removeEventListener(ev, resetTime, false)
 		}
-		clearInterval(timer)
+		common.clearInterval(timer)
 	}, 1000)
 
 	for (let ev of events) {
@@ -81,21 +81,21 @@ export function trackInactivity(seconds, cb) {
 }
 
 let timeOnPage = 0 // seconds
-setInterval(() => {
+common.setInterval(() => {
 	timeOnPage += 5
 }, 5000)
 
 // when user has been on the page for at least X seconds
 export function trackTimeOnPage(seconds, cb) {
 	if (seconds < 1) {
-		return setTimeout(function () {
+		return common.setTimeout(function () {
 			cb(seconds)
 		}, 100)
 	}
 
-	let timer = setInterval(() => {
+	let timer = common.setInterval(() => {
 		if (timeOnPage < seconds) return
 		if (cb) cb(timeOnPage)
-		clearInterval(timer)
+		common.clearInterval(timer)
 	}, 1000)
 }

package/src/util/common.js

@@ -16,6 +16,8 @@ export var Date = f.contentWindow.Date
 export var requestAnimationFrame = f.contentWindow.requestAnimationFrame
 export var setTimeout = f.contentWindow.setTimeout.bind(f.contentWindow)
 export var setInterval = f.contentWindow.setInterval.bind(f.contentWindow)
+export var clearInterval = f.contentWindow.clearInterval.bind(f.contentWindow)
+export var clearTimeout = f.contentWindow.clearTimeout.bind(f.contentWindow)
 
 // convoOfEv extracts the ID of the conversation
 // that event is sent to