@subiz/widget-v4 4.1.125 → 4.1.129

package/form.html

@@ -0,0 +1,10 @@
+<html>
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	</head>
+	<body style="margin: 0;">
+		<div
+      id="form"
+			></div>
+	</body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.125",
+	"version": "4.1.129",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -11,7 +11,7 @@
 	"dependencies": {
 		"@subiz/ajax": "^3.0.19",
 		"@subiz/flow": "^1.1.0",
-		"@subiz/wsclient": "^4.0.28",
+		"@subiz/wsclient": "^4.0.31",
 		"cookie_js": "1.4.2",
 		"core-js": "^3.41.0",
 		"css-loader": "5.2.7",
@@ -29,8 +29,9 @@
 		"babel-loader": "^10.0.0",
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.6.3",
-		"puppeteer": "^24.6.1",
-		"webpack": "^5.99.6",
+		"prettier": "^3.5.3",
+		"puppeteer": "^24.7.2",
+		"webpack": "^5.99.7",
 		"webpack-bundle-analyzer": "^4.10.2",
 		"webpack-cli": "^6.0.1",
 		"webpack-dev-server": "^5.2.1"

package/src/chatbox/ChatButton.js

@@ -31,14 +31,16 @@ export default class ChatButton extends Com {
 					isquickreplies = true
 				}
 			})
-			if (isquickreplies) return
+			let format = sb.get(ev, 'data.message.format')
+			let block = sb.get(ev, 'data.message.block')
+			if (block || format == 'block') {
+				if (sb.isBlockEmpty(block) && isquickreplies) return
+			} else {
+				let message = sb.get(ev, 'data.message.text') || ''
+				if (!message && isquickreplies) return
+			}
 
-			// only set preview have content ev
-			var tags = sb.filter(
-				sb.map(this.renderMessagePreview(ev), (tag) => sb.trim(tag)),
-				(a) => a,
-			)
-			if (sb.size(tags) > 0) this.setState({displayPreview: true, previewEvent: ev})
+			this.setState({displayPreview: true, previewEvent: ev})
 		})
 	}
 
@@ -386,9 +388,20 @@ export default class ChatButton extends Com {
 
 	renderMessagePreview(ev, defmsg) {
 		defmsg = defmsg || this.props.t('sent_you_a_message')
-		var format = sb.get(ev, 'data.message.format')
+		let format = sb.get(ev, 'data.message.format')
 		let block = sb.get(ev, 'data.message.block')
-		if (block || format == 'block') return <Block block={block} />
+		if (block || format == 'block') {
+			if (sb.isBlockEmpty(block)) {
+				let attachments = sb.get(ev, 'data.message.attachments')
+				if (sb.size(attachments) > 0) {
+					return (
+						<div>{`${this.props.t('send')} ${sb.size(attachments)} ${sb.size(attachments) > 1 ? this.props.t('attachments') : this.props.t('attachment')}`}</div>
+					)
+				}
+				return defmsg
+			}
+			return <Block block={block} />
+		}
 
 		let message = sb.get(ev, 'data.message.text', defmsg)
 		if (!message && sb.size(sb.get(ev, 'data.message.attachments')) > 0) message = defmsg

package/src/chatbox/ConnectionStatus.js

@@ -0,0 +1,42 @@
+import sb from '../util/index.js'
+import {Com} from '../common.js'
+import {h, createRef} from 'preact'
+
+export default class ConnectionStatus extends Com {
+	constructor(props) {
+		super(props)
+		this.props.store.onConnection(this, this.onChangeConnectionStatus)
+		this.state = {status: this.props.store.getConnectionStatus()}
+	}
+
+	onChangeConnectionStatus = () => {
+		let newstatus = this.props.store.getConnectionStatus()
+		let currentstatus = this.state.status
+		this.setState({status: newstatus})
+		if (currentstatus !== 'active' && newstatus === 'active') this.changeStatusFailedToSuccess()
+	}
+
+	changeStatusFailedToSuccess = () => {
+		this.setState({status: 'just_active'})
+		if (this.props.cid) this.props.store.fetchMoreEvents(this.props.cid)
+		if (this._timeout) clearTimeout(this._timeout)
+		this._timeout = setTimeout(() => {
+			this.setState({status: 'active'})
+		}, 2000)
+	}
+
+	render() {
+		if (this.state.status === 'active') return
+
+		let cls = 'widget-internet-status'
+		let text = ''
+		if (this.state.status !== 'just_active') {
+			cls += ' negative'
+			text = `${this.props.t('network_error')}. ${this.props.t('try_reconnecting')}...`
+		} else {
+			cls += ' positive'
+			text = this.props.t('reconnect_successfully')
+		}
+		return <div class={cls}>{text}</div>
+	}
+}

package/src/chatbox/Event.js

@@ -3,7 +3,7 @@ import AudioAttachments from './AudioAttachments.js'
 import FileAttachments from './FileAttachments.js'
 import ButtonAttachments from './ButtonAttachments.js'
 import QuickReplies from './QuickReplies.js'
-import FormAttachments from './FormAttachments.js'
+import FormAttachment from './FormAttachment2.js'
 import FormSubmitAttachments from './FormSubmitAttachments.js'
 import GenericTemplateAttachments from './GenericTemplateAttachments.js'
 import ProductAttachments from './ProductAttachments.js'
@@ -232,6 +232,9 @@ export default class Event extends Com {
 
 	renderMessageSent() {
 		let ev = this.props.event.ev
+    let attachments = sb.get(ev, 'data.message.attachments')
+    let hasForm = sb.find(attachments, att => att.type === 'form')
+    if (ev.id === 'evshpgaeetsplfqprzmynrvrl') hasForm = true
 		this.tryLoadOrder(ev)
 		let t = new sb.Date(ev.created).toLocaleString()
 		// message of agent
@@ -240,10 +243,13 @@ export default class Event extends Com {
 			if (this.props.event.mode === 'lead') $sender = this.renderAgentAvatar(ev)
 			let innercls = 'agent-convo-event-inner'
 			if (this.props.isLast) innercls += ' last'
+
+      let wrappercls = 'agent-convo-event-wrapper'
+      if (hasForm) wrappercls += ' full'
 			return (
 				<div class='convo-event agent-message'>
 					{$sender}
-					<div class='agent-convo-event-wrapper'>
+					<div class={wrappercls}>
 						<div class={innercls}>
 							<TextMessage
 								showTime={this.props.event.show_time}
@@ -257,13 +263,7 @@ export default class Event extends Com {
 							<VideoAttachments store={this.props.store} ev={ev} />
 							<FileAttachments store={this.props.store} ev={ev} />
 							<ButtonAttachments store={this.props.store} ev={ev} t={this.props.t} />
-							<FormAttachments
-								store={this.props.store}
-								onSubmit={this.props.onFormSubmit}
-								ref={this.refForm}
-								ev={ev}
-								t={this.props.t}
-							/>
+							<FormAttachment store={this.props.store} ev={ev} t={this.props.t} />
 							<FormSubmitAttachments store={this.props.store} ev={ev} t={this.props.t} />
 							<GenericTemplateAttachments
 								store={this.props.store}
@@ -326,7 +326,7 @@ export default class Event extends Com {
 					<VideoAttachments store={this.props.store} ev={ev} />
 					<FileAttachments store={this.props.store} ev={ev} />
 					<ButtonAttachments store={this.props.store} ev={ev} t={this.props.t} />
-					<FormAttachments store={this.props.store} onSubmit={this.props.onFormSubmit} ref={this.refForm} ev={ev} />
+					<FormAttachment store={this.props.store} t={this.props.t} ev={ev} />
 					<ProductAttachments t={this.props.t} store={this.props.store} ev={ev} />
 					<FormSubmitAttachments store={this.props.store} ev={ev} />
 				</div>

package/src/chatbox/FormAttachment2.js

@@ -0,0 +1,58 @@
+import sb from '../util/index.js'
+
+import {Com} from '../common.js'
+import {h, createRef} from 'preact'
+import Form from '../form/Form.js'
+
+//  ['form', 'ev'],
+export default class FormAttachment extends Com {
+	constructor(props) {
+		super(props)
+		this.state = {
+			submission: {},
+			submiting: false,
+			errorMessage: '',
+			isSubmited: false,
+		}
+	}
+
+	onChangeFormValues = (values) => {
+		this.setState({submission: {values}})
+	}
+
+	onSubmit = async () => {
+		this.setState({errorMessage: ''})
+		if (this.state.submiting) return
+		this.setState({submiting: true})
+		let res = await this.props.store.submitForm2(this.props.token, this.state.submission)
+		if (res.error) {
+			this.setState({submiting: false, errorMessage: sb.get(res, 'error.code')})
+			return
+		}
+		this.setState({submiting: false, isSubmited: true})
+	}
+
+	render() {
+		let attachments = sb.get(this.props.ev, 'data.message.attachments') || []
+		let formAttachment = sb.find(attachments, (att) => att.type === 'form')
+		if (!formAttachment) return
+		const {submission, errorMessage, isSubmited, submiting} = this.state
+		let formSetting = formAttachment.form || {}
+		return (
+			<div onClick={(e) => e.stopPropagation()}>
+				<Form
+					store={this.props.store}
+					formSetting={formSetting}
+					mode='attachment'
+					t={this.props.t}
+					submission={submission}
+					errorMessage={errorMessage}
+					isSubmited={isSubmited}
+					submiting={submiting}
+					onChangeFormValues={this.onChangeFormValues}
+					onSubmit={this.onSubmit}
+				/>
+			</div>
+		)
+	}
+}

package/src/chatbox/Header.js

@@ -9,6 +9,20 @@ export default class Header extends Com {
 		super(props)
 	}
 
+	renderAccountAvatar() {
+		let acc = this.props.store.matchAccount() || {}
+		if (!acc.logo_url) return null
+		return (
+			<img
+				width={38}
+				height={38}
+				alt={acc.name}
+				class='avatar avatar__account'
+				src={this.props.store.replaceFileUrl(acc.logo_url) || require('../../assets/img/image_default.png')}
+			/>
+		)
+	}
+
 	render() {
 		let headerMode = 'collapsed'
 
@@ -55,6 +69,7 @@ export default class Header extends Com {
 		return (
 			<div class={cls} style={style}>
 				{$back}
+				{this.renderAccountAvatar()}
 				<div class='widget-header--title-container'>
 					<div class='widget-header--title'>{this.getTitle()}</div>
 					<div class='widget-header--description' title={desc}>

package/src/chatbox/Widget.js

@@ -10,6 +10,7 @@ import MessageInput from './MessageInput.js'
 import Events from './Events.js'
 // import Typing from './Typing.js'
 import Rating from './Rating.js'
+import ConnectionStatus from './ConnectionStatus.js'
 // import Order from './Order.js'
 let Order = false
 const LoadOrder = () => import(/*webpackChunkName: "Order" */ './Order.js')
@@ -848,6 +849,7 @@ export default class Widget extends Com {
 						t={this.props.t}
 						plugin={this.props.plugin}
 					/>
+					<ConnectionStatus cid={this.props.cid} store={this.props.store} t={this.props.t} />
 				</div>
 				<Rating
 					forceView={this.props.view}

package/src/form/Form.js

@@ -0,0 +1,293 @@
+import {Com} from '../common.js'
+import {h, createRef} from 'preact'
+import sb from '../util/index.js'
+import Block from '../chatbox/block.js'
+
+export default class Form2 extends Com {
+	state = {
+		errorFields: {},
+		submiting: false,
+	}
+
+	constructor(props) {
+		super(props)
+
+		let components = sb.get(this.props.formSetting, 'components') || []
+		sb.each(components, (com) => {
+			if (com.type === 'input' && com.input_type !== 'checkbox' && com.input_type !== 'radio') {
+				this[`${com.key}_input`] = createRef()
+			}
+		})
+	}
+
+	renderFormComponent = (com, idx) => {
+		if (com.type === 'input') return this.renderField(com, idx)
+		if (com.type === 'button') return this.renderSubmitButton(com, idx)
+		if (this.props.isSubmited) return
+		return (
+			<div class='form-component form-component-block'>
+				<Block block={com} />
+			</div>
+		)
+	}
+
+	renderSubmitButton = (com, idx) => {
+		if (this.props.isSubmited) return
+		return (
+			<div class='form-component form-component-submit-button'>
+				<div class='form-control--valid-input--error'>{this.props.errorMessage}</div>
+				<div>
+					<button class='btn--start-convo' disabled={this.props.submiting}>
+						{com.label}
+					</button>
+				</div>
+			</div>
+		)
+	}
+
+	renderField = (com, idx) => {
+		let errorMsg = this.state.errorFields[com.key]
+		if (this.props.isSubmited) {
+			let val = sb.find(this.props.submission.values, (f) => f.key === com.key) || {}
+			val = val.value || '""'
+			val = sb.parseJSON(val)
+			if (Array.isArray(val)) val = val.join(', ')
+
+			return (
+				<div class='form-component submitted' key={com.key}>
+					<label class='label'>{com.label}</label>
+					<div>{val || <span class='text-muted text-italic'>{this.props.t('no_info_input')}</span>}</div>
+				</div>
+			)
+		}
+		return (
+			<div class='form-component' key={com.key}>
+				<label class='label'>
+					{com.label} {com.is_required && <span class='red'>*</span>}
+				</label>
+				{com.input_type === 'text' && this.renderFieldTextInput(com, idx)}
+				{com.input_type === 'multiple' && this.renderFieldTextareaInput(com, idx)}
+				{com.input_type === 'date' && this.renderFieldDateInput(com, idx)}
+				{com.input_type === 'radio' && this.renderFieldRadioInput(com, idx)}
+				{com.input_type === 'checkbox' && this.renderFieldCheckboxInput(com, idx)}
+				{com.input_type === 'dropdown' && this.renderFieldDropdownInput(com, idx)}
+				{errorMsg && <div class='form-control--valid-input--error'>{errorMsg}</div>}
+			</div>
+		)
+	}
+
+	renderFieldTextInput = (com, idx) => {
+		let cls = 'form-control'
+		if (this.state.errorFields[com.key]) cls = 'form-control input--error'
+		let val = sb.find(this.props.submission.values, (f) => f.key === com.key) || {}
+		val = val.value || '""'
+		val = sb.parseJSON(val)
+		return (
+			<input
+				ref={this[`${com.key}_input`]}
+				type='text'
+				class={cls}
+				placeholder={com.placeholder}
+				value={val}
+				onInput={(e) => {
+					this.onChangeValue(com.key, e.target.value)
+					this.clearError(com.key)
+				}}
+			/>
+		)
+	}
+
+	renderFieldDateInput = (com, idx) => {
+		let val = sb.find(this.props.submission.values, (f) => f.key === com.key) || {}
+		val = val.value || '""'
+		val = sb.parseJSON(val)
+		return (
+			<input
+				ref={this[`${com.key}_input`]}
+				class='form-control'
+				type='date'
+				value={val}
+				onInput={(e) => {
+					this.onChangeValue(com.key, e.target.value)
+					this.clearError(com.key)
+				}}
+			/>
+		)
+	}
+
+	renderFieldRadioInput = (com, idx) => {
+		let val = sb.find(this.props.submission.values, (f) => f.key === com.key) || {}
+		val = val.value || '""'
+		val = sb.parseJSON(val)
+		return sb.map(com.input_options, (option, oidx) => {
+			let id = com.key + '_' + oidx
+			return (
+				<div class='radio'>
+					<input
+						type='radio'
+						name={com.key}
+						id={id}
+						checked={option.value === val}
+						onChange={() => this.toggleRadioField(com.key, option.value)}
+					/>
+					<label class='radio--label' for={id}>
+						{option.label}
+					</label>
+					<div class='radio--check' />
+				</div>
+			)
+		})
+	}
+
+	renderFieldCheckboxInput = (com, idx) => {
+		let val = sb.find(this.props.submission.values, (f) => f.key === com.key) || {}
+		val = val.value || '[]'
+		val = sb.parseJSON(val)
+		return sb.map(com.input_options, (option, oidx) => {
+			let id = com.key + '_' + oidx
+			return (
+				<div class='checkbox'>
+					<input
+						type='checkbox'
+						name={com.key}
+						id={id}
+						checked={val.includes(option.value)}
+						onChange={() => this.toggleCheckboxField(com.key, option.value)}
+					/>
+					<label class='checkbox--label' for={id}>
+						{option.label}
+					</label>
+					<div class='checkbox--check' />
+				</div>
+			)
+		})
+	}
+
+	renderFieldDropdownInput = (com, idx) => {
+		let val = sb.find(this.props.submission.values, (f) => f.key === com.key) || {}
+		val = val.value || '""'
+		val = sb.parseJSON(val)
+		return (
+			<select
+				class='form-control'
+				ref={this[`${com.key}_input`]}
+				onChange={(e) => {
+					this.onChangeValue(com.key, e.target.value)
+					this.clearError(com.key)
+				}}
+			>
+				{sb.map(com.input_options, (option) => {
+					return <option value={option.value}>{option.label}</option>
+				})}
+			</select>
+		)
+	}
+
+	renderFieldTextareaInput = (com, idx) => {
+		let val = sb.find(this.props.submission.values, (f) => f.key === com.key) || {}
+		val = val.value || '""'
+		val = sb.parseJSON(val)
+		return (
+			<textarea
+				onInput={(e) => {
+					this.onChangeValue(com.key, e.target.value)
+					this.clearError(com.key)
+				}}
+				ref={this[`${com.key}_input`]}
+				rows='3'
+				class='form-control'
+				placeholder={com.placeholder}
+			/>
+		)
+	}
+
+	onSubmit = (e) => {
+		e.preventDefault()
+		if (!this.validateForm()) return
+		this.props.onSubmit()
+	}
+
+	validateForm = () => {
+		let result = true
+		let ref = ''
+		let errors = {}
+		let components = sb.get(this.props.formSetting, 'components') || []
+		sb.each(components, (com) => {
+			if (com.type === 'input') {
+				if (com.is_required) {
+					let val = sb.find(this.props.submission.values, (f) => f.key === com.key) || {}
+					val = val.value || '""'
+					val = sb.parseJSON(val)
+					if (typeof val === 'string' && !val.trim()) {
+						result = false
+						errors[com.key] = this.props.t('cannot_be_empty')
+						if (!ref && com.input_type !== 'checkbox' && com.input_type !== 'radio') ref = `${com.key}_input`
+					}
+					if (Array.isArray(val) && val.length === 0) {
+						result = false
+						errors[com.key] = this.props.t('cannot_be_empty')
+					}
+				}
+			}
+		})
+		if (ref && this[ref] && this[ref].current) {
+			this[ref].current.focus()
+		}
+		this.setState({errorFields: errors})
+		return result
+	}
+
+	toggleRadioField(key, v) {
+		this.clearError(key)
+		this.onChangeValue(key, v)
+	}
+
+	toggleCheckboxField(key, v) {
+		let currentValues = sb.find(this.props.submission.values, (f) => f.key === key) || {}
+		currentValues = currentValues.value || '[]'
+		currentValues = sb.parseJSON(currentValues)
+
+		if (currentValues.includes(v)) {
+			currentValues = currentValues.filter((s) => s !== v)
+		} else {
+			currentValues.push(v)
+		}
+		this.clearError(key)
+		this.onChangeValue(key, currentValues)
+	}
+
+	onChangeValue = (key, v) => {
+		let formValues = sb.get(this.props.submission, 'values') || []
+		let f = sb.find(formValues, (field) => field.key === key)
+		if (!f) {
+			formValues.push({key, value: JSON.stringify(v)})
+		} else {
+			f.value = JSON.stringify(v)
+		}
+		this.props.onChangeFormValues(formValues)
+	}
+
+	clearError = (key) => {
+		let errors = this.state.errorFields
+		errors[key] = ''
+		this.setState({errorFields: errors})
+	}
+
+	render() {
+		let components = sb.get(this.props.formSetting, 'components') || []
+		let title = sb.get(this.props.formSetting, 'title') || ''
+		let cls = 'form-wrapper form'
+		if (this.props.mode === 'attachment') cls += ' form-wrapper-attachment'
+		return (
+			<div class={cls}>
+				{this.props.isSubmited && (
+					<div class='form-component'>{this.props.t('you_have_submitted_info_successfully')}</div>
+				)}
+				<form onSubmit={this.onSubmit}>
+					<div class='form-component form-component-block'>{title}</div>
+					{sb.map(components, this.renderFormComponent)}
+				</form>
+			</div>
+		)
+	}
+}

package/src/form/FormPage.js

@@ -0,0 +1,95 @@
+import {Com} from '../common.js'
+import {h, createRef} from 'preact'
+import Form from './Form.js'
+import sb from '../util/index.js'
+
+export default class FormPage extends Com {
+	constructor(props) {
+		super(props)
+
+		this.state = {
+			submission: {},
+			formSetting: {},
+			submiting: false,
+			errorMessage: '',
+			isSubmited: false,
+
+			loading: false,
+			loadError: '',
+		}
+	}
+
+	componentDidMount() {
+		this.fetchFormSetting()
+	}
+
+	fetchFormSetting = async () => {
+		if (this.state.loading) return
+		this.setState({loading: true})
+		let res = await this.props.store.checkFormToken(this.props.token)
+		if (res.error) {
+			this.setState({loading: false, loadError: true})
+			return
+		}
+		let formSetting = sb.get(res, 'body.form') || {}
+		let submission = sb.get(res, 'body.submission') || {}
+		let isSubmited = sb.size(submission) > 0
+		this.setState({loading: false, loadError: false, formSetting, submission, isSubmited})
+	}
+
+	onChangeFormValues = (values) => {
+		this.setState({submission: {values}})
+	}
+
+	onSubmit = async () => {
+		this.setState({errorMessage: ''})
+		if (this.state.submiting) return
+		this.setState({submiting: true})
+		let res = await this.props.store.submitForm2(this.props.token, this.state.submission)
+		if (res.error) {
+			this.setState({submiting: false, errorMessage: sb.get(res, 'error.code')})
+			return
+		}
+		this.setState({submiting: false, isSubmited: true})
+	}
+
+	render() {
+		const {formSetting, loading, loadError, submission, errorMessage, isSubmited, submiting} = this.state
+		if (loading && !loadError) {
+			return (
+				<div class='h-full w-full d-flex justify-content-center align-items-center'>
+					<div class='text-muted text-xl'>{this.props.t('loading_data')} ...</div>
+				</div>
+			)
+		}
+		if (loadError) {
+			return (
+				<div class='h-full w-full d-flex justify-content-center align-items-center'>
+					<div class='text-center'>
+						<div class='text-danger text-lg mb-2'>{this.props.t('error_occurs_when_load_data')}</div>
+						<br />
+						<button disabled={loading} type='button' class='btn--start-convo' onClick={this.fetchFormSetting}>
+							{this.props.t('try_again')}
+						</button>
+					</div>
+				</div>
+			)
+		}
+		return (
+			<div class='form-page'>
+				<div class='form-page-header'>{'HEADER'}</div>
+				<Form
+					store={this.props.store}
+					formSetting={formSetting}
+					t={this.props.t}
+					submission={submission}
+					errorMessage={errorMessage}
+					isSubmited={isSubmited}
+					submiting={submiting}
+					onChangeFormValues={this.onChangeFormValues}
+					onSubmit={this.onSubmit}
+				/>
+			</div>
+		)
+	}
+}