@subiz/widget-v4 4.1.70 → 4.1.72

package/inject.js

@@ -38,7 +38,7 @@ function runChatbox(subiz) {
 			show_close_button: true,
 			overlay: true,
 			text_color: 'rgba(0,0,0,1)',
-			font_family: 'Roboto',
+			font_family: 'Inter',
 			font_size: '14px',
 			background: 'white',
 			spacer: '10',
@@ -410,7 +410,7 @@ function runPopup(subiz) {
 				overlay: true,
 				primary_color: '#FDAD15',
 				text_color: '#333',
-				font_family: 'Roboto',
+				font_family: 'Inter',
 				font_size: '14px',
 				background: 'white',
 				spacer: '10',
@@ -636,7 +636,7 @@ function runPopup2(subiz) {
 				overlay: true,
 				primary_color: '#E36539',
 				text_color: '#333',
-				font_family: 'Roboto',
+				font_family: 'Inter',
 				font_size: '14px',
 				background: 'white',
 				spacer: '10',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.70",
+	"version": "4.1.72",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -9,10 +9,10 @@
 		"lib": "rm -rf compiled_src && npx babel --out-dir=compiled_src src"
 	},
 	"dependencies": {
-		"@subiz/ajax": "^3.0.12",
+		"@subiz/ajax": "^3.0.14",
 		"@subiz/flow": "^1.1.0",
 		"@subiz/storage": "0.0.8",
-		"@subiz/wsclient": "^4.0.21",
+		"@subiz/wsclient": "^4.0.24",
 		"cookie_js": "1.4.2",
 		"core-js": "^3.36.1",
 		"css-loader": "5.2.7",
@@ -23,14 +23,14 @@
 	},
 	"devDependencies": {
 		"@babel/cli": "^7.24.1",
-		"@babel/core": "^7.24.3",
+		"@babel/core": "^7.24.4",
 		"@babel/plugin-proposal-class-properties": "^7.18.6",
 		"@babel/plugin-transform-react-jsx": "^7.23.4",
-		"@babel/preset-env": "^7.24.3",
+		"@babel/preset-env": "^7.24.4",
 		"babel-loader": "^9.1.3",
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.6.0",
-		"puppeteer": "^22.6.0",
+		"puppeteer": "^22.6.3",
 		"webpack": "^5.91.0",
 		"webpack-bundle-analyzer": "^4.10.1",
 		"webpack-cli": "^5.1.4",

package/src/chatbox/AgentsAvatar.js

@@ -3,161 +3,98 @@ import {Com} from '../common.js'
 import {h} from 'preact'
 
 //  ['mode', 'tooltipPos', 'agent_ids', 'border'],
-export default class AgentsAvatar extends Com {
-	constructor(props) {
-		super(props)
-	}
-
-	render() {
-		let accountSetting = this.props.plugin.chatbox
-		let acc = this.props.store.matchAccount() || {}
-		var tooltippos = this.props.tooltipPos || 'bottom'
-		var mode = this.props.mode || 'primary'
-
-		if (accountSetting && accountSetting.hide_agent_profile) {
-			return (
-				<div class={`group-avatar group-avatar--${mode}`}>
-					<div class='d-inline-block pos-relative' data-tooltip={acc.name} data-tooltip-position={tooltippos}>
-						<img
-							width={35}
-							height={35}
-							alt='agent avatar left'
-							class='avatar group-avatar--agent-left'
-							src={this.props.store.replaceFileUrl(acc.logo_url) || require('../../assets/img/image_default.png')}
-						/>
-					</div>
-				</div>
-			)
-		}
-
-		let agentM = this.props.store.matchAgent('*')
-		var agents = sb.map(this.props.agent_ids, (id) => agentM[id])
-		if (this.props.agent_ids === undefined || sb.size(this.props.agent_ids) === 0) {
-			var agids = sb.get(accountSetting, 'header.agent_ids', [])
-			agids = sb.filter(agids, (id) => !!agentM[id])
-			if (agids.length !== 0) {
-				agents = sb.map(agids, (id) => agentM[id])
-			} else {
-				agents = sb.filter(agentM, (agent) => agent.type === 'agent')
-			}
-		}
+export default function AgentsAvatar(props) {
+	let accountSetting = props.plugin.chatbox
+	let acc = props.store.matchAccount() || {}
+	var tooltippos = props.tooltipPos || 'bottom'
+	var mode = props.mode || 'primary'
 
-		agents = sb.filter(agents, (ag) => !!ag)
-		if (agents.length === 0) {
-			// use account avatar
-			return (
-				<div class={`group-avatar group-avatar--${mode}`}>
-					<div class='d-inline-block pos-relative' data-tooltip={acc.name} data-tooltip-position={tooltippos}>
-						<img
-							width={35}
-							height={35}
-							alt='agent avatar left'
-							class='avatar group-avatar--agent-left'
-							src={this.props.store.replaceFileUrl(acc.logo_url) || require('../../assets/img/image_default.png')}
-						/>
-					</div>
+	if (accountSetting && accountSetting.hide_agent_profile) {
+		return (
+			<div class={`group-avatar group-avatar--${mode}`}>
+				<div class='d-inline-block pos-relative' data-tooltip={acc.name} data-tooltip-position={tooltippos}>
+					<img
+						width={35}
+						height={35}
+						alt='agent avatar left'
+						class='avatar group-avatar--agent-left'
+						src={props.store.replaceFileUrl(acc.logo_url) || require('../../assets/img/image_default.png')}
+					/>
 				</div>
-			)
-		}
+			</div>
+		)
+	}
 
-		// 1 agent
-		if (agents.length === 1) {
-			var agent = agents[0]
-			var groupClass = mode === 'primary' ? 'group-avatar--agent-middle' : 'group-avatar--agent-left'
-			return (
-				<div class={`group-avatar group-avatar--${mode}`}>
-					<div
-						class='d-inline-block pos-relative'
-						data-tooltip={agent.fullname || acc.name}
-						data-tooltip-position={tooltippos}
-					>
-						<img
-							width={35}
-							height={35}
-							class={`avatar ${groupClass}`}
-							alt='agent avatar'
-							src={this.props.store.replaceFileUrl(agent.avatar_url) || require('../../assets/img/default_avatar.png')}
-						/>
-					</div>
-				</div>
-			)
+	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) {
+		var agids = sb.get(accountSetting, 'header.agent_ids', [])
+		agids = sb.filter(agids, (id) => !!agentM[id])
+		if (agids.length !== 0) {
+			agents = sb.map(agids, (id) => agentM[id])
+		} else {
+			agents = sb.filter(agentM, (agent) => agent.type === 'agent')
 		}
+	}
 
-		// 2 agent
-		if (agents.length === 2) {
-			let leftAgent = agents[0]
-			let rightAgent = agents[1]
-			return (
-				<div class={`group-avatar group-avatar--${mode}`}>
-					<div
-						class='d-inline-block pos-relative'
-						data-tooltip={leftAgent.fullname || acc.name}
-						data-tooltip-position={tooltippos}
-					>
-						<img
-							width={35}
-							height={35}
-							alt='agent avatar left'
-							class='avatar group-avatar--agent-left'
-							src={
-								this.props.store.replaceFileUrl(leftAgent.avatar_url) || require('../../assets/img/default_avatar.png')
-							}
-						/>
-					</div>
-					<div
-						class='d-inline-block pos-relative'
-						data-tooltip={rightAgent.fullname || acc.name}
-						data-tooltip-position={tooltippos}
-					>
-						<img
-							alt='agent avatar right'
-							width={35}
-							height={35}
-							class='avatar group-avatar--agent-right'
-							src={
-								this.props.store.replaceFileUrl(rightAgent.avatar_url) || require('../../assets/img/default_avatar.png')
-							}
-						/>
-					</div>
+	agents = sb.filter(agents, (ag) => !!ag)
+	if (agents.length === 0) {
+		// use account avatar
+		return (
+			<div class={`group-avatar group-avatar--${mode}`}>
+				<div class='d-inline-block pos-relative' data-tooltip={acc.name} data-tooltip-position={tooltippos}>
+					<img
+						width={35}
+						height={35}
+						alt='agent avatar left'
+						class='avatar group-avatar--agent-left'
+						src={props.store.replaceFileUrl(acc.logo_url) || require('../../assets/img/image_default.png')}
+					/>
 				</div>
-			)
-		}
-
-		// >=3 agent
+			</div>
+		)
+	}
 
-		let leftAgent = agents[0]
-		let middleAgent = agents[1]
-		let rightAgent = agents[2]
+	// 1 agent
+	if (agents.length === 1) {
+		var agent = agents[0]
+		var groupClass = mode === 'primary' ? 'group-avatar--agent-middle' : 'group-avatar--agent-left'
 		return (
 			<div class={`group-avatar group-avatar--${mode}`}>
 				<div
 					class='d-inline-block pos-relative'
-					data-tooltip={leftAgent.fullname || acc.name}
+					data-tooltip={agent.fullname || acc.name}
 					data-tooltip-position={tooltippos}
 				>
 					<img
 						width={35}
 						height={35}
-						alt='agent avatar left'
-						class='avatar group-avatar--agent-left'
-						src={
-							this.props.store.replaceFileUrl(leftAgent.avatar_url) || require('../../assets/img/default_avatar.png')
-						}
+						class={`avatar ${groupClass}`}
+						alt='agent avatar'
+						src={props.store.replaceFileUrl(agent.avatar_url) || require('../../assets/img/default_avatar.png')}
 					/>
 				</div>
+			</div>
+		)
+	}
+
+	// 2 agent
+	if (agents.length === 2) {
+		let leftAgent = agents[0]
+		let rightAgent = agents[1]
+		return (
+			<div class={`group-avatar group-avatar--${mode}`}>
 				<div
 					class='d-inline-block pos-relative'
-					data-tooltip={middleAgent.fullname || acc.name}
+					data-tooltip={leftAgent.fullname || acc.name}
 					data-tooltip-position={tooltippos}
 				>
 					<img
-						alt='agent avatar middle'
 						width={35}
 						height={35}
-						class='avatar group-avatar--agent-middle'
-						src={
-							this.props.store.replaceFileUrl(middleAgent.avatar_url) || require('../../assets/img/default_avatar.png')
-						}
+						alt='agent avatar left'
+						class='avatar group-avatar--agent-left'
+						src={props.store.replaceFileUrl(leftAgent.avatar_url) || require('../../assets/img/default_avatar.png')}
 					/>
 				</div>
 				<div
@@ -166,16 +103,63 @@ export default class AgentsAvatar extends Com {
 					data-tooltip-position={tooltippos}
 				>
 					<img
+						alt='agent avatar right'
 						width={35}
 						height={35}
-						alt='agent avatar right'
 						class='avatar group-avatar--agent-right'
-						src={
-							this.props.store.replaceFileUrl(rightAgent.avatar_url) || require('../../assets/img/default_avatar.png')
-						}
+						src={props.store.replaceFileUrl(rightAgent.avatar_url) || require('../../assets/img/default_avatar.png')}
 					/>
 				</div>
 			</div>
 		)
 	}
+
+	// >=3 agent
+
+	let leftAgent = agents[0]
+	let middleAgent = agents[1]
+	let rightAgent = agents[2]
+	return (
+		<div class={`group-avatar group-avatar--${mode}`}>
+			<div
+				class='d-inline-block pos-relative'
+				data-tooltip={leftAgent.fullname || acc.name}
+				data-tooltip-position={tooltippos}
+			>
+				<img
+					width={35}
+					height={35}
+					alt='agent avatar left'
+					class='avatar group-avatar--agent-left'
+					src={props.store.replaceFileUrl(leftAgent.avatar_url) || require('../../assets/img/default_avatar.png')}
+				/>
+			</div>
+			<div
+				class='d-inline-block pos-relative'
+				data-tooltip={middleAgent.fullname || acc.name}
+				data-tooltip-position={tooltippos}
+			>
+				<img
+					alt='agent avatar middle'
+					width={35}
+					height={35}
+					class='avatar group-avatar--agent-middle'
+					src={props.store.replaceFileUrl(middleAgent.avatar_url) || require('../../assets/img/default_avatar.png')}
+				/>
+			</div>
+			<div
+				class='d-inline-block pos-relative'
+				data-tooltip={rightAgent.fullname || acc.name}
+				data-tooltip-position={tooltippos}
+			>
+				<img
+					width={35}
+					height={35}
+					alt='agent avatar right'
+					class='avatar group-avatar--agent-right'
+					src={props.store.replaceFileUrl(rightAgent.avatar_url) || require('../../assets/img/default_avatar.png')}
+				/>
+			</div>
+		</div>
+	)
 }

package/src/chatbox/AudioAttachments.js

@@ -1,31 +1,24 @@
 import sb from '../util/index.js'
-import {Com} from '../common.js'
 import {h} from 'preact'
 
-export default class AudioAttachments extends Com {
-	constructor(props) {
-		super(props)
-	}
+export default function AudioAttachments(props) {
+	let byType = sb.get(props.ev, 'by.type')
+	var attachments = sb.get(props.ev, 'data.message.attachments', [])
+	var audios = []
+	sb.each(attachments, (att, i) => {
+		if (!att) return
+		if (sb.includes(att.mimetype, 'audio')) audios.push(att)
+	})
+	if (audios.length === 0) return null
 
-	render() {
-		let byType = sb.get(this.props.ev, 'by.type')
-		var attachments = sb.get(this.props.ev, 'data.message.attachments', [])
-		var audios = []
-		sb.each(attachments, (att, i) => {
-			if (!att) return
-			if (sb.includes(att.mimetype, 'audio')) audios.push(att)
-		})
-		if (audios.length === 0) return null
-
-		var $audios = sb.map(audios, (audio, index) => {
-			return (
-				<div key={index} class={`audio-attachment audio-attachment--${byType}`}>
-					<audio class='audio-attachment__audio' controls>
-						<source src={this.props.store.replaceFileUrl(audio.url)} type={audio.mimetype} />
-					</audio>
-				</div>
-			)
-		})
-		return <div class={`message-${byType} message-${byType}-audio`}>{$audios}</div>
-	}
+	var $audios = sb.map(audios, (audio, index) => {
+		return (
+			<div key={index} class={`audio-attachment audio-attachment--${byType}`}>
+				<audio class='audio-attachment__audio' controls>
+					<source src={props.store.replaceFileUrl(audio.url)} type={audio.mimetype} />
+				</audio>
+			</div>
+		)
+	})
+	return <div class={`message-${byType} message-${byType}-audio`}>{$audios}</div>
 }

package/src/chatbox/ButtonAttachments.js

@@ -1,26 +1,19 @@
 import Buttons from './Buttons.js'
 import sb from '../util/index.js'
-import { Com } from '../common.js'
-import { h } from 'preact'
+import {h} from 'preact'
 
-export default class ButtonAttachments extends Com {
-	constructor (props) {
-		super(props)
-	}
+export default function ButtonAttachments(props) {
+	// dont support user sent button yet
+	let byType = sb.get(props.ev, 'by.type')
+	if (byType === 'user') return null
 
-	render () {
-		// dont support user sent button yet
-		let byType = sb.get(this.props.ev, 'by.type')
-		if (byType === 'user') return null
+	// filter out all button
+	let buttons = []
+	let attachments = sb.get(props.ev, 'data.message.attachments', [])
+	sb.each(attachments, (att, i) => {
+		if (!att || sb.get(att, 'type') !== 'button') return
+		sb.each(sb.get(att, 'buttons') || [], (btn) => buttons.push(btn))
+	})
 
-		// filter out all button
-		let buttons = []
-		let attachments = sb.get(this.props.ev, 'data.message.attachments', [])
-		sb.each(attachments, (att, i) => {
-			if (!att || sb.get(att, 'type') !== 'button') return
-			sb.each(sb.get(att, 'buttons') || [], btn => buttons.push(btn))
-		})
-
-		return <Buttons store={this.props.store} buttons={buttons} t={this.props.t}/>
-	}
+	return <Buttons store={props.store} buttons={buttons} t={props.t} />
 }

package/src/chatbox/Buttons.js

@@ -1,44 +1,36 @@
 import sb from '../util/index.js'
-import {Com} from '../common.js'
 import {h} from 'preact'
 
-export default class Buttons extends Com {
-	constructor(props) {
-		super(props)
-	}
+export default function Buttons(props) {
+	if (sb.size(props.buttons) === 0) return null
+	var $buttons = sb.map(props.buttons, (button, index) => {
+		if (button.type === 'call_button') {
+			return (
+				<a class='url-button-attachment' href={'tel:' + button.phone_number} key={index} title={button.title}>
+					{props.t.i18n(button.i18n_title) || button.title}
+				</a>
+			)
+		}
 
-	render() {
-		if (sb.size(this.props.buttons) === 0) return null
-		var $buttons = sb.map(this.props.buttons, (button, index) => {
-			if (button.type === 'call_button') {
-				return (
-					<a class='url-button-attachment' href={'tel:' + button.phone_number} key={index} title={button.title}>
-						{this.props.t.i18n(button.i18n_title) || button.title}
-					</a>
-				)
-			}
+		if (button.type === 'url_button') {
+			return (
+				<a class='url-button-attachment' href={button.url} target='_blank' key={index} title={button.title}>
+					{props.t.i18n(button.i18n_title) || button.title || button.url}
+				</a>
+			)
+		}
 
-			if (button.type === 'url_button') {
-				return (
-					<a class='url-button-attachment' href={button.url} target='_blank' key={index} title={button.title}>
-						{this.props.t.i18n(button.i18n_title) || button.title || button.url} 
-					</a>
-				)
-			}
+		if (button.type === 'postback_button') {
+			return (
+				<a class='url-button-attachment' href='javascript:;' onClick={(_) => props.onSelect(button)}>
+					{props.t.i18n(button.i18n_title) || button.title}
+				</a>
+			)
+		}
 
-			if (button.type === 'postback_button') {
-				return (
-					<a class='url-button-attachment' href='javascript:;' onClick={(_) => this.props.onSelect(button)}>
-						{this.props.t.i18n(button.i18n_title) || button.title}
-					</a>
-				)
-			}
-
-			if (button.type === 'widget_ask_desktop_notify_button') return null
-			if (button.type === 'widget_ask_contact_info_button') return null
-			return null
-		})
-
-		return <div class='button-attachments'>{$buttons}</div>
-	}
+		if (button.type === 'widget_ask_desktop_notify_button') return null
+		if (button.type === 'widget_ask_contact_info_button') return null
+		return null
+	})
+	return <div class='button-attachments'>{$buttons}</div>
 }

package/src/chatbox/ChatButton.js

@@ -128,7 +128,12 @@ export default class ChatButton extends Com {
 
 		let greeting = sb.get(accountSetting, 'greeting', {})
 		let text = this.props.t.i18n(sb.get(greeting, 'greeting', {})) || greeting.message
-		if (!text || !greeting.enabled) {
+
+		let enabled = greeting.enabled
+		if (this.props.store.isMobile()) {
+			enabled = enabled && !sb.get(greeting, 'mobile_disabled')
+		}
+		if (!text || !enabled) {
 			this.setState({previewEvent: {}})
 			return
 		}

package/src/chatbox/Event.js

@@ -7,7 +7,10 @@ import FormAttachments from './FormAttachments.js'
 import FormSubmitAttachments from './FormSubmitAttachments.js'
 import GenericTemplateAttachments from './GenericTemplateAttachments.js'
 import ProductAttachments from './ProductAttachments.js'
-import OrderAttachments from './OrderAttachments.js'
+let OrderAttachments = false
+
+const LoadOrderAttachments = () => import(/*webpackChunkName: "OrderAttachment" */ './OrderAttachments.js')
+
 //import FormSubmitAttachment from './formSubmitAttachment.js'
 import VideoAttachments from './VideoAttachments.js'
 import TextMessage from './TextMessage.js'
@@ -113,14 +116,30 @@ export default class Event extends Com {
 		)
 	}
 
+	tryLoadOrder(ev) {
+		let byType = sb.get(ev, 'by.type')
+		if (byType === 'user') return
+		// filter out all generic
+
+		let acc = this.props.store.matchAccount()
+		var attachments = sb.get(ev, 'data.message.attachments', [])
+		let orders = sb.filter(attachments, (att) => att.type === 'order' && att.order).map((att) => att.order)
+
+		if (orders.length === 0) return
+		if (!OrderAttachments)
+			sb.setTimeout(async () => {
+				OrderAttachments = (await LoadOrderAttachments()).default
+			})
+	}
+
 	renderMessageSent() {
 		let ev = this.props.event.ev
-
+		this.tryLoadOrder(ev)
 		var $time = null
 		if (this.props.event.show_time) {
 			$time = (
 				<div class='convo-event-time'>
-					<Time time={ev.created} />
+					<Time time={ev.created} t={this.props.t} />
 				</div>
 			)
 		}

package/src/chatbox/InfoMessage.js

@@ -1,6 +1,6 @@
 import sb from '../util/index.js'
 
-function getRateLang (rating) {
+function getRateLang(rating) {
 	if (!rating) return 'poor'
 	if (rating < 2) return 'poor'
 	if (rating < 4) return 'average'
@@ -8,29 +8,29 @@ function getRateLang (rating) {
 }
 
 import Time from './time.js'
-import { Com } from '../common.js'
-import { h } from 'preact'
+import {Com} from '../common.js'
+import {h} from 'preact'
 //  [ 'ev'],
 export default class InfoMessage extends Com {
-	render () {
+	render() {
 		let ev = this.props.ev.ev
 		var $time = null
 		if (this.props.ev.show_time) {
 			$time = (
-				<div class="convo-event-time">
-					<Time time={ev.created} />
+				<div class='convo-event-time'>
+					<Time time={ev.created} t={this.props.t} />
 				</div>
 			)
 		}
 
 		// if (this.ev.type === 'conversation_rating_requested') return <div class="info-message"></div>
 		if (ev.type === 'conversation_rated') {
-			var rating = sb.get(ev, 'data.conversation.ratings.0', { no_rating: true, rating: 0 })
+			var rating = sb.get(ev, 'data.conversation.ratings.0', {no_rating: true, rating: 0})
 			if (rating.no_rating) return null
 			return (
-				<div class="convo-event">
+				<div class='convo-event'>
 					{$time}
-					<div class="info-message">
+					<div class='info-message'>
 						{this.props.t('rated_as') + ' ' + this.props.t(getRateLang(rating.rating)).toLowerCase()}
 					</div>
 				</div>
@@ -38,9 +38,9 @@ export default class InfoMessage extends Com {
 		}
 		if (ev.type === 'conversation_state_updated' && sb.get(ev, 'data.conversation.state') === 'ended') {
 			return (
-				<div class="convo-event">
+				<div class='convo-event'>
 					{$time}
-					<div class="info-message">{this.props.t('conversation_ended')}</div>
+					<div class='info-message'>{this.props.t('conversation_ended')}</div>
 				</div>
 			)
 		}