@subiz/widget-v4 4.0.75 → 4.0.79

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.79",
 	"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/chatbox/ButtonAttachments.js

@@ -21,6 +21,6 @@ export default class ButtonAttachments extends Com {
 			sb.each(sb.get(att, 'buttons') || [], btn => buttons.push(btn))
 		})
 
-		return <Buttons store={this.props.store} buttons={buttons} />
+		return <Buttons store={this.props.store} buttons={buttons} t={this.props.t}/>
 	}
 }

package/src/chatbox/Buttons.js

@@ -13,7 +13,7 @@ export default class Buttons extends Com {
 			if (button.type === 'call_button') {
 				return (
 					<a class='url-button-attachment' href={'tel:' + button.phone_number} key={index} title={button.title}>
-						{button.title}
+						{this.props.t.i18n(button.i18n_title) || button.title}
 					</a>
 				)
 			}
@@ -21,7 +21,7 @@ export default class Buttons extends Com {
 			if (button.type === 'url_button') {
 				return (
 					<a class='url-button-attachment' href={button.url} target='_blank' key={index} title={button.title}>
-						{button.title || button.url}
+						{this.props.t.i18n(button.i18n_title) || button.title || button.url} 
 					</a>
 				)
 			}
@@ -29,7 +29,7 @@ export default class Buttons extends Com {
 			if (button.type === 'postback_button') {
 				return (
 					<a class='url-button-attachment' href='javascript:;' onClick={(_) => this.props.onSelect(button)}>
-						{button.title}
+						{this.props.t.i18n(button.i18n_title) || button.title}
 					</a>
 				)
 			}

package/src/chatbox/Event.js

@@ -130,7 +130,7 @@ export default class Event extends Com {
 					<AudioAttachments store={this.props.store} ev={ev} />
 					<VideoAttachments store={this.props.store} ev={ev} />
 					<FileAttachments store={this.props.store} ev={ev} />
-					<ButtonAttachments store={this.props.store} ev={ev} />
+					<ButtonAttachments store={this.props.store} ev={ev} t={this.props.t}/>
 					<FormAttachments
 						store={this.props.store}
 						onSubmit={this.props.onFormSubmit}
@@ -139,7 +139,7 @@ export default class Event extends Com {
 						t={this.props.t}
 					/>
 					<FormSubmitAttachments store={this.props.store} ev={ev} t={this.props.t} />
-					<GenericTemplateAttachments store={this.props.store} ev={ev} onSelect={(e) => this.choosePostbackBtn(e)} />
+					<GenericTemplateAttachments store={this.props.store} ev={ev} onSelect={(e) => this.choosePostbackBtn(e)} t={this.props.t}/>
 					<ProductAttachments t={this.props.t} onPostback={(e) => this.choosePostbackBtn(e)} 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)} />
@@ -182,7 +182,7 @@ export default class Event extends Com {
 					<AudioAttachments store={this.props.store} ev={ev} />
 					<VideoAttachments store={this.props.store} ev={ev} />
 					<FileAttachments store={this.props.store} ev={ev} />
-					<ButtonAttachments store={this.props.store} ev={ev} />
+					<ButtonAttachments store={this.props.store} ev={ev} t={this.props.t}/>
 					<FormAttachments store={this.props.store} onSubmit={this.props.onFormSubmit} ref={this.refForm} ev={ev} />
 					<ProductAttachments t={this.props.t} store={this.props.store} ev={ev} />
 					<FormSubmitAttachments store={this.props.store} ev={ev} />

package/src/chatbox/GenericTemplateAttachments.js

@@ -2,11 +2,11 @@ import Buttons from './Buttons.js'
 import sb from '../util/index.js'
 import Drag from './touchscroll'
 
-import { Com } from '../common.js'
-import { h, createRef, Fragment } from 'preact'
+import {Com} from '../common.js'
+import {h, createRef, Fragment} from 'preact'
 
 export default class GenericTemplateAttachments extends Com {
-	constructor (props) {
+	constructor(props) {
 		super(props)
 		this.state = {
 			focusing: 0, // element index
@@ -15,39 +15,45 @@ export default class GenericTemplateAttachments extends Com {
 		this.galleryRef = createRef()
 	}
 
-	componentDidMount () {
+	componentDidMount() {
 		this.bindDrag()
 	}
 
-	focus (eleindex) {
-		this.setState({ focusing: eleindex })
-		// this.galleryRef.current.scrollTo({ left: 190 * eleindex - 20, behavior: 'smooth' })
-		this.galleryRef.current.scrollLeft = 190 * eleindex - 20
+	focus(eleindex) {
+		this.setState({focusing: eleindex})
+		this.galleryRef.current.scrollTo({left: 220 * eleindex, behavior: 'smooth'})
+		//this.galleryRef.current.scrollLeft = 220 * eleindex - 20
 	}
 
-	render () {
+	render() {
 		// dont support user sent button yet
 		let byType = sb.get(this.props.ev, 'by.type')
 		if (byType === 'user') return null
 
 		// filter out all generic
 		let attachments = sb.get(this.props.ev, 'data.message.attachments', [])
-		let generics = sb.filter(attachments, att => sb.get(att, 'type') === 'generic')
+		let generics = sb.filter(attachments, (att) => sb.get(att, 'type') === 'generic')
 
 		if (generics.length === 0) return null
 		var $generics = sb.map(generics, (gen, index) => {
-			var $eles = sb.map(gen.elements, ele => {
-				let $title = ele.title ? <div class="generic-attachment--element-title">{ele.title}</div> : null
-				let $subtitle = ele.subtitle ? <div class="generic-attachment--element-subtitle">{ele.subtitle}</div> : null
+			var $eles = sb.map(gen.elements, (ele) => {
+				let title = this.props.t.i18n(ele.i18n_title) || ele.title
+				let subtitle = this.props.t.i18n(ele.i18n_subtitle) || ele.subtitle
+				let $title = title ? <div class='generic-attachment--element-title'>{title}</div> : null
+				let $subtitle = subtitle ? <div class='generic-attachment--element-subtitle'>{subtitle}</div> : null
 
 				return (
-					<div class="generic-attachment--element swiper-slide">
+					<div class='generic-attachment--element swiper-slide'>
 						<div>
-							<img alt="generic attachment element" class="generic-attachment--element-img" src={this.props.store.replaceFileUrl(ele.image_url)} />
+							<img
+								alt='generic attachment element'
+								class='generic-attachment--element-img'
+								src={this.props.store.replaceFileUrl(ele.image_url)}
+							/>
 						</div>
 						{$title}
 						{$subtitle}
-						<Buttons buttons={ele.buttons} onSelect={button => this.props.onSelect(button)} />
+						<Buttons buttons={ele.buttons} onSelect={(button) => this.props.onSelect(button)} t={this.props.t} />
 					</div>
 				)
 			})
@@ -60,17 +66,17 @@ export default class GenericTemplateAttachments extends Com {
 			if (this.state.focusing === elements.length - 1) rightNavigatorCls += ' generic-attachment-navigator--disabled'
 
 			return (
-				<div class="generic-attachment-container">
-					<div class="generic-attachment" ref={this.galleryRef}>
+				<div class='generic-attachment-container'>
+					<div class='generic-attachment' ref={this.galleryRef}>
 						{$eles}
 					</div>
 					{!this.props.store.isMobile() && (
 						<Fragment>
-							<div class={leftNavigatorCls} onClick={_ => this.focus(this.state.focusing - 1)}>
-								<span class="generic-attachment-navigator-icon">&#8249;</span>
+							<div class={leftNavigatorCls} onClick={(_) => this.focus(this.state.focusing - 1)}>
+								<span class='generic-attachment-navigator-icon'>&#8249;</span>
 							</div>
-							<div class={rightNavigatorCls} onClick={_ => this.focus(this.state.focusing + 1)}>
-								<span class="generic-attachment-navigator-icon">&#8250;</span>
+							<div class={rightNavigatorCls} onClick={(_) => this.focus(this.state.focusing + 1)}>
+								<span class='generic-attachment-navigator-icon'>&#8250;</span>
 							</div>
 						</Fragment>
 					)}
@@ -81,9 +87,9 @@ export default class GenericTemplateAttachments extends Com {
 		return $generics
 	}
 
-	bindDrag () {
+	bindDrag() {
 		if (!this.props.store.isMobile()) return
 		let eles = document.getElementsByClassName('generic-attachment')
-		sb.map(eles, ele => Drag(ele, () => {}))
+		sb.map(eles, (ele) => Drag(ele, () => {}))
 	}
 }

package/src/chatbox/ProductAttachments.js

@@ -33,7 +33,7 @@ export default class ProductAttachments extends Com {
 					</a>,
 				)
 
-			console.log("P", product)
+			console.log('P', product)
 
 			if (sb.size(product.buttons) > 0) {
 				$detailbtns = $detailbtns.concat(
@@ -41,7 +41,7 @@ export default class ProductAttachments extends Com {
 						if (button.type === 'call_button') {
 							return (
 								<a class='product_attachment__btn' href={'tel:' + button.phone_number} key={index} title={button.title}>
-									{button.title}
+									{this.props.t.i18n(button.i18n_title) || button.title}
 								</a>
 							)
 						}
@@ -49,7 +49,7 @@ export default class ProductAttachments extends Com {
 						if (button.type === 'url_button') {
 							return (
 								<a class='product_attachment__btn' href={button.url} target='_blank' key={index} title={button.title}>
-									{button.title || this.props.t('detail')}{' '}
+									{this.props.t.i18n(button.i18n_title) || button.title || this.props.t('detail')}{' '}
 									<img
 										src={require('../../assets/img/external-link.svg')}
 										class='product_attachment__btn_external_link'
@@ -61,7 +61,7 @@ export default class ProductAttachments extends Com {
 						if (button.type === 'postback_button') {
 							return (
 								<a class='product_attachment__btn' href='javascript:;' onClick={(_) => this.props.onPostback(button)}>
-									{button.title}
+									{this.props.t.i18n(button.i18n_title) || button.title}
 								</a>
 							)
 						}

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