@subiz/widget-v4 4.0.75 → 4.0.77

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" />
@@ -27,13 +27,17 @@
 				getUrlParameter('id') || getUrlParameter('acc_id') || getUrlParameter('account_id') || 'acpxkgumifuoofoosble'
 			// making a queue, so we can process data asynchronous
 			window._sbzaccid = accid
-			window.subiz = function() {
+			window.subiz = function () {
 				window.subiz.q.push(arguments)
 			}
 			window.subiz.q = []
 			// set account it in the very first call
 			window.subiz('setAccount', accid)
 			window.subiz('expandWidget')
+
+			if (accid == 'acpxkgumifuoofoosble') {
+				window.subiz('setViewingProduct', {id: '220170', sku: 'ipx', source_id: 'IPHONE10'})
+			}
 		</script>
 	</body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.0.75",
+	"version": "4.0.77",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -14,28 +14,28 @@
 		"@subiz/storage": "0.0.8",
 		"@subiz/wsclient": "^3.1.7",
 		"cookie_js": "1.4.2",
-		"core-js": "^3.22.5",
+		"core-js": "^3.22.8",
 		"css-loader": "5.2.7",
 		"file-loader": "^6.2.0",
 		"less": "^4.1.2",
-		"less-loader": "^10.2.0",
-		"marked": "^4.0.15",
-		"preact": "^10.7.2"
+		"less-loader": "^11.0.0",
+		"marked": "^4.0.16",
+		"preact": "^10.7.3"
 	},
 	"devDependencies": {
 		"@babel/cli": "^7.17.10",
-		"@babel/core": "^7.17.12",
+		"@babel/core": "^7.18.2",
 		"@babel/plugin-proposal-class-properties": "^7.17.12",
 		"@babel/plugin-transform-react-jsx": "^7.17.12",
-		"@babel/preset-env": "^7.17.12",
+		"@babel/preset-env": "^7.18.2",
 		"babel-loader": "^8.2.5",
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.5.0",
 		"prettier": "^2.6.2",
-		"puppeteer": "^14.1.0",
-		"webpack": "^5.72.1",
+		"puppeteer": "^14.2.1",
+		"webpack": "^5.73.0",
 		"webpack-bundle-analyzer": "^4.5.0",
 		"webpack-cli": "^4.9.2",
-		"webpack-dev-server": "^4.9.0"
+		"webpack-dev-server": "^4.9.1"
 	}
 }

package/src/lib.js

