@subiz/widget-v4 4.1.27 → 4.1.28

package/index.html

@@ -13,6 +13,7 @@
 	</head>
 	<body>
 		<h1>Subiz widget testing</h1>
+		<button id="test1">Test 1</button>
 		<script>
 			function getUrlParameter(name) {
 				name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]')
@@ -38,6 +39,13 @@
 			if (accid == 'acpxkgumifuoofoosble') {
 				window.subiz('setViewingProduct', {id: '220170', sku: 'ipx', source_id: 'IPHONE10'})
 			}
+
+			setTimeout(function () {
+				const button = document.createElement('button')
+				button.innerText = 'test2'
+				button.id = 'test2'
+				document.body.appendChild(button)
+			}, 2000)
 		</script>
 	</body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.27",
+	"version": "4.1.28",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -12,30 +12,30 @@
 		"@subiz/ajax": "^3.0.12",
 		"@subiz/flow": "^1.0.9",
 		"@subiz/storage": "0.0.8",
-		"@subiz/wsclient": "^4.0.10",
+		"@subiz/wsclient": "^4.0.14",
 		"cookie_js": "1.4.2",
-		"core-js": "^3.29.0",
+		"core-js": "^3.30.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.13.0"
+		"marked": "^4.3.0",
+		"preact": "^10.13.2"
 	},
 	"devDependencies": {
 		"@babel/cli": "^7.21.0",
-		"@babel/core": "^7.21.0",
+		"@babel/core": "^7.21.4",
 		"@babel/plugin-proposal-class-properties": "^7.18.6",
 		"@babel/plugin-transform-react-jsx": "^7.21.0",
-		"@babel/preset-env": "^7.20.2",
+		"@babel/preset-env": "^7.21.4",
 		"babel-loader": "^9.1.2",
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.5.0",
-		"prettier": "^2.8.4",
+		"prettier": "^2.8.7",
 		"puppeteer": "^19.7.3",
-		"webpack": "^5.76.0",
+		"webpack": "^5.78.0",
 		"webpack-bundle-analyzer": "^4.8.0",
 		"webpack-cli": "^5.0.1",
-		"webpack-dev-server": "^4.11.1"
+		"webpack-dev-server": "^4.13.2"
 	}
 }

package/src/chatbox/Widget.js

@@ -25,6 +25,8 @@ export default class Widget extends Com {
 	constructor(props) {
 		super(props)
 		this.userSent = {}
+		// check user had input form
+		this.wasFormInputed = false
 		this.setState({
 			creating: false,
 			clickedJoin: false,
@@ -241,6 +243,7 @@ export default class Widget extends Com {
 	}
 
 	onBooleanChange(key, e) {
+		this.wasFormInputed = true
 		let formData = sb.cloneDeep(this.state.formData)
 		let field = sb.find(formData, (_, fkkey) => fkkey === key)
 		if (!field) return
@@ -250,6 +253,7 @@ export default class Widget extends Com {
 	}
 
 	onInputChange(key, val) {
+		this.wasFormInputed = true
 		let formData = sb.cloneDeep(this.state.formData)
 		let field = sb.find(formData, (_, fkkey) => fkkey === key)
 		if (!field) return
@@ -258,6 +262,7 @@ export default class Widget extends Com {
 	}
 
 	onListAddItem(key, val) {
+		this.wasFormInputed = true
 		let formData = sb.cloneDeep(this.state.formData)
 		let field = sb.find(formData, (_, fkkey) => fkkey === key)
 		if (!field) return
@@ -268,6 +273,7 @@ export default class Widget extends Com {
 	}
 
 	onListRemoveItem(key, index) {
+		this.wasFormInputed = true
 		let formData = sb.cloneDeep(this.state.formData)
 		let field = sb.find(formData, (_, fkkey) => fkkey === key)
 		if (!field) return
@@ -308,6 +314,7 @@ export default class Widget extends Com {
 	}
 
 	toggleCheckboxField(key, v) {
+		this.wasFormInputed = true
 		let formData = sb.cloneDeep(this.state.formData)
 		let field = sb.find(formData, (f, fkkey) => f.key === key)
 		if (!field) return
@@ -355,6 +362,7 @@ export default class Widget extends Com {
 	}
 
 	toggleRadioField(key, v) {
+		this.wasFormInputed = true
 		let formData = sb.cloneDeep(this.state.formData)
 		let field = sb.find(formData, (f, fkkey) => f.key === key)
 		if (!field) return
@@ -364,6 +372,7 @@ export default class Widget extends Com {
 	}
 
 	selectDropdownField(key, v) {
+		this.wasFormInputed = true
 		let formData = sb.cloneDeep(this.state.formData)
 		let field = sb.find(formData, (f, fkkey) => f.key === key)
 		if (!field) return
@@ -722,12 +731,17 @@ export default class Widget extends Com {
 		this.props.store.createPostback(this.props.cid, postback)
 	}
 
+	onChangeMessageInput() {
+		this.wasFormInputed = true
+	}
+
 	renderChat() {
 		let $input = (
 			<MessageInput
 				store={this.props.store}
 				ref={this.msgInput}
 				cid={this.props.cid}
+				onChange={this.onChangeMessageInput}
 				onSend={this.sendMessage}
 				t={this.props.t}
 			/>

package/src/chatbox/main.js

@@ -14,6 +14,7 @@ export default class Main extends Com {
 	constructor(props) {
 		super(props)
 		this.refButton = createRef()
+		this.refWidget = createRef()
 	}
 
 	async refreshCSS() {
@@ -49,7 +50,7 @@ export default class Main extends Com {
 
 		this.checkExpand()
 		this.props.store.onResetCSS(this, () => this.refreshCSS())
-		this.props.store.onConvoEvent(this, (_) => this.checkExpand())
+		this.props.store.onConvoEvent(this, (ev) => this.onConvoEvent(ev))
 		this.props.store.onUpdate(this, (_) => this.checkExpand())
 		await this.refreshCSS()
 		this.setState({cssready: true})
@@ -89,11 +90,33 @@ export default class Main extends Com {
 					onClose={(a) => this.onWidgetClose(a)}
 					onGo={(a) => this.showWidget(a)}
 					t={this.props.t}
+					ref={this.refWidget}
 				/>
 			</div>
 		)
 	}
 
+	onConvoEvent(ev) {
+		this.checkExpand()
+		this.checkShowBotConvo(ev)
+	}
+
+	checkShowBotConvo(ev) {
+		let $widget = this.refWidget.current
+		if (!$widget) return
+		if ($widget.wasFormInputed) return
+		if (ev.type !== 'message_sent') return
+		if (!this.state.isShowWidget) return
+
+		let byType = sb.get(ev, 'by.type')
+		let byid = sb.get(ev, 'by.id') || ''
+		if (!byid.startsWith('bb') || byType !== 'agent') return
+
+		let cid = sb.get(ev, 'data.message.conversation_id')
+		if (!cid) return
+		this.showWidget({cid, view: 'chat'})
+	}
+
 	checkExpand() {
 		// run on desktop environment only
 		if (this.props.store.isMobile()) return

package/src/util/campaign.js

@@ -35,14 +35,15 @@ export function trackAreaClicked(selector, cb) {
 	common.map(selector.split('\n'), (selector) => {
 		selector = common.trim(selector)
 		if (!selector) return
-		let doms = []
-		try {
-			doms = document.querySelectorAll(selector)
-		} catch (e) {}
-		common.map(doms, (dom) => {
-			if (!dom) return
-			dom.addEventListener('click', cb, false)
-		})
+		on('click', selector, cb)
+		//let doms = []
+		//try {
+		//doms = document.querySelectorAll(selector)
+		//} catch (e) {}
+		//common.map(doms, (dom) => {
+		//if (!dom) return
+		//dom.addEventListener('click', cb, false)
+		//})
 	})
 }
 
@@ -99,3 +100,23 @@ export function trackTimeOnPage(seconds = 0, cb) {
 		common.clearInterval(timer)
 	}, 1000)
 }
+
+function on(eventName, selector, fn) {
+	document.addEventListener(eventName, function (event) {
+		let possibleTargets = document.querySelectorAll(selector)
+		let target = event.target
+
+		for (let i = 0, l = possibleTargets.length; i < l; i++) {
+			let el = target
+			let p = possibleTargets[i]
+
+			while (el && el !== document) {
+				if (el === p) {
+					return fn.call(p, event)
+				}
+
+				el = el.parentNode
+			}
+		}
+	})
+}