@subiz/widget-v4 4.0.63 → 4.0.67

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.0.63",
+	"version": "4.0.67",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -14,27 +14,27 @@
 		"@subiz/storage": "0.0.8",
 		"@subiz/wsclient": "^3.1.7",
 		"cookie_js": "1.4.2",
-		"core-js": "^3.20.3",
-		"css-loader": "^6.5.1",
+		"core-js": "^3.21.1",
+		"css-loader": "5.2.7",
 		"file-loader": "^6.2.0",
 		"less": "^4.1.2",
 		"less-loader": "^10.2.0",
-		"marked": "^4.0.10",
-		"preact": "^10.6.4"
+		"marked": "^4.0.12",
+		"preact": "^10.7.0"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.16.8",
-		"@babel/core": "^7.16.7",
+		"@babel/core": "^7.17.8",
 		"@babel/plugin-proposal-class-properties": "^7.16.7",
-		"@babel/plugin-transform-react-jsx": "^7.16.7",
-		"@babel/preset-env": "^7.16.8",
-		"babel-loader": "^8.2.3",
+		"@babel/plugin-transform-react-jsx": "^7.17.3",
+		"@babel/preset-env": "^7.16.11",
+		"@babel/cli": "^7.17.5",
+		"babel-loader": "^8.2.4",
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.5.0",
-		"puppeteer": "^13.0.1",
-		"webpack": "^5.66.0",
+		"puppeteer": "^13.5.2",
+		"webpack": "^5.70.0",
 		"webpack-bundle-analyzer": "^4.5.0",
-		"webpack-cli": "^4.9.1",
-		"webpack-dev-server": "^4.7.3"
+		"webpack-cli": "^4.9.2",
+		"webpack-dev-server": "^4.7.4"
 	}
 }

package/src/bot.js

@@ -1,4 +1,5 @@
 import sb from './util/index.js'
+import * as common from './common.js'
 
 export default function(store) {
 	let botM = store.matchBot()
@@ -12,7 +13,7 @@ export default function(store) {
 
 			let {error} = await store.startConvo({
 				initial_by: bot.id,
-				locale: sb.detectLang(),
+				locale: common.getLocale(bot, sb.detectLang()),
 				state: 'active',
 				members: [{type: 'bot', id: bot.id}],
 			})

package/src/chatbox/Buttons.js

@@ -1,18 +1,18 @@
 import sb from '../util/index.js'
-import { Com } from '../common.js'
-import { h } from 'preact'
+import {Com} from '../common.js'
+import {h} from 'preact'
 
 export default class Buttons extends Com {
-	constructor (props) {
+	constructor(props) {
 		super(props)
 	}
 
-	render () {
+	render() {
 		if (sb.size(this.props.buttons) === 0) return null
 		var $buttons = sb.map(this.props.buttons, (button, index) => {
 			if (button.type === 'call_button') {
 				return (
-					<a class="url-button-attachment" href={'tel:' + button.phone_number} key={index} title={button.title}>
+					<a class='url-button-attachment' href={'tel:' + button.phone_number} key={index} title={button.title}>
 						{button.title}
 					</a>
 				)
@@ -20,7 +20,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}>
+					<a class='url-button-attachment' href={button.url} target='_blank' key={index} title={button.title}>
 						{button.title || button.url}
 					</a>
 				)
@@ -28,7 +28,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)}>
+					<a class='url-button-attachment' href='javascript:;' onClick={(_) => this.props.onSelect(button)}>
 						{button.title}
 					</a>
 				)
@@ -39,6 +39,6 @@ export default class Buttons extends Com {
 			return null
 		})
 
-		return <div class="button-attachments">{$buttons}</div>
+		return <div class='button-attachments'>{$buttons}</div>
 	}
 }

package/src/chatbox/ChatButton.js

@@ -122,11 +122,11 @@ export default class ChatButton extends Com {
 		if (new sb.Date().getTime() - this.props.store.matchClosePreviewAt() < Ms30Mins) return
 
 		let greeting = sb.get(accountSetting, 'greeting', {})
-		if (!greeting.message || !greeting.enabled) {
+		let text = this.props.t.i18n(sb.get(greeting, 'greeting', {})) || greeting.message
+		if (!text || !greeting.enabled) {
 			this.setState({previewEvent: {}})
 			return
 		}
-
 		this.ShowGreeting()
 	}
 

package/src/chatbox/Event.js

@@ -140,7 +140,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} />
+					<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)} />
 				</div>

