@subiz/widget-v4 4.1.121 → 4.1.122

package/dist/HASH

@@ -1 +1 @@
-19642b47dfe
+19643345ab6

package/dist/screenshoot.js

@@ -8021,10 +8021,11 @@ var chatbox_time = __webpack_require__(1620);
 
 class TextMessage extends common/* Com */.Mw {
   renderTime() {
+    return null;
     if (!this.props.showTime && !this.props.isLast && !this.props.isFirst) return null;
-    return (0,preact_module.h)("div", null, (0,preact_module.h)(chatbox_time/* default */.A, {
+    return h("div", null, h(Time, {
       class: "inline-time",
-      time: util/* default */.A.get(this.props.ev, 'created', util/* default */.A.Date.now()),
+      time: sb.get(this.props.ev, 'created', sb.Date.now()),
       t: this.props.t
     }));
   }
@@ -8447,7 +8448,7 @@ class Event extends common/* Com */.Mw {
     }
     let $sender = null;
     if (this.props.event.mode === 'lead') $sender = (0,preact_module.h)("div", {
-      class: "pt-2"
+      class: "pt-3"
     });
     let $error = null;
     if (ev._error && ev.type === 'message_sent') {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.121",
+	"version": "4.1.122",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -31,7 +31,7 @@
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.6.3",
 		"puppeteer": "^24.6.1",
-		"webpack": "^5.99.5",
+		"webpack": "^5.99.6",
 		"webpack-bundle-analyzer": "^4.10.2",
 		"webpack-cli": "^6.0.1",
 		"webpack-dev-server": "^5.2.1"

package/src/chatbox/AgentsAvatar.js

@@ -27,7 +27,8 @@ export default function AgentsAvatar(props) {
 
 	let agentM = props.store.matchAgent('*')
 	var agents = sb.map(props.agent_ids, (id) => agentM[id])
-	if (props.agent_ids === undefined || sb.size(props.agent_ids) === 0) {
+
+	if (props.agent_ids !== undefined && sb.size(props.agent_ids) == 0) {
 		var agids = sb.get(accountSetting, 'header.agent_ids', [])
 		agids = sb.filter(agids, (id) => !!agentM[id])
 		if (agids.length !== 0) {
@@ -38,7 +39,7 @@ export default function AgentsAvatar(props) {
 	}
 
 	agents = sb.filter(agents, (ag) => !!ag)
-	if (agents.length === 0 || props.agent_ids === undefined || sb.size(props.agent_ids) === 0) {
+	if (sb.size(agents) === 0) {
 		// use account avatar
 		return (
 			<div class={`group-avatar group-avatar--${mode}`}>

package/src/chatbox/Events.js

@@ -306,7 +306,7 @@ function processEvents(convo, events) {
 
 		if (visibleEvent(curEvent.ev)) {
 			let elapsedSec = sb.unixSec(curEvent.ev.created) - sb.unixSec(lastEvent.ev.created)
-			if (elapsedSec > 120) curEvent.show_time = true // 2 mins
+			if (elapsedSec > 300) curEvent.show_time = true // 5 mins
 		}
 	}
 
@@ -340,7 +340,10 @@ function processEvents(convo, events) {
 
 function visibleEvent(ev) {
 	let type = sb.get(ev, 'type')
-	return type === 'message_sent' || type === 'conversation_state_updated'
+	if (type === 'message_sent') return true
+	if (type === 'conversation_state_updated') {
+		return sb.get(ev, 'data.conversation.state') == 'ended'
+	}
 }
 
 function isSummited(form) {

package/src/chatbox/Header.js

@@ -28,6 +28,7 @@ export default class Header extends Com {
 			renderSocial = layout === 'social'
 			renderTeam = !(renderSocial || renderClassic)
 		}
+
 		return (
 			<div class={cls}>
 				{this.renderCollapsedHeader(renderCollapsed || renderClassic, renderClassic)}
@@ -54,8 +55,6 @@ export default class Header extends Com {
 		return (
 			<div class={cls} style={style}>
 				{$back}
-				<div class="mr-2"></div>
-				<AgentsAvatar plugin={this.props.plugin} store={this.props.store} mode='secondary' />
 				<div class='widget-header--title-container'>
 					<div class='widget-header--title'>{this.getTitle()}</div>
 					<div class='widget-header--description' title={desc}>
@@ -149,7 +148,7 @@ Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi
 					</div>
 					<div class='widget_header__body'>
 						<div class='widget-header--avatar-wrapper'>
-							<AgentsAvatar plugin={this.props.plugin} store={this.props.store} mode='primary' />
+							<AgentsAvatar plugin={this.props.plugin} store={this.props.store} mode='primary' agent_ids={[]} />
 						</div>
 						<div class='widget-header--title-container'>
 							<div class='widget-header--description'>{tags}</div>

package/src/chatbox/Widget.js

@@ -159,31 +159,30 @@ export default class Widget extends Com {
 		)
 	}
 
-	async submitPrechatForm(form, formName) {
-		if (this.state.submiting) return
-		// check error first
-		var hasError = false
-		sb.map(this.state.formData, (field, key) => {
+	validateForm(formData) {
+		let newformdata = {}
+		sb.map(formData, (field, key) => {
+			field = Object.assign({}, field)
+			field.is_empty_error = false
+
 			if (
 				field.is_required &&
 				(field.value === undefined || field.value === '' || (sb.size(field.value) === 0 && Array.isArray(field.value)))
 			) {
+				field.is_empty_error = true
 				field.error = this.props.t('error_empty')
-				hasError = true
 			} 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'
-						hasError = true
 					}
 				} 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'
-						hasError = true
 					}
 				}
 			}
@@ -192,19 +191,30 @@ export default class Widget extends Com {
 				if (field.is_required) {
 					if (!sb.isPhone(field.value)) {
 						field.error = this.props.t('error_phone_invalid') // 'The email is not valid'
-						hasError = true
 					}
 				} 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'
-						hasError = true
 					}
 				}
 			}
+			newformdata[key] = field
 		})
-		if (hasError) return this.forceUpdate()
+		return newformdata
+	}
+
+	async submitPrechatForm(form, formName) {
+		if (this.state.submiting) return
+		// check error first
+		let newData = this.validateForm(this.state.formData)
+		let hasError = sb.find(newData, (field) => !!field.error)
+		if (hasError) {
+			this.setState({formData: newData})
+			this.focusInput()
+			return
+		}
 
 		// user must already send the message or it would create be a loop
 		let data = sb.cloneDeep(this.state.formData)
@@ -325,6 +335,7 @@ export default class Widget extends Com {
 		let field = sb.find(formData, (_, fkkey) => fkkey === key)
 		if (!field) return
 		field.value = val
+		field.error = undefined
 		this.setState({formData})
 	}
 
@@ -476,7 +487,7 @@ export default class Widget extends Com {
 				if (key == 'question' || sb.get(field, 'def.multiple_line')) {
 					$field = (
 						<textarea
-							class='form-control'
+							class={`form-control ${errclass}`}
 							ref={(ref) => {
 								this['form_' + encode(key)] = ref
 							}}
@@ -485,7 +496,6 @@ export default class Widget extends Com {
 							onInput={(e) => this.onInputChange(key, e.target.value)}
 							onChange={(e) => this.onInputChange(key, e.target.value)}
 							row='4'
-							class='form-control'
 						></textarea>
 					)
 				} else if (sb.get(field, 'def.select') === 'checkbox') {
@@ -601,8 +611,8 @@ export default class Widget extends Com {
 						{label}
 						{field.is_required ? <span class='ml-1 red'>*</span> : ''}
 					</label>
-					{field.error ? <div class='form-control--valid-input--error'>{field.error}</div> : ''}
 					{$field}
+					{field.error ? <div class='form-control--valid-input--error'>{field.error}</div> : ''}
 				</div>
 			)
 		})
@@ -614,30 +624,28 @@ export default class Widget extends Com {
 		if (!title) title = sb.get(form, 'title', this.props.t('capture_lead_title'))
 		// 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)
 		return (
 			<div class='widget-body'>
 				<FormMounter key={form._updated} form={form} onMount={this.formMounted} />
 				<div class='widget-body--content flex-grow-1 pl-3 pr-3 d-flex flex-column'>
-					<div class='flex-grow-1'>
-						<div class='form mt-3 pl-3 pr-3 pt-3 pb-3 d-flex flex-column'>
-							<div>{title}</div>
-							{this.renderFields(form, formName)}
-						</div>
-						</div>
-						<div class="mt-2"></div>
-					<PoweredBy store={this.props.store} t={this.props.t} />
-				</div>
-
-				<div class='message-input message-input--preform'>
+					<div class='mt-3 d-flex flex-column'>
+						<div>{title}</div>
+						{this.renderFields(form, formName)}
+					</div>
+					<div style='min-height: 15px !important; flex: 1 !important; flex-shrink: 0 !important'></div>
 					<button
-						class='btn--start-convo'
+						class={btncls}
 						onClick={(_) => this.submitPrechatForm(form, formName)}
-						disabled={this.state.creating}
+						disabled={!!hasEmptyError || !!hasError || this.state.creating}
 					>
 						{submitLabel}
 					</button>
 				</div>
+				<div class='mt-2'></div>
 			</div>
 		)
 	}
@@ -666,10 +674,10 @@ export default class Widget extends Com {
 					<AgentsAvatar
 						plugin={this.props.plugin}
 						store={this.props.store}
-						mode='member'
+						mode='secondary'
 						class='d-flex flex-row'
 						tooltipPos='right'
-						agent_ids={agentids}
+						agent_ids={[agentids[0]]}
 					/>
 					{this.renderConvoSummary(convo)}
 				</div>
@@ -694,12 +702,12 @@ export default class Widget extends Com {
 					{$body}
 				</div>
 				<div class='convo-list--footer'>
+					<PoweredBy store={this.props.store} />
 					<button class='btn--start-convo' onClick={(_) => this.goToConvo('')}>
 						<span>{this.props.t('start_conversation')}</span>
 						<img src={send} alt='send button' width='26' height='26' />
 					</button>
-						<div class="mt-2"></div>
-					<PoweredBy store={this.props.store} />
+					<div class='mt-2'></div>
 				</div>
 			</div>
 		)
@@ -717,20 +725,21 @@ export default class Widget extends Com {
 		if (this.props.store.isPreview) return
 		if (this.shouldShowForm()) {
 			// focus on the element
-			let firstemptykey = ''
+			let focusfieldkey = ''
 			sb.map(this.state.formData, (field, key) => {
-				if (field.type !== 'text') return
-				if (firstemptykey) return
-
-				if (!field.value) firstemptykey = key
+				if (focusfieldkey || field.type !== 'text') return
+				if (!field.value || field.error) focusfieldkey = key
 			})
-
+			var $input = this['form_' + encode(focusfieldkey)]
+			if ($input) $input.focus()
 			sb.setTimeout(() => {
-				var $input = this['form_' + encode(firstemptykey)]
-				if (!$input) return
-
-				$input.focus()
-			}, 300)
+				sb.map(this.state.formData, (field, key) => {
+					if (focusfieldkey || field.type !== 'text') return
+					if (!field.value || field.error) focusfieldkey = key
+				})
+				var $input = this['form_' + encode(focusfieldkey)]
+				if ($input) $input.focus()
+			}, 200)
 			return
 		}
 

package/src/lib.js

@@ -2,12 +2,14 @@ import Store from './store/store.js'
 import sb from './util/index.js'
 import PluginMgr from './plugin.js'
 
+/*
 var $link = document.createElement('link')
 $link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap'
 $link.rel = 'stylesheet'
 document.head.append($link)
 
 sb.preloadWebfonts(['Inter'], [400, 500])
+*/
 
 class Widget {
 	constructor(ApiURL, FileURL, RealtimeURL, inmem, fake) {

package/src/util/common.js

@@ -599,7 +599,7 @@ export function replaceCssVariablePlugin(css, setting) {
 	let parseColor = parseCssColor(primary_color)
 	if (!parseColor) parseColor = {red: 238, blue: 238, green: 238}
 	let hue = rgbToHsl(parseColor.red, parseColor.green, parseColor.blue)[0]
-	let [r, g, b] = hslToRgb(hue, 0.5, 0.95)
+	let [r, g, b] = hslToRgb(hue, 0.25, 0.95)
 	DEFVAL.primary_color_faded = `rgb(${r},${g},${b})`
 
 	var ret = []
@@ -659,7 +659,7 @@ export function replaceCssVariable(css, setting) {
 	let parseColor = parseCssColor(primary_color)
 	if (!parseColor) parseColor = {red: 238, blue: 238, green: 238}
 	let hue = rgbToHsl(parseColor.red, parseColor.green, parseColor.blue)[0]
-	let [r, g, b] = hslToRgb(hue, 0.5, 0.95)
+	let [r, g, b] = hslToRgb(hue, 0.25, 0.95)
 	DEFVAL.primary_color_faded = `rgb(${r},${g},${b})`
 
 	var ret = []

package/up

@@ -23,7 +23,6 @@ mv dist/.HASH dist/HASH
 if [ "$1" = 'prod' ]; then
 	gsutil -h "Cache-Control:public, max-age=10" -h "Content-Type: text/plain" cp dist/HASH gs://public-gcs.subiz-cdn.com/widget-v4/public/
 
-	exit
 	echo "Deploy to fallback server: google cloud storage"
 	# support mallicious version
 	# for https://widget.subiz.xyz/js/app.js
@@ -38,17 +37,15 @@ if [ "$1" = 'prod' ]; then
 	cat cloudflare_worker.js | sed -e "s/XXXXXXXX/$(cat dist/HASH)/" > cfw.js
 	curl -X PUT "https://api.cloudflare.com/client/v4/accounts/cc22eff135a40705ebe59955b450217d/workers/scripts/app" -H "X-Auth-Email: thanhpham@vietnambiz.com" -H "X-Auth-Key: $(cat ~/.cloudflare)" -H "Content-Type: application/javascript" --data "$(cat cfw.js)"
 	rm cfw.js
-
-	echo "Waiting for widget server (5sec)"
-	sleep 5
-
-	echo "Remove cloudfare cache"
 else
 	cp dist/HASH dist/DEVHASH
 	gsutil -h "Cache-Control:public, max-age=10" -h "Content-Type: text/plain" cp dist/DEVHASH gs://public-gcs.subiz-cdn.com/widget-v4/public/
 	rm dist/DEVHASH
 fi
 
+echo "Waiting for widget server (5sec) to fetch new hash"
+sleep 5
+echo "Remove cloudfare cache"
 # PURGE CLOUD FLARE CACHE
 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)" -H "Content-Type: application/json" --data '{"purge_everything":true}'