@subiz/widget-v4 4.1.61 → 4.1.63

package/malicious-app.js

@@ -8,12 +8,8 @@ tag.defer = true
 tag.src = 'https://public-gcs.subiz-cdn.com/widget-v4/public/' + hash + '.app.js'
 document.body.appendChild(tag)
 
-if (document.readyState === "interactive" || document.readyState === "complete") document.body.appendChild(tag)
-else document.addEventListener("DOMContentLoaded", function(event) {
+if (document.readyState === 'interactive' || document.readyState === 'complete') document.body.appendChild(tag)
+else
+	document.addEventListener('DOMContentLoaded', function (event) {
 		document.body.appendChild(tag)
-}) //
-
-// record which domain still use old code
-var xhttp = new XMLHttpRequest()
-xhttp.open('GET', 'https://api.sbz.vn/4.0/old', true)
-xhttp.send()
+	}) //

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.61",
+	"version": "4.1.63",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -14,12 +14,12 @@
 		"@subiz/storage": "0.0.8",
 		"@subiz/wsclient": "^4.0.21",
 		"cookie_js": "1.4.2",
-		"core-js": "^3.35.1",
+		"core-js": "^3.36.0",
 		"css-loader": "5.2.7",
 		"file-loader": "^6.2.0",
 		"less": "^4.2.0",
 		"less-loader": "^12.2.0",
-		"preact": "^10.19.3"
+		"preact": "10.19.3"
 	},
 	"devDependencies": {
 		"@babel/cli": "^7.23.9",
@@ -30,10 +30,10 @@
 		"babel-loader": "^9.1.3",
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.6.0",
-		"puppeteer": "^22.0.0",
-		"webpack": "^5.90.1",
+		"puppeteer": "^22.2.0",
+		"webpack": "^5.90.3",
 		"webpack-bundle-analyzer": "^4.10.1",
 		"webpack-cli": "^5.1.4",
-		"webpack-dev-server": "^4.15.1"
+		"webpack-dev-server": "^5.0.2"
 	}
 }

package/src/chatbox/Widget.js