package/src/chatbox/ProductAttachments.js

@@ -22,17 +22,53 @@ export default class ProductAttachments extends Com {
 		let $products = sb.map(products, (att, index) => {
 			let product = att.product
 
-			let $detailbtn = null
+			let $detailbtns = []
 			let url = product.url || product.mobile_url
 			if (this.props.store.isMobile()) url = product.mobile_url || product.url
-			if (url)
-				$detailbtn = (
+			if (url && sb.size(product.buttons) == 0)
+				$detailbtns.push(
 					<a class='product_attachment__btn' href={url} target='_blank'>
 						{this.props.t('detail')}
 						<img src={require('../../assets/img/external-link.svg')} class='product_attachment__btn_external_link' />
-					</a>
+					</a>,
 				)
 
+			console.log("P", product)
+
+			if (sb.size(product.buttons) > 0) {
+				$detailbtns = $detailbtns.concat(
+					sb.map(product.buttons, (button, index) => {
+						if (button.type === 'call_button') {
+							return (
+								<a class='product_attachment__btn' href={'tel:' + button.phone_number} key={index} title={button.title}>
+									{button.title}
+								</a>
+							)
+						}
+
+						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')}{' '}
+									<img
+										src={require('../../assets/img/external-link.svg')}
+										class='product_attachment__btn_external_link'
+									/>
+								</a>
+							)
+						}
+
+						if (button.type === 'postback_button') {
+							return (
+								<a class='product_attachment__btn' href='javascript:;' onClick={(_) => this.props.onPostback(button)}>
+									{button.title}
+								</a>
+							)
+						}
+					}),
+				)
+			}
+
 			let $title = (
 				<a href={url} class='product_attachment__title' target='_blank'>
 					{product.name}
@@ -60,7 +96,7 @@ export default class ProductAttachments extends Com {
 					{$title}
 					{$subtitle}
 					{$price}
-					<div class='product_attachment__btns'>{$detailbtn}</div>
+					<div class='product_attachment__btns'>{$detailbtns}</div>
 				</div>
 			)
 		})

package/src/chatbox/Typing.js

@@ -30,6 +30,10 @@ export default class Typing extends Com {
 				return
 			}
 
+			// dont show typing of agent, some agent dont like this
+			let ag = this.props.store.matchAgent(ev.by.id)
+			if (ag.type == 'agent') return
+
 			if (sb.get(ev, 'type') !== 'conversation_typing') return
 			this.setState({ ev: ev, isShow: true })
 			if (this.timer) clearTimeout(this.timer)
@@ -38,7 +42,7 @@ export default class Typing extends Com {
 
 				this.timer = null
 				this.setState({ isShow: false })
-			}, 10000)
+			}, 5000)
 		})
 	}
 

package/src/chatbox/main.js

@@ -160,12 +160,15 @@ export default class Main extends Com {
 }
 
 function restoreViewport() {
-	// remove our viewport
+	// restore scroll attribute for background document
+	if (document.body && document.body.classList) document.body.classList.remove('sbz_no_scroll')
 	let metatag = document.getElementById('subiz-meta-viewport')
 	if (metatag) metatag.remove()
 }
 
 function modifyViewport() {
+	// dont allow to scroll background document
+	if (document.body && document.body.classList) document.body.classList.add('sbz_no_scroll')
 	let metatag = document.createElement('meta')
 	metatag.httpEquiv = 'X-UA-Compatible'
 	metatag.name = 'viewport'

package/src/store/store.js

@@ -166,7 +166,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
@@ -816,6 +816,14 @@ export default class Store {
 		}
 		this.onWs(ret)
 		sendEventToThirdParty('SUBIZ Chat', 'Sent', 'User')
+		// send special event if user sent the first msg
+		let lastMsgSent = this.kv.match('last_msg_sent')
+		if (!lastMsgSent) {
+			let dataLayer = window.dataLayer || []
+			dataLayer.push({event: 'SUBIZ Chat', event_action: 'Sent', event_label: 'User', first_interaction: 1})
+		}
+
+		this.kv.put('last_msg_sent', sb.Date.now())
 	}
 
 	onConvoEvent = (o, cb) => this.pubsub.on2(o, 'events', cb)
