@subiz/widget-v4 4.1.210 → 4.1.212

package/src/chatbox/Widget.js

@@ -8,6 +8,7 @@ var checkedimg = require('../../assets/img/done_gray.svg')
 var empty = require('../../assets/img/empty.svg')
 import MessageInput from './MessageInput.js'
 import Events from './Events.js'
+import {widgetGreeting} from './greeting.js'
 // import Typing from './Typing.js'
 import Rating from './Rating.js'
 import ConnectionStatus from './ConnectionStatus.js'
@@ -28,7 +29,6 @@ export default class Widget extends Com {
 		super(props)
 		this.userSent = {}
 
-		this.debugAgentSentEvIds = {}
 		// check user had input form
 		this.wasFormInputed = false
 		this.setState({
@@ -50,56 +50,6 @@ export default class Widget extends Com {
 		if (!this.props.store.isMobile()) this.focusInput()
 
 		this.updateFormDataFields()
-		this.debugRTAgentMessageSent()
-	}
-
-	findMissingRTMessage = async (started) => {
-		let messageSentDict = this.props.store.listAgentRealtimeMessageSent()
-
-		let res1 = await this.props.store.sbzListConversations()
-		let conversions = sb.get(res1, 'body.conversations') || []
-		let cids = sb.map(conversions, (convo) => convo.id)
-
-		let promises = sb.map(cids, (cid) => this.props.store.sbzListMessages(cid))
-		let msgReses = await Promise.all(promises)
-		sb.map(msgReses, (msgRes) => {
-			let messages = sb.get(msgRes, 'body') || []
-			sb.map(messages, (ev) => {
-				if (ev.created < started) return
-				//if (ev.created > Date.now() - 30_000) return
-				if (ev.type !== 'message_sent') return
-				if (sb.get(ev, 'by.type') === 'user') return
-
-				console.log('check ev pass condition', ev)
-				if (!messageSentDict[ev.id] && !this.debugAgentSentEvIds[ev.id]) {
-					let accid = sb.get(this.props.store.matchAccount(), 'id')
-					this.props.store.sendBugReport(
-						`[WIDGET ${accid}] Missing agent message sent evid ${ev.id}, cid ${sb.convoOfEv(ev)}, ev_created ${ev.created}, FE timestamp ${Date.now()}, Init Debug timestamp ${started}`,
-					)
-					this.debugAgentSentEvIds[ev.id] = true
-				}
-			})
-		})
-	}
-
-	debugRTAgentMessageSent = async () => {
-		try {
-			let debugAccountIds = this.props.store.matchDebugAccountIds()
-			let accid = sb.get(this.props.store.matchAccount(), 'id')
-			if (!debugAccountIds.includes(accid)) return
-
-			console.log('START check RT agent message with BE source')
-			let started = Date.now()
-			this.findMissingRTMessage(started)
-
-			for (let i = 0; i < 100_000; i++) {
-				await sb.sleep(120_000)
-				console.log('LOOP check RT agent message with BE source', i)
-				this.findMissingRTMessage(started)
-			}
-		} catch (err) {
-			this.props.store.sendBugReport(`debugRTAgentMessageSent ERROR ${err.stack}`)
-		}
 	}
 
 	applyMessage(text) {
@@ -115,7 +65,7 @@ export default class Widget extends Com {
 
 		if (prevProp.cid !== this.props.cid) {
 			this.closeOrder()
-			this.setState({clickedJoin: false, quickReplyMessage: {}})
+			this.setState({clickedJoin: false, restartForm: false, quickReplyMessage: {}})
 			sb.setTimeout(() => {
 				// focus Events then focus MessageInput
 				// if there is any pending form, MessageInput will be disabled
@@ -128,23 +78,16 @@ export default class Widget extends Com {
 		// this.updateFormDataFields()
 	}
 
+	componentWillUnmount() {
+		this.cancelContainerFocus()
+	}
+
 	ShowTyping() {
 		this.$events && this.$events.ShowTyping()
 	}
 
 	shouldShowForm() {
-		// always show form when ask agentgroup
-		let form
-		let accountSetting = this.props.plugin.chatbox || {}
-		let acc = this.props.store.matchAccount() || {}
-		if (sb.get(accountSetting, 'prechat_form.enabled')) form = accountSetting.prechat_form
-
-		let offlineEnabled = sb.get(accountSetting, 'offline_form.enabled')
-		if (this.isOffline(acc, accountSetting) && offlineEnabled) form = accountSetting.offline_form
-
-		if (!this.hasSentMessage(this.props.cid) && form && (sb.size(form.groups) || form.group_required)) return true
-		let formRequired = this.isFormRequired() // nhap thieu truong require
-		return (formRequired && !this.props.cid) || (formRequired && this.props.cid && this.state.clickedJoin)
+		return !!(this.state.restartForm || this.state.clickedJoin)
 	}
 
 	render() {
@@ -226,38 +169,18 @@ export default class Widget extends Com {
 
 			if (
 				field.is_required &&
-				(field.value === undefined || field.value === '' || (sb.size(field.value) === 0 && Array.isArray(field.value)))
+				(field.value == null || (typeof field.value === 'string' && !field.value.trim()) || (sb.size(field.value) === 0 && Array.isArray(field.value)))
 			) {
 				field.is_empty_error = true
 				field.error = this.props.t('error_empty')
 			} else field.error = ''
 
-			if (key.substr(5) === 'emails') {
-				if (field.is_required) {
-					if (!sb.isEmail(field.value)) {
-						field.error = this.props.t('error_email_invalid') // 'The email is not valid'
-					}
-				} else {
-					let value = field.value || ''
-					if (typeof value !== 'string') value = value + '' // try to makesure use ''.trim doesnt errror
-					if (value.trim() && !sb.isEmail(field.value)) {
-						field.error = this.props.t('error_email_invalid') // 'The email is not valid'
-					}
-				}
+			if (key === 'attr:emails' && !field.error && String(field.value ?? '').trim() && !sb.isEmail(field.value)) {
+				field.error = this.props.t('error_email_invalid')
 			}
 
-			if (key.substr(5) === 'phones') {
-				if (field.is_required) {
-					if (!sb.isPhone(field.value)) {
-						field.error = this.props.t('error_phone_invalid') // 'The email is not valid'
-					}
-				} else {
-					let value = field.value || ''
-					if (typeof value !== 'string') value = value + '' // try to makesure use ''.trim doesnt errror
-					if (value.trim() && !sb.isPhone(field.value)) {
-						field.error = this.props.t('error_phone_invalid') // 'The email is not valid'
-					}
-				}
+			if (key === 'attr:phones' && !field.error && String(field.value ?? '').trim() && !sb.isPhone(field.value)) {
+				field.error = this.props.t('error_phone_invalid')
 			}
 			newformdata[key] = field
 		})
@@ -265,7 +188,7 @@ export default class Widget extends Com {
 	}
 
 	async submitPrechatForm(form, formName) {
-		if (this.state.submiting) return
+		if (this.state.submiting || this.state.creating) return
 		// check error first
 		let newData = this.validateForm(this.state.formData)
 		let hasError = sb.find(newData, (field) => !!field.error)
@@ -282,6 +205,8 @@ export default class Widget extends Com {
 		let is_lead = false
 		sb.map(data, (field, key) => {
 			if (!key.startsWith('attr:')) return
+			if (key === 'attr:phones') field.value = String(field.value ?? '').trim().replace(/[(). \-]/g, '')
+			if (key === 'attr:emails') field.value = String(field.value ?? '').trim()
 			var attr = {key: key.substr(5)}
 			is_lead = is_lead || key == 'emails' || key == 'phones'
 			if (field.type === 'number') attr.number = parseInt(field.value)
@@ -293,7 +218,8 @@ export default class Widget extends Com {
 
 		if (is_lead) sb.setUserAttr(user, {key: 'lead_source', text: 'widget'})
 
-		let firstmsg = sb.get(data, 'question.value', this.props.t('get_started'))
+		const question = String(sb.get(data, 'question.value', '') ?? '').trim()
+		const firstmsg = question || (/^vi(?:[-_]|$)/i.test(navigator.language || '') ? 'Xin chào' : 'Hello')
 		let groupid = sb.get(data, 'group.value', '')
 
 		// creating convo
@@ -309,15 +235,15 @@ export default class Widget extends Com {
 
 		if (_creating != this._creating) return // outdated
 		if (this.props.cid && this.props.cid.startsWith('cslight')) {
-			this.sendMessage({
+			await this.sendMessage({
 				text: firstmsg,
 				format: 'plaintext',
 				fields: [{key: 'to_agent_group', value: sb.stringify(groupid)}],
 				attachments: this.state.quickReplyMessage.attachments,
-			})
+			}, {formSubmitted: true, groupId: groupid})
 			return
 		}
-		if (this.props.cid) {
+		if (this.props.cid && sb.get(this.props.store.matchConvo(this.props.cid), 'state') !== 'ended') {
 			// this.props.store.setUser(user)
 			this.setState({clickedJoin: false})
 			// form will auto disappear after rerender
@@ -339,7 +265,7 @@ export default class Widget extends Com {
 			return
 		}
 
-		let message = {text: firstmsg, format: 'plaintext'}
+		let message = {text: firstmsg, format: 'plaintext', attachments: this.state.quickReplyMessage.attachments}
 		let req = {group_id: groupid, message: firstmsg, locale: this.props.t.locale(), initial_by: user.id}
 
 		this.setState({creatingError: null})
@@ -355,9 +281,12 @@ export default class Widget extends Com {
 		this.userSent[newconvoid] = true
 		await this.props.store.sendConvoEvent(newconvoid, 'message_sent', {message})
 		if (_creating != this._creating) return // outdated
+		if (form.end_conversation_after_submit) await this.props.store.endConvo(newconvoid)
+		if (_creating != this._creating) return
 		this.setState({
 			creating: false,
 			clickedJoin: false,
+			restartForm: false,
 			quickReplyMessage: {},
 		})
 		this.props.onGo({view: 'chat', cid: newconvoid})
@@ -370,7 +299,7 @@ export default class Widget extends Com {
 		if (form.question_required || this.state.quickReplyMessage.text) {
 			formData['question'] = {
 				key: 'question',
-				is_required: true,
+				is_required: false,
 				label: this.props.t.i18n(sb.get(form, `i18n_question_label`, {})) || form.question_label,
 				type: 'text',
 				value: this.state.quickReplyMessage.text,
@@ -404,6 +333,7 @@ export default class Widget extends Com {
 		if (!field) return
 		field.value = val
 		field.error = undefined
+		field.is_empty_error = false
 		this.setState({formData})
 	}
 
@@ -546,8 +476,8 @@ export default class Widget extends Com {
 	renderFields(form, formName) {
 		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
+			// Bot quick replies already display their selected answer.
+			if (key === 'question' && sb.find(this.state.quickReplyMessage.attachments, att => att.type === 'postback')) return null
 
 			let $field = null
 			var errclass = field.error ? 'input--error' : ''
@@ -584,7 +514,11 @@ export default class Widget extends Com {
 								this['form_' + encode(key)] = ref
 							}}
 							class={`form-control ${errclass}`}
-							type='text'
+							type={key === 'attr:phones' ? 'tel' : key === 'attr:emails' ? 'email' : 'text'}
+							inputMode={key === 'attr:phones' ? 'tel' : key === 'attr:emails' ? 'email' : undefined}
+							autoComplete={key === 'attr:phones' ? 'tel' : key === 'attr:emails' ? 'email' : undefined}
+							aria-invalid={field.error ? 'true' : undefined}
+							aria-describedby={field.error ? 'form-error_' + encode(key) : undefined}
 						/>
 					)
 				}
@@ -680,7 +614,7 @@ export default class Widget extends Com {
 						{field.is_required ? <span class='red'>*</span> : ''}
 					</label>
 					{$field}
-					{field.error ? <div class='form-control--valid-input--error'>{field.error}</div> : ''}
+					{field.error ? <div id={'form-error_' + encode(key)} role='alert' class='form-control--valid-input--error'>{field.error}</div> : ''}
 				</div>
 			)
 		})
@@ -693,9 +627,10 @@ export default class Widget extends Com {
 		// replace ↵ character
 		title = title.replace('↵', '')
 		let btncls = 'btn--start-convo '
-		let hasError = sb.find(this.state.formData, (field) => !!field.error)
 		let newData = this.validateForm(this.state.formData)
 		let hasEmptyError = sb.find(newData, (field) => !!field.is_empty_error)
+		const phone = String(sb.get(this.state.formData, 'attr:phones.value', '') ?? '').trim()
+		const phoneTooShort = phone.length > 0 && phone.length < 5
 		let bodycls = 'widget-body'
 		if (this.props.store.isEmbededChatMode()) bodycls += ' embed-chat'
 		return (
@@ -714,7 +649,7 @@ export default class Widget extends Com {
 					<button
 						class={btncls}
 						onClick={(_) => this.submitPrechatForm(form, formName)}
-						disabled={!!hasEmptyError || !!hasError || this.state.creating}
+						disabled={!!hasEmptyError || phoneTooShort || this.state.creating}
 					>
 						{submitLabel}
 					</button>
@@ -724,7 +659,19 @@ export default class Widget extends Com {
 	}
 
 	goToConvo(cid) {
-		this.props.onGo({view: 'chat', cid})
+		let view = 'chat'
+		if (!cid) {
+			const greeting = widgetGreeting(this.props.plugin.chatbox, this.props.t)
+			cid = this.props.store.startWidgetConvo(greeting, this.props.t.locale()).convo.id
+			const form = this.startingConversationForm()
+			const setting = this.props.plugin.chatbox || {}
+			const offline = sb.get(setting, 'offline_form.enabled') && this.isOffline(this.props.store.matchAccount() || {}, setting)
+			if (form && (offline || this.isFormRequired(cid) || sb.size(form.groups) || form.group_required)) {
+				view = offline ? 'offline_form' : 'prechat_form'
+				this.setState({clickedJoin: false, restartForm: false, quickReplyMessage: {}})
+			}
+		}
+		this.props.onGo({view, cid})
 	}
 
 	renderConvoList() {
@@ -794,7 +741,7 @@ export default class Widget extends Com {
 		sb.setTimeout(() => $input && $input.blur(), 300) // force lose focus
 	}
 
-	focusInput(text) {
+	focusInput(text, repeat = true) {
 		if (this.props.store.isPreview) return
 		if (this.shouldShowForm()) {
 			// focus on the element
@@ -821,6 +768,7 @@ export default class Widget extends Com {
 		if (text != undefined && typeof text === 'string') {
 			$input.applyMessage(text)
 		}
+		if (!repeat) return $input.focus()
 		sb.setTimeout(() => $input.focus())
 		sb.setTimeout(() => $input.focus(), 300) // force focus
 	}
@@ -837,16 +785,72 @@ export default class Widget extends Com {
 		this.setState({formData, quickReplyMessage: message})
 	}
 
-	sendMessage = async (message) => {
-		// hot fix click quick reply with prechat with display prechat form
-		let hasPostback = sb.find(message.attachments, (att) => att.type === 'postback')
-		if (this.isFormRequired() && hasPostback) {
-			this.onStartConvoClick()
-			this.fillQuickReplyToQuestion(message)
+	sendMessage = async (message, {formSubmitted = false, groupId} = {}) => {
+		if (this._sendingNewConversation) return false
+		if (sb.get(this.props.store.matchConvo(this.props.cid), 'state') === 'ended') {
+			const form = this.startingConversationForm()
+			if (form && (sb.size(form.groups) || form.group_required || this.isFormRequired(''))) {
+				this.setState({restartForm: true, quickReplyMessage: message})
+				return
+			}
+			this._sendingNewConversation = true
+			this.setState({creating: true, creatingError: null})
+			try {
+				const {convo, error} = await this.props.store.startConvo({
+					locale: this.props.t.locale(),
+					message: message.text,
+					initial_by: this.props.store.matchUser().id,
+				})
+				if (error) {
+					this.setState({creatingError: error})
+					return false
+				}
+				await this.props.store.sendConvoEvent(convo.id, 'message_sent', {message})
+				this.props.onGo({view: 'chat', cid: convo.id})
+			} finally {
+				this._sendingNewConversation = false
+				this.setState({creating: false})
+			}
+			return
+		}
+		const form = this.startingConversationForm()
+		const needsGroup = form && !this.hasSentMessage(this.props.cid) && (sb.size(form.groups) || form.group_required)
+		if (!formSubmitted && (this.isFormRequired() || needsGroup)) {
+			this.setState({clickedJoin: true, quickReplyMessage: message})
 			return
 		}
 
 		let text = message.text
+		const localConvo = this.props.store.matchConvo(this.props.cid)
+		if (localConvo && localConvo.light_type === 'widget') {
+			this._sendingNewConversation = true
+			this.setState({creating: true, creatingError: null})
+			try {
+				const {convo, error} = await this.props.store.startConvo({
+					locale: localConvo.locale, message: text, group_id: groupId,
+					initial_by: this.props.store.matchUser().id,
+					greeting_message: localConvo.events[0],
+				})
+				if (error || !convo) {
+					this.setState({creatingError: error || 'start_failed'})
+					return false
+				}
+				this.props.store.promoteWidgetConvo(localConvo.id, convo.id)
+				const sending = this.props.store.sendConvoEvent(convo.id, 'message_sent', {message})
+				this.props.onGo({view: 'chat', cid: convo.id})
+				await sending
+				this.userSent[convo.id] = true
+				if (formSubmitted && form && form.end_conversation_after_submit) await this.props.store.endConvo(convo.id)
+				this.setState({clickedJoin: false, restartForm: false, quickReplyMessage: {}})
+			} catch (error) {
+				this.setState({creatingError: error})
+				return false
+			} finally {
+				this._sendingNewConversation = false
+				this.setState({creating: false})
+			}
+			return
+		}
 
 		if (this.props.cid && this.props.cid.startsWith('cslight')) {
 			let cid = this.props.cid
@@ -896,9 +900,10 @@ export default class Widget extends Com {
 				return
 				// show error and try again
 			}
-			await this.props.store.sendConvoEvent(convo.id, 'message_sent', {message})
-			if (_creating != this._creating) return // outdated
+			const sending = this.props.store.sendConvoEvent(convo.id, 'message_sent', {message})
 			this.props.onGo({view: 'chat', cid: convo.id})
+			await sending
+			if (_creating != this._creating) return // outdated
 			this.setState({creating: false})
 			return
 		}
@@ -929,21 +934,11 @@ export default class Widget extends Com {
 				t={this.props.t}
 			/>
 		)
-		let convo = this.props.store.matchConvo(this.props.cid) || {}
-		if (this.isFormRequired() || convo.state === 'ended') {
-			$input = (
-				<div class='message-input message-input--preform'>
-					<button class='btn--start-convo' onClick={(e) => this.onStartConvoClick(e)}>
-						{this.props.t('offline_preform_btn')}
-					</button>
-				</div>
-			)
-		}
 		let bodycls = 'widget-body'
 		if (this.props.store.isEmbededChatMode()) bodycls += ' embed-chat'
 		return (
 			<div class={bodycls}>
-				<div class='widget-body--content' onClick={(e) => this.onContainerClick(e)}>
+				<div class='widget-body--content' onPointerDown={() => this.cancelContainerFocus()} onClick={(e) => this.onContainerClick(e)}>
 					<Events
 						isShow={this.props.isShow}
 						onLink={this.onLink}
@@ -952,7 +947,7 @@ export default class Widget extends Com {
 						onFormSubmit={(e) => this.onEventFormSubmit(e)}
 						ref={(ref) => (this.$events = ref)}
 						cid={this.props.cid}
-						creating={this.creating}
+						creating={this.state.creating}
 						onSend={(e) => this.sendMessage(e)}
 						onPostback={(e) => this.createPostback(e)}
 						t={this.props.t}
@@ -1004,48 +999,53 @@ export default class Widget extends Com {
 		this.focusInput()
 	}
 
-	// end or visit unsent convo which require form
-	async onStartConvoClick() {
-		var convo = this.props.store.matchConvo(this.props.cid) || {}
-		if (convo.state === 'ended') return this.props.onGo({view: 'chat', cid: ''})
-		this.setState({clickedJoin: true, quickReplyMessage: {}})
-	}
-
 	onEventFormSubmit() {
 		this.focusInput()
 	}
 
-	onContainerClick() {
-		// ignore select behaviour
-		var selection = window.getSelection()
-		if (selection.toString().length > 0) return
-		// focus text input on desktop
-		if (!this.props.store.isMobile()) this.focusInput()
+	cancelContainerFocus() {
+		if (this.containerFocusTimer) sb.clearTimeout(this.containerFocusTimer)
+		this.containerFocusTimer = null
+	}
+
+	onContainerClick(event) {
+		this.cancelContainerFocus()
+		const target = event && event.target
+		const element = target && (target.nodeType === 1 ? target : target.parentElement)
+		if (element && element.closest('a, button, input, textarea, select, [contenteditable]')) return
+		if (event && event.detail > 1) return
+		if (this.props.store.isMobile() || window.getSelection()?.toString()) return
+		const cid = this.props.cid
+		// Give a second click or a drag time to select text before moving focus.
+		this.containerFocusTimer = sb.setTimeout(() => {
+			this.containerFocusTimer = null
+			if (!this._isMounted || this.props.cid !== cid || this.props.isShow === false || window.getSelection()?.toString()) return
+			this.focusInput(undefined, false)
+		}, 300)
+	}
+
+	startingConversationForm() {
+		const setting = this.props.plugin.chatbox || {}
+		const account = this.props.store.matchAccount() || {}
+		if (this.isOffline(account, setting) && sb.get(setting, 'offline_form.enabled')) return setting.offline_form
+		if (sb.get(setting, 'prechat_form.enabled')) return setting.prechat_form
 	}
 
-	isFormRequired() {
+	isFormRequired(cid = this.props.cid) {
 		// neu isRequiredForm = true nhung form = null => show button khi click vao thi show form
 
 		// isRequiredForm tra ve true neu (nguoi dung chua tung tra loi)
 		//   + hoi thoai da dc phan phoi nhung chua nhap du cac truong (nho exclude group, bo qua ca truong message)
 		//   + hoi thoai moi hoac chua duoc phan phoi va chua nhap du cac truong (dac biet la group). Neu k co group, ma cac truong da dc nhap du, ko quan tam toi da nhap msg hay chua, isrequiredform = false
 
-		let form
-		// choose form to display
-		let accountSetting = this.props.plugin.chatbox || {}
-		let acc = this.props.store.matchAccount() || {}
-		if (sb.get(accountSetting, 'prechat_form.enabled')) form = accountSetting.prechat_form
-
-		//auto detect form
-		let offlineEnabled = sb.get(accountSetting, 'offline_form.enabled')
-		if (this.isOffline(acc, accountSetting) && offlineEnabled) form = accountSetting.offline_form
+		let form = this.startingConversationForm()
 
 		if (!form) return false
 
 		let formData = this.fillForm(form)
 
 		// dont care about group if the conversation is assigned
-		let convo = this.props.store.matchConvo(this.props.cid) || {}
+		let convo = this.props.store.matchConvo(cid) || {}
 
 		if (convo.state === 'ended') return true
 		// allow button "Tiep tuc chat" display when sent quick_replies msg
@@ -1057,7 +1057,7 @@ export default class Widget extends Com {
 		sb.each(formData, (field) => {
 			if (field.value) isAllFiledEmpty = false
 		})
-		if (isAllFiledEmpty && !this.userHasSent(this.props.cid)) return true
+		if (isAllFiledEmpty && !this.userHasSent(cid)) return true
 
 		return !!sb.find(formData, (field) => field.is_required && (field.value == null || field.value === ''))
 	}
@@ -1226,7 +1226,7 @@ export default class Widget extends Com {
 			// add question field
 			data['question'] = {
 				key: 'question',
-				is_required: true,
+				is_required: false,
 				label: this.props.t.i18n(sb.get(form, `i18n_question_label`, {})) || form.question_label,
 				type: 'text',
 			}