@subiz/widget-v4 4.0.82 → 4.0.86

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.0.82",
+	"version": "4.0.86",
 	"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.8",
+		"core-js": "^3.23.5",
 		"css-loader": "5.2.7",
 		"file-loader": "^6.2.0",
-		"less": "^4.1.2",
+		"less": "^4.1.3",
 		"less-loader": "^11.0.0",
-		"marked": "^4.0.16",
-		"preact": "^10.7.3"
+		"marked": "^4.0.18",
+		"preact": "^10.10.0"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.17.10",
-		"@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.18.2",
+		"@babel/cli": "^7.18.9",
+		"@babel/core": "^7.18.9",
+		"@babel/plugin-proposal-class-properties": "^7.18.6",
+		"@babel/plugin-transform-react-jsx": "^7.18.6",
+		"@babel/preset-env": "^7.18.9",
 		"babel-loader": "^8.2.5",
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.5.0",
-		"prettier": "^2.6.2",
-		"puppeteer": "^14.2.1",
+		"prettier": "^2.7.1",
+		"puppeteer": "^15.4.0",
 		"webpack": "^5.73.0",
 		"webpack-bundle-analyzer": "^4.5.0",
-		"webpack-cli": "^4.9.2",
-		"webpack-dev-server": "^4.9.1"
+		"webpack-cli": "^4.10.0",
+		"webpack-dev-server": "^4.9.3"
 	}
 }

package/src/chatbox/ChatButton.js