@@ -863,7 +871,9 @@ export default class Store {
 	setIsOpen = (isopen) => {
 		let lastisopen = this.kv.match('isopen')
 		this.kv.put('isopen', isopen)
-		if (!lastisopen && isopen) sendEventToThirdParty('SUBIZ Chat', 'Opened', 'Subiz Windows')
+		if (!lastisopen && isopen) {
+			sendEventToThirdParty('SUBIZ Chat', 'Opened', 'Subiz Windows')
+		}
 	}
 	closePreview = () => this.kv.put('close_preview_at', new sb.Date().getTime())
 	setLastview = (view, opts) => this.kv.put('lastview', {view, opts})
@@ -961,7 +971,7 @@ export default class Store {
 		let startms = sb.Date.now()
 
 		// store not init
-		if (!sb.get(this.kv.match('user'), 'id')) return setTimeout(() => this.loopTime(), 30000)
+		if (!sb.get(this.kv.match('user'), 'id')) return setTimeout(() => this.loopTime(), 120000)
 
 		let {body: t, error} = await this.api.time()
 		if (error) return setTimeout(() => this.loopTime(), 30000)
@@ -969,7 +979,7 @@ export default class Store {
 		var serverMs = new sb.Date(t).getTime() + latences
 		var localMs = sb.Date.now()
 		this.timeDiff = Math.floor(serverMs - localMs)
-		setTimeout(() => this.loopTime(), 60000)
+		setTimeout(() => this.loopTime(), 120000)
 	}
 
 	replaceFileUrl(src) {
@@ -1084,7 +1094,7 @@ function getGaClientId() {
 	if (!hasGA()) return clientId
 
 	var allTrackers = window.ga.getAll() || []
-	allTrackers.forEach(function(tracker) {
+	allTrackers.forEach(function (tracker) {
 		clientId = tracker.get('clientId')
 	})
 
@@ -1101,7 +1111,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)
 	})
@@ -1119,7 +1129,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)
 	})
@@ -1129,10 +1139,12 @@ function sendEventToThirdParty(category, action, label) {
 	document.dispatchEvent(new CustomEvent('subiz', {detail: {category, action, label}}))
 	sendToGA(category, action, label)
 	sendToFBPixel(category, action, label)
+	let dataLayer = window.dataLayer || []
+	dataLayer.push({event: category, event_action: action, event_label: 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,
@@ -1143,6 +1155,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/common.js

@@ -326,7 +326,7 @@ export function isURL(url) {
 }
 
 export function isNumber(num) {
-	var reg = /^\d+$/
+	var re = /^\d+$/
 	return re.test(String(num))
 }
 

package/up

@@ -38,6 +38,6 @@ sleep 5
 
 echo "Remove cloudfare cache"
 # PURGE CLOUD FLARE CACHE
-curl -X POST "https://api.cloudflare.com/client/v4/zones/cc22eff135a40705ebe59955b450217d/purge_cache" -H "X-Auth-Email: thanhpham@vietnambiz.com" -H "X-Auth-Key: $(cat ~/.cloudflare)" -H "Content-Type: application/javascript"
+curl -X POST "https://api.cloudflare.com/client/v4/zones/e8f5c860cbbc130dd389313324a6c35e/purge_cache" -H "X-Auth-Email: thanhpham@vietnambiz.com" -H "X-Auth-Key: $(cat ~/.cloudflare)"
 
 echo "Success. $(cat dist/HASH)"

package/dist/0b82fa7e5c3b07b40a44.png

@@ -1 +0,0 @@
-module.exports = __webpack_public_path__ + "assets/img/emoji/messenger/sub_58.824_78.431.f910f2a.png";

package/dist/0f4af006e38ee8b93633.png

@@ -1 +0,0 @@
-module.exports = __webpack_public_path__ + "assets/img/emoji/messenger/sub_60.784_29.412.e36d284.png";