@@ -43,12 +43,14 @@ export default class Widget extends Com {
 	msgInput = createRef()
 	componentDidMount() {
 		if (!this.props.store.isMobile()) this.focusInput()
+		this.updateFormDataFields()
 	}
 
 	componentDidUpdate(prevProp) {
 		if (prevProp.isShow !== this.props.isShow) {
 			if (this.props.isShow && !this.props.store.isMobile()) this.focusInput()
 			if (this.props.isShow && this.props.store.isMobile()) this.blur()
+			this.updateFormDataFields()
 		}
 
 		if (prevProp.cid !== this.props.cid) {
@@ -62,9 +64,9 @@ export default class Widget extends Com {
 				this.events && this.events.focus()
 				if (!this.props.store.isMobile()) this.focusInput()
 			}, 100)
+			this.updateFormDataFields()
 		}
-
-		this.updateFormDataFields()
+		// this.updateFormDataFields()
 	}
 
 	shouldShowForm() {
@@ -85,6 +87,7 @@ export default class Widget extends Com {
 
 	render() {
 		let showform = this.shouldShowForm()
+		let formName = ''
 
 		let form
 		// choose form to display
@@ -97,11 +100,13 @@ export default class Widget extends Com {
 		if (this.isOffline(acc, accountSetting) && offlineEnabled) {
 			form = accountSetting.offline_form
 			submitLabel = this.props.t('offline_form_btn')
+			formName = 'offline'
 		}
 
 		if (this.props.view === 'offline_form') {
 			showform = true
 			form = accountSetting.offline_form
+			formName = 'offline'
 			submitLabel = this.props.t('offline_form_btn')
 		}
 
@@ -109,11 +114,12 @@ export default class Widget extends Com {
 			showform = true
 			form = accountSetting.prechat_form
 			submitLabel = this.props.t('prechat_form_btn')
+			formName = 'prechat'
 		}
 
 		let $body = null
 		if (this.props.view === 'list') $body = this.renderConvoList()
-		else if (showform) $body = this.renderForm(form, submitLabel)
+		else if (showform) $body = this.renderForm(form, submitLabel, formName)
 		else $body = this.renderChat()
 
 		let position = sb.get(accountSetting, 'desktop_button.position') || 'right'
@@ -138,7 +144,8 @@ export default class Widget extends Com {
 		)
 	}
 
-	async submitPrechatForm(form) {
+	async submitPrechatForm(form, fornName) {
+		if (this.state.submiting) return
 		// check error first
 		var hasError = false
 		sb.map(this.state.formData, (field, key) => {
@@ -183,8 +190,22 @@ export default class Widget extends Com {
 		let firstmsg = sb.get(data, 'question.value')
 		let groupid = sb.get(data, 'group.value', '')
 
+		// creating convo
+		this._creating = (this._creating || 0) + 1
+		let _creating = this._creating
+		this.setState({creating: true})
+		let out = await this.props.store.submitForm(
+			'chatbox_' + fornName,
+			sb.map(data, (field, key) => {
+				return {key: key, type: field.type, value: field.value + ''}
+			}),
+			user,
+		)
+
+		if (_creating != this._creating) return // outdated
+		return
 		if (this.props.cid) {
-			this.props.store.setUser(user)
+			// this.props.store.setUser(user)
 			this.setState({clickedJoin: false})
 			// form will auto disappear after rerender
 			await this.props.store.sendConvoEvent(this.props.cid, 'message_sent', {
@@ -195,36 +216,39 @@ export default class Widget extends Com {
 					attachments: this.state.quickReplyMessage.attachments,
 				},
 			})
-
+			if (_creating != this._creating) return // outdated
 			// reset quickReplyMessage
-			this.setState({quickReplyMessage: {}})
+			this.setState({creating: false, quickReplyMessage: {}})
 
 			// end_conversation_after_submit only for offline form or prechat form
 			if (form.end_conversation_after_submit) await this.props.store.endConvo(this.props.cid)
+			if (_creating != this._creating) return // outdated
 			return
 		}
 
-		// creating convo
-		this.setState({creating: true})
+		return
+
 		let message = {text: firstmsg, format: 'plaintext'}
 		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)
+		// await this.props.store.setUser(user)
 		const {error, convo} = await this.props.store.startConvo(req)
+		if (_creating != this._creating) return // outdated
 		if (error) {
 			this.setState({creating: false, creatingError: error})
 			return
 		}
 		let newconvoid = convo.id
 		this.userSent[newconvoid] = true
-		this.props.onGo({view: 'chat', cid: newconvoid})
-		this.props.store.sendConvoEvent(newconvoid, 'message_sent', {message})
+		await this.props.store.sendConvoEvent(newconvoid, 'message_sent', {message})
+		if (_creating != this._creating) return // outdated
 		this.setState({
 			creating: false,
 			clickedJoin: false,
 			quickReplyMessage: {},
 		})
+		this.props.onGo({view: 'chat', cid: newconvoid})
 		if (!this.props.store.isMobile()) this.focusInput()
 	}
 
@@ -240,7 +264,6 @@ export default class Widget extends Com {
 		}
 
 		this.setState({formData})
-
 		if (!this.props.store.isMobile()) this.focusInput()
 	}
 
@@ -401,7 +424,6 @@ export default class Widget extends Com {
 
 	renderFields() {
 		if (sb.size(this.state.formData) === 0) return null
-
 		let $fields = sb.map(this.state.formData, (field, key) => {
 			// not display question when click bot quick reply
 			if (this.state.quickReplyMessage.text && key === 'question') return null
@@ -437,6 +459,7 @@ export default class Widget extends Com {
 							}}
 							value={field.value || ''}
 							onInput={(e) => this.onInputChange(key, e.target.value)}
+							onChange={(e) => this.onInputChange(key, e.target.value)}
 							row='4'
 							class='form-control'
 						></textarea>
@@ -446,6 +469,7 @@ export default class Widget extends Com {
 						<input
 							value={field.value || ''}
 							onInput={(e) => this.onInputChange(key, e.target.value)}
+							onChange={(e) => this.onInputChange(key, e.target.value)}
 							ref={(ref) => {
 								this['form_' + encode(key)] = ref
 							}}
@@ -537,9 +561,8 @@ export default class Widget extends Com {
 				label = field.label || this.props.t('your_question')
 			}
 			if (field.label) label = field.label
-
 			return (
-				<div>
+				<div key={'form_' + encode(key)}>
 					<div class='label'>
 						{label}
 						{field.is_required ? <span class='ml-1 red'>*</span> : ''}
@@ -552,15 +575,7 @@ export default class Widget extends Com {
 		return <div class='pt-2'>{$fields}</div>
 	}
 
-	renderForm(form, submitLabel) {
-		let $loading = null
-		if (this.state.creating)
-			$loading = (
-				<span class='ml-2'>
-					<Spinner size='16' mode='white' />
-				</span>
-			)
-
+	renderForm(form, submitLabel, formName) {
 		let title = this.props.t.i18n(sb.get(form, `i18n_title`, {}))
 		if (!title) title = sb.get(form, 'title', this.props.t('capture_lead_title'))
 		// replace ↵ character
@@ -581,8 +596,12 @@ export default class Widget extends Com {
 				</div>
 
 				<div class='message-input message-input--preform'>
-					<button class='btn--start-convo' onClick={(_) => this.submitPrechatForm(form)}>
-						{submitLabel} {$loading}
+					<button
+						class='btn--start-convo'
+						onClick={(_) => this.submitPrechatForm(form, formName)}
+						disabled={this.state.creating}
+					>
+						{submitLabel}
 					</button>
 				</div>
 			</div>
@@ -710,23 +729,28 @@ export default class Widget extends Com {
 
 		let text = message.text
 		if (!this.props.cid) {
-			this.creating = true
+			this._creating = (this._creating || 0) + 1
+			let _creating = this._creating
+			this.setState({creating: true})
 			const {convo, error} = await this.props.store.startConvo({
 				locale: this.props.t.locale(),
 				message: text,
 				initial_by: this.props.store.matchUser().id,
 			})
+			if (_creating != this._creating) return // outdated
 			if (error) {
 				// show error and try again
 			}
-			this.creating = false
-			this.props.store.sendConvoEvent(convo.id, 'message_sent', {message})
+			await this.props.store.sendConvoEvent(convo.id, 'message_sent', {message})
+			if (_creating != this._creating) return // outdated
+			this.setState({creating: false})
 
 			this.props.onGo({view: 'chat', cid: convo.id})
-
 			return
 		}
-		this.props.store.sendConvoEvent(this.props.cid, 'message_sent', {message})
+		await this.props.store.sendConvoEvent(this.props.cid, 'message_sent', {message})
+		if (_creating != this._creating) return // outdated
+		this.setState({creating: false})
 	}
 
 	createPostback(postback) {

package/src/store/api.js

@@ -220,6 +220,23 @@ export default class {
 	getLocaleContent = (locale) => this.apireq.get(`/accounts/${this.accid}/locales/${locale}`)
 	sendEvent = (data) =>
 		this.apireq.addQuery('shorten', true).post(`/accounts/${this.accid}/users/${this.uid}/events`, data)
+
+	submitForm = (form_id, page_url, device, data, user) =>
+		this.apireq.post(`/accounts/${this.accid}/users/${this.uid}/events`, {
+			by: {id: this.uid, device: device},
+			type: 'form_submitted',
+			data: {
+				user: user,
+				form_submitted: {
+					user_id: this.uid,
+					form_id: form_id,
+					page_url: page_url,
+					submitted_at: sb.Date.now(),
+					values: data,
+				},
+			},
+		})
+
 	sendTyping = (cid) => this.apireq.post(`/accounts/${this.accid}/conversations/${cid}/typing`)
 
 	sendLostFocus = (device, productid, source_id, sku) =>

package/src/store/api_fake.js

@@ -63,6 +63,9 @@ export default class {
 		Promise.resolve({body: makeFakeConvo(this.accid, 'csqwudlkftltnbebvq', this.uid, this.agentid), code: 200})
 	getLocaleContent = (locale) => this.apireq.get(`/accounts/${this.accid}/locales/${locale}`)
 	sendEvent = (data) => OK200
+
+	submitForm = (form_id, page_url, device, data, user) => OK200
+
 	sendTyping = (cid) => OK200
 
 	sendPresence = (data) => OK200

package/src/store/store.js

@@ -372,16 +372,16 @@ export default class Store {
 				return
 			}
 
-				if (this._track_page_view) {
-						this.api.sendContentView(
-								this.device,
-								location.href,
-								document.title,
-								this._currentViewingProduct.id,
-								this._currentViewingProduct.source_id,
-								this._currentViewingProduct.sku,
-						)
-				}
+			if (this._track_page_view) {
+				this.api.sendContentView(
+					this.device,
+					location.href,
+					document.title,
+					this._currentViewingProduct.id,
+					this._currentViewingProduct.source_id,
+					this._currentViewingProduct.sku,
+				)
+			}
 		},
 		1000, // dont send presence update too tight
 		{leading: false}, // dont send right after load. should send after content_view
@@ -572,6 +572,12 @@ export default class Store {
 		return this.reconnectGate.open()
 	}
 
+	async submitForm(formid, data, user) {
+		await this.readyGate.entry()
+		if (user) await this.setUser(user)
+		return this.api.submitForm(formid, document.URL, this.device, data, user)
+	}
+
 	// set user info, keeping old user id and account id
 	async setUser(user) {
 		if (!user) return
@@ -814,7 +820,6 @@ export default class Store {
 			}
 
 			convo.last_message_sent = ev
-			// this.handleFormSubmit(convoKey, ev)
 		}
 
 		// dont store pong and typing
@@ -825,45 +830,6 @@ export default class Store {
 		this.pubsub.publish('account')
 	}
 
-	handleFormSubmit(convoKey, ev) {
-		// find form submit
-		if (ev.type !== 'message_sent') return
-		// has form submit
-		let formSubmits = []
-		let attachments = sb.get(ev, 'data.message.attachments') || []
-		sb.each(attachments, (att) => {
-			if (!att) return
-			if (att.type !== 'form_submit') return
-			formSubmits.push(att.form_submit)
-		})
-
-		sb.each(formSubmits, (submit) => {
-			let formev = sb.get(this.convoEventM, convoKey + '.' + submit.form_message_id)
-			if (!formev) return
-
-			// find form attachment
-			let forms = sb.filter(sb.get(formev, 'data.message.attachments'), (att) => {
-				if (!att) return false
-				if (att.type !== 'form' && att.type !== 'ask_info_form') return false
-				return true
-			})
-
-			sb.each(forms, (form) => {
-				form = form.form
-				sb.each(form.fields, (formfield) => {
-					sb.each(submit.fields, (submitfield) => {
-						if (formfield.name !== submitfield.name) return
-						if (formfield.default_answer) return
-
-						formfield.default_answer = submitfield.value
-					})
-				})
-			})
-
-			if (sb.size(forms) > 0) this.pubsub.publish('state.convoEventM', this.convoEventM, convoKey)
-		})
-	}
-
 	typing(cid) {
 		if (!cid) return
 		this._typing(cid)