@@ -206,13 +206,13 @@ export default class ChatButton extends Com {
 	}
 
 	onProfileReady() {
-		if (this.state.buttonLoaded) this.setState({opacity: 1})
-		this.setState({profileLoaded: true})
+		if (this._buttonLoaded) this.setState({opacity: 1})
+		this._profileLoaded = true
 	}
 
 	onButtonReady() {
-		if (this.state.profileLoaded) this.setState({opacity: 1})
-		this.setState({buttonLoaded: true})
+		if (this._profileLoaded) this.setState({opacity: 1})
+		this._buttonLoaded = true
 	}
 
 	renderButton() {

package/src/chatbox/TextMessage.js

@@ -71,11 +71,13 @@ export default class TextMessage extends Com {
 		let isMarkdown = sb.find(
 			deltas,
 			(delta) =>
-				sb.get(delta, 'attributes.bold') || sb.get(delta, 'attributes.italic') || sb.get(delta, 'attributes.underline'),
+				sb.get(delta, 'attributes.bold') ||
+				sb.get(delta, 'attributes.italic') ||
+				sb.get(delta, 'attributes.underline') ||
+				sb.get(delta, 'insert.emoji'),
 		)
 		if (isMarkdown) {
 			var text = deltaToMarkdown(deltas)
-			console.log('text', text)
 			return this.renderMarkdown(text)
 		}
 		return this.renderPlainText()

package/src/chatbox/Typing.js

@@ -1,24 +1,23 @@
 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 Typing extends Com {
-	constructor (props) {
+	constructor(props) {
 		super(props)
 	}
 
-	componentDidMount () {
+	componentDidMount() {
 		this.setState({
 			isShow: false,
 			ev: {},
 		})
 
-		this.props.store.onConvoEvent(this, ev => {
+		this.props.store.onConvoEvent(this, (ev) => {
 			if (sb.convoOfEv(ev) !== this.props.cid) return
 			let user = this.props.store.matchUser()
 			if (sb.get(ev, 'by.id') === user.id) return
 
-
 			let oldby = sb.get(this.state.ev, 'by.id')
 			if (oldby && sb.get(ev, 'by.id') !== oldby) return
 
@@ -26,27 +25,27 @@ export default class Typing extends Com {
 				// stop the typing
 				if (this.timer) clearTimeout(this.timer)
 				this.timer = null
-				this.setState({ isShow: false })
+				this.setState({isShow: false})
 				return
 			}
 
 			// dont show typing of agent, some agent dont like this
-			let ag = this.props.store.matchAgent(ev.by.id)
+			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 })
+			this.setState({ev: ev, isShow: true})
 			if (this.timer) clearTimeout(this.timer)
 			this.timer = setTimeout(() => {
 				if (sb.convoOfEv(ev) !== this.props.cid) return
 
 				this.timer = null
-				this.setState({ isShow: false })
+				this.setState({isShow: false})
 			}, 5000)
 		})
 	}
 
-	render () {
+	render() {
 		let account = this.props.store.matchAccount()
 		var cls = this.state.isShow ? '' : 'typing--hidden'
 		let byid = sb.get(this.state.ev, 'by.display_id', sb.get(this.state.ev, 'by.id'))

package/src/chatbox/Widget.js

@@ -148,9 +148,11 @@ export default class Widget extends Com {
 		let data = sb.cloneDeep(this.state.formData)
 		// update user info based on form data
 		let user = sb.cloneDeep(this.props.store.matchUser())
+		let is_lead = false
 		sb.map(data, (field, key) => {
 			if (!key.startsWith('attr:')) return
 			var attr = {key: key.substr(5)}
+			is_lead = is_lead || key == 'emails' || key == 'phones'
 			if (field.type === 'number') attr.number = parseInt(field.value)
 			if (field.type === 'datetime') attr.datetime = new sb.Date(field.value).toISOString()
 			if (field.type === 'list') attr.list = field.value
@@ -158,6 +160,8 @@ export default class Widget extends Com {
 			sb.setUserAttr(user, attr)
 		})
 
+		if (is_lead) sb.setUserAttr(user, {key: 'lead_source', text: 'widget'})
+
 		let firstmsg = sb.get(data, 'question.value')
 		let groupid = sb.get(data, 'group.value', '')
 
@@ -184,8 +188,8 @@ export default class Widget extends Com {
 		let req = {group_id: groupid, message: firstmsg, locale: this.props.t.locale(), initial_by: user.id}
 
 		this.setState({creatingError: null})
+		await this.props.store.setUser(user)
 		const {error, convo} = await this.props.store.startConvo(req)
-		this.props.store.setUser(user)
 		if (error) {
 			this.setState({creating: false, creatingError: error})
 			return
@@ -269,7 +273,8 @@ export default class Widget extends Com {
 							value={field.value || ''}
 							onInput={(e) => this.onInputChange(key, e.target.value)}
 							row='4'
-							class='form-control'></textarea>
+							class='form-control'
+						></textarea>
 					)
 				} else {
 					$field = (

package/src/popup/popup.js

@@ -156,7 +156,8 @@ export default class Popup extends Com {
 					height='24'
 					viewBox='0 0 24 24'
 					stroke-linecap='round'
-					stroke-linejoin='round'>
+					stroke-linejoin='round'
+				>
 					<line x1='17' y1='7' x2='7' y2='17' style='stroke-width: 3 !important;'></line>
 					<line x1='7' y1='7' x2='17' y2='17' style='stroke-width: 3 !important;'></line>
 				</svg>
@@ -213,6 +214,7 @@ export default class Popup extends Com {
 			var summitFields = []
 
 			let user = sb.cloneDeep(this.props.store.matchUser())
+			let is_lead = false
 			for (var pair of formData.entries()) {
 				let page = sb.get(this.props.plugin.popup, `pages.${this.getPageIndex()}`)
 				let form = sb.find(page.components, (com) => com.type === 'form')
@@ -226,10 +228,12 @@ export default class Popup extends Com {
 				let key = pair[0]
 				if (key === 'email') key = 'emails'
 				if (key === 'phone') key = 'phones'
-
+				is_lead = is_lead || key == 'emails' || key == 'phones'
 				sb.setUserAttr(user, {key: key, text: pair[1]})
 			}
+			if (is_lead) sb.setUserAttr(user, {key: 'lead_source', text: 'plugin.' + this.props.plugin.id})
 			this.props.store.sendConversion(this.props.plugin.id, summitFields, this.impressionToken)
+
 			this.props.store.setUser(user)
 		}
 
@@ -277,7 +281,8 @@ export default class Popup extends Com {
 				<div
 					class={'btn btn__primary '}
 					style={this.js2css(primarystyle)}
-					onClick={(e) => this.onButtonClick(e, 'primary')}>
+					onClick={(e) => this.onButtonClick(e, 'primary')}
+				>
 					{this.props.t.i18n(com.buttons.i18n_primary_text) || com.buttons.primary_text}
 				</div>
 			)
@@ -290,7 +295,8 @@ export default class Popup extends Com {
 				<div
 					class={'btn btn__secondary'}
 					style={this.js2css(style)}
-					onClick={(e) => this.onButtonClick(e, 'secondary')}>
+					onClick={(e) => this.onButtonClick(e, 'secondary')}
+				>
 					{this.props.t.i18n(com.buttons.i18n_secondary_text) || com.buttons.secondary_text}
 				</div>
 			)
@@ -303,7 +309,8 @@ export default class Popup extends Com {
 					display: 'flex',
 					flex_direction: buttonsstyle.flex_direction,
 					align_items: buttonsstyle.align_items,
-				})}>
+				})}
+			>
 				{$primary}
 				<div style={this.js2css({width: '10px', height: '1px'})} />
 				{$secondary}
@@ -503,7 +510,8 @@ export default class Popup extends Com {
 						color: popup.text_color,
 						font_family: popup.font_family,
 						font_size: popup.font_size || '14px',
-					})}>
+					})}
+				>
 					{this.props.t.i18n(field.i18n_label) || field.label}
 				</div>
 			)
@@ -517,7 +525,8 @@ export default class Popup extends Com {
 				$error = (
 					<div
 						class='text__danger '
-						style={this.js2css({margin_top: '5px', font_family: popup.font_family, font_size: popup.font_size})}>
+						style={this.js2css({margin_top: '5px', font_family: popup.font_family, font_size: popup.font_size})}
+					>
 						{this.props.t('invalid_field')}
 					</div>
 				)
@@ -527,7 +536,8 @@ export default class Popup extends Com {
 				$error = (
 					<div
 						class='text__danger '
-						style={this.js2css({margin_top: '5px', font_family: popup.font_family, font_size: popup.font_size})}>
+						style={this.js2css({margin_top: '5px', font_family: popup.font_family, font_size: popup.font_size})}
+					>
 						{this.props.t('required')}
 					</div>
 				)
@@ -547,7 +557,8 @@ export default class Popup extends Com {
 				style={this.js2css(com.style)}
 				class='form popup_component'
 				ref={this._formRef}
-				onClick={(e) => e.stopPropagation()}>
+				onClick={(e) => e.stopPropagation()}
+			>
 				{$fields}
 			</form>
 		)
@@ -600,7 +611,8 @@ export default class Popup extends Com {
 					<span
 						style={this.js2css(
 							Object.assign({white_space: 'nowrap', overflow: 'hidden', text_overflow: 'ellipsis'}, textstyle),
-						)}>
+						)}
+					>
 						{this.props.t('follow_us_on_facebook')}
 					</span>
 				</div>
@@ -919,7 +931,7 @@ export default class Popup extends Com {
 			if (com.type === 'image') return this.renderImageComponent(com, i)
 		})
 
-    // fix bug image only popup has white block
+		// fix bug image only popup has white block
 		let formComponents = sb.filter(page.components, (com) => com.type !== 'image')
 		if (!formComponents.length) {
 			formcss.background = 'transparent'

package/src/store/store.js

@@ -1161,16 +1161,15 @@ function sendToFBPixel(category, action, label) {
 }
 
 function sendToGA(category, action, label) {
-	console.log('SENT.', category, action, label)
+	// console.log('SENT.', category, action, label)
+	if (window.gtag) window.gtag('event', category, {Action: action, Label: label})
 	if (window.ga && window.ga.getAll) {
+		// only send gtag when ga is not available
 		const allTrackers = window.ga.getAll() || []
 		allTrackers.forEach(function (tracker) {
 			const name = tracker.get('name')
 			window.ga(name + '.send', 'event', category, action, label)
 		})
-	} else {
-		// only send gtag when ga is not available
-		if (window.gtag) window.gtag('event', category, {Action: action, Label: label})
 	}
 }
 

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";