@@ -128,6 +128,11 @@ class Widget {
 
 	getUser = () => sb.parseJSON(sb.stringify(this.store.matchUser()))
 
+	setViewingProduct = (p) => this.store.linkProduct(p)
+	getViewingProduct = () => this.store.getLinkedProduct()
+
+	track = () => this.store.track()
+
 	async setLocale(locale) {
 		await this.domGate.entry()
 		return this.pluginMgr.setCurrentChatboxLocale(locale)

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
 
@@ -73,19 +70,28 @@ export default class {
 	sendEvent = (data) => this.apireq.post(`/users/${this.uid}/events`, data)
 	sendTyping = (cid) => this.apireq.post(`/conversations/${cid}/typing`)
 
-	sendPresence(device, is_focused) {
-		return this.sendEvent({
+	sendPresence = (device, is_focused, productid, source_id, sku) =>
+		this.sendEvent({
 			by: {id: this.uid, device: device},
 			type: 'presence_updated',
-			data: {presence: {pinged: sb.Date.now(), is_focused}},
+			data: {
+				presence: {
+					viewing_product_sku: sku,
+					viewing_product_source_id: source_id,
+					viewing_product_id: productid,
+					pinged: sb.Date.now(),
+					is_focused,
+				},
+			},
 		})
-	}
 
-	sendContent(device, pageUrl, pageTitle) {
+	sendContentView(device, pageUrl, pageTitle, id, source_id, sku) {
+		if (!id) id = undefined // dont accept ''
+		if (!source_id) source_id = undefined // dont accept ''
 		return this.sendEvent({
 			by: {id: this.uid, device: device},
 			type: 'content_viewed',
-			data: {product: {url: pageUrl, name: pageTitle, title: pageTitle}},
+			data: {product: {id: id, source_id: source_id, url: pageUrl, name: pageTitle, title: pageTitle, sku: sku}},
 		})
 	}
 

package/src/store/api_fake.js

@@ -112,22 +112,6 @@ function makeFakeConvo(accid, convoid, userid, agentid) {
 			id: inteid,
 		},
 		actived: 1610453070259,
-		last_event: {
-			id: 'evqyiykaoizbwnkaecwphttwk',
-			account_id: accid,
-			created: 1616213311830,
-			type: 'message_sent',
-			by: {id: userid, client_id: 'clsubizapi', type: 'user'},
-			data: {
-				message: {
-					conversation_id: convoid,
-					text: 'ok cám ơn!',
-					format: 'plaintext',
-					integration_id: inteid,
-					pongs: [{member_id: userid, type: 'seen', created: 1616213312110}],
-				},
-			},
-		},
 		last_message_sent: {
 			id: 'evqyiykaoizbwnkaecwphttwk',
 			account_id: accid,

package/src/store/store.js

@@ -45,7 +45,11 @@ export default class Store {
 
 		window.addEventListener('blur', () => this.sendPresence())
 		window.addEventListener('focus', () => this.sendPresence())
-		setInterval(() => this.sendPresence(), 30000) // dont bother delete this
+
+		// faster send rate when has focus
+		setInterval(() => this.browserVisibility === 'visible' && document.hasFocus() && this.sendPresence(), 20000) // dont bother delete this
+		// slower send rate send when no focus
+		setInterval(() => (this.browserVisibility !== 'visible' || document.hasFocus()) && this.sendPresence(), 60000) // dont bother delete this
 
 		onVisibilityChange((val) => {
 			this.browserVisibility = val
@@ -75,6 +79,24 @@ export default class Store {
 	inmem = false
 	cookie = cookie
 
+	// inmem
+	_currentViewingProduct = {}
+	linkProduct(p) {
+		if (!p) {
+			this._currentViewingProduct = {}
+			return
+		}
+
+		if (p.id) this._currentViewingProduct.id = (p.id + '').trim()
+		if (p.source_id) this._currentViewingProduct.source_id = (p.source_id + '').trim()
+		if (p.sku) this._currentViewingProduct.sku = (p.sku + '').trim()
+		// call link product
+	}
+
+	getLinkedProduct() {
+		return sb.cloneDeep(this._currentViewingProduct)
+	}
+
 	isInsync(key) {
 		return sb.Date.now() - (this.g_sync[key] || 0) < 300000
 	}
@@ -297,7 +319,13 @@ export default class Store {
 		await this.readyGate.entry()
 		if (!sb.get(this.kv.match('user'), 'id')) return // store not init
 		if (sb.isUserBanned(this.kv.match('user'))) return
-		return this.api.sendPresence(this.device, this.browserVisibility === 'visible' && document.hasFocus())
+		return this.api.sendPresence(
+			this.device,
+			this.browserVisibility === 'visible' && document.hasFocus(),
+			this._currentViewingProduct.id,
+			this._currentViewingProduct.source_id,
+			this._currentViewingProduct.sku,
+		)
 	}, 1000)
 
 	now = () => sb.Date.now() + this.timeDiff // millisecond on server
@@ -573,7 +601,14 @@ export default class Store {
 	// send the content view, the first presence and record domain
 	async track() {
 		let user = this.kv.match('user') || {}
-		await this.api.sendContent(this.device, location.href, document.title)
+		await this.api.sendContentView(
+			this.device,
+			location.href,
+			document.title,
+			this._currentViewingProduct.id,
+			this._currentViewingProduct.source_id,
+			this._currentViewingProduct.sku,
+		)
 		this.sendPresence()
 	}
 
@@ -692,7 +727,6 @@ export default class Store {
 		if (ev.type !== 'message_pong' && ev.type !== 'conversation_typing') {
 			this.chain.put(cid, ev.id, sb.getMs(ev.created), ev)
 		}
-		convo.last_event = ev
 		this._setConvo(convo)
 		this.pubsub.publish('account')
 	}