@subiz/widget-v4 4.1.209 → 4.1.211

package/src/chatbox/MessageInput.js

@@ -39,14 +39,15 @@ export default class MessageInput extends Com {
 	}
 
 	render() {
+		const disabled = this.hasUnfinishRequiredFormOrLock() || this.props.disabled || this.props.is_loading
 		var $buttons = (
 			<div class='d-flex flex-row align-self-end'>
 				{this.renderEmoji()}
-				<div
-					data-tooltip-poasition='top-left'
+				<button type='button' disabled={disabled} aria-label={this.props.t('attachment')}
+					data-tooltip-position='top-left'
 					class='message-input--button message-input--attachment-button'
 					onClick={(e) => this.selectFile(e)}
-				></div>
+				></button>
 			</div>
 		)
 		var msg = sb.trim(this.state.msgValue)
@@ -54,11 +55,11 @@ export default class MessageInput extends Com {
 			$buttons = (
 				<div class='d-flex flex-row align-self-end'>
 					{this.renderEmoji()}
-					<div
+					<button type='button' disabled={disabled} aria-label={this.props.t('send')}
 						data-tooltip-position='top-left'
 						class='message-input--button message-input--send-button'
 						onClick={() => this.submitMessage()}
-					></div>
+					></button>
 				</div>
 			)
 		}
@@ -72,7 +73,6 @@ export default class MessageInput extends Com {
 		}
 
 		var containercls = ''
-		var disabled = this.hasUnfinishRequiredFormOrLock() || this.props.disabled
 		if (disabled || this.props.is_loading) containercls = 'message-input--disabled'
 
 		return (
@@ -85,6 +85,7 @@ export default class MessageInput extends Com {
 				<input class='d-none' ref={this.refFileInput} type='file' onChange={(e) => this.sendFile(e)} multiple />
 				<textarea
 					disabled={disabled}
+					aria-label={this.props.t('message_input_help')}
 					class='message-input--input'
 					maxlength='1024'
 					placeholder={this.props.t('message_input_help').substr(0, 25)}
@@ -266,7 +267,7 @@ export default class MessageInput extends Com {
 		return (
 			<div>
 				{this.renderEmojiPopup()}
-				<div class='message-input--button message-input--emoji-button' onClick={(e) => this.toggleEmoji(e)}></div>
+				<button type='button' aria-label='Emoji' aria-expanded={!!this.state.openEmoji} disabled={this.props.disabled || this.props.is_loading} class='message-input--button message-input--emoji-button' onClick={(e) => this.toggleEmoji(e)}></button>
 			</div>
 		)
 	}
@@ -303,12 +304,14 @@ export default class MessageInput extends Com {
 			return e.preventDefault()
 		}
 		this._forceUpdate()
-		this.sendTyping()
 	}
 
 	onChange(e) {
-		this.setState({msgValue: e.target.value})
+		const value = e.target.value
+		const changed = value !== (this.state.msgValue || '')
+		this.setState({msgValue: value})
 		this.resizeInput()
+		if (changed && sb.trim(value)) this.sendTyping()
 	}
 
 	selectFile() {
@@ -345,14 +348,16 @@ export default class MessageInput extends Com {
 		if (!msg) return
 		if (this.props.disabled) return
 		if (this.props.onSend) {
-			await this.props.onSend({text: msg, format: 'plaintext'})
+			if (await this.props.onSend({text: msg, format: 'plaintext'}) === false) return
 		}
 		this.setState({openEmoji: false, msgValue: ''})
 		this.resizeInput()
 	}
 
 	sendTyping() {
+		if (this.props.disabled || this.props.is_loading) return
 		if (!this.props.cid) return
+		if (sb.get(this.props.store.matchConvo(this.props.cid), 'state') === 'ended') return
 		return this.props.store.typing(this.props.cid)
 	}
 

package/src/chatbox/OrderAttachments.js

@@ -201,12 +201,12 @@ export default class ProductAttachments extends Com {
 }
 
 function getProductPropName(product, seperator = ' - ') {
-	let options = op.get(product, 'options', [])
-	let props = op.get(product, 'props', [])
-	let multiPropsOptions = op.filter(options, (option) => op.size(option.values) > 1)
+	let options = sb.get(product, 'options', [])
+	let props = sb.get(product, 'props', [])
+	let multiPropsOptions = sb.filter(options, (option) => sb.size(option.values) > 1)
 	let names = []
-	op.each(multiPropsOptions, (option) => {
-		let prop = op.find(props, (prop) => prop.key === option.key) || {}
+	sb.each(multiPropsOptions, (option) => {
+		let prop = sb.find(props, (prop) => prop.key === option.key) || {}
 		if (prop.value) names.push(prop.value)
 	})
 	return names.join(seperator)
@@ -217,7 +217,7 @@ function getOrderDisplayName(order = {}) {
 }
 
 function displayOrderShippingAddress(order, isShorten) {
-	let addr = op.get(order, 'shipping.address', {})
+	let addr = sb.get(order, 'shipping.address', {})
 	let fulladdr = [addr.address, addr.ward, addr.district, addr.province]
 		.filter((a) => a)
 		.join(', ')
@@ -240,9 +240,9 @@ function calcOrderTotal(order) {
 	let subtotal = 0
 	let beforeTaxDiscount = 0
 	let ordervalue = 0
-	op.map(order.items, (item) => {
+	sb.map(order.items, (item) => {
 		if (!item.product) return 0
-		let price = op.get(item, 'product.price', 0) * (item.quantity || 0)
+		let price = sb.get(item, 'product.price', 0) * (item.quantity || 0)
 		ordervalue += price
 
 		// some products that are discounted before tax
@@ -266,7 +266,7 @@ function calcOrderTotal(order) {
 
 	// TAX
 	let taxM = {}
-	op.map(order.items, (item, i) => {
+	sb.map(order.items, (item, i) => {
 		if (!item.product) return
 		let tax = item.product.tax
 		if (!tax) return
@@ -277,7 +277,7 @@ function calcOrderTotal(order) {
 	})
 
 	let totaltax = 0
-	op.map(taxM, (t) => (totaltax += t.taxprice))
+	sb.map(taxM, (t) => (totaltax += t.taxprice))
 
 	let computed_discount = 0
 	if (order.discount_type == 'percentage' && order.discount_percentage > 0) {
@@ -287,9 +287,9 @@ function calcOrderTotal(order) {
 	}
 
 	// SHIP
-	let shippingfee = op.get(order, 'shipping.nominal_fee', 0)
+	let shippingfee = sb.get(order, 'shipping.nominal_fee', 0)
 	if (shippingfee > 0) {
-		if (op.get(order, 'shipping.tax.id')) {
+		if (sb.get(order, 'shipping.tax.id')) {
 			let tax = order.shipping.tax
 			let taxprice = shippingfee * (tax.percentage / 10000)
 			taxM['ship'] = {tax: tax, taxprice: taxprice}
@@ -298,7 +298,7 @@ function calcOrderTotal(order) {
 	}
 
 	totaltax = 0
-	op.map(taxM, (t) => (totaltax += t.taxprice))
+	sb.map(taxM, (t) => (totaltax += t.taxprice))
 	let total = subtotal + totaltax - computed_discount + shippingfee
 
 	// add adjustment

package/src/chatbox/QuoteMessage.js

@@ -20,7 +20,7 @@ export default class QuoteMessage extends Com {
 		}
 
 		let att = sb.get(this.props.ev, 'data.message.attachments.0')
-		if (att) {
+		if (att && !sb.get(this.props.ev, 'data.message.deleted')) {
 			let isImg = sb.includes(att.mimetype, 'image')
 			if (isImg) {
 				let uri = att.url
@@ -58,7 +58,8 @@ export default class QuoteMessage extends Com {
 		let block = sb.get(this.props.ev, 'data.message.block')
 
 		let text = sb.get(this.props.ev, 'data.message.text')
-		if (block) text = sb.blockToText(block)
+		if (block) text = sb.blockToText(block) || text
+		if (sb.get(this.props.ev, 'data.message.deleted')) text = this.props.t('recalled_message')
 
 		return (
 			<div class='message-quote' onClick={() => this.scrollToSourceEvent(this.props.ev)}>

package/src/chatbox/TextMessage.js

@@ -3,8 +3,8 @@ import Block from './block.js'
 import {Com} from '../common.js'
 import {h} from 'preact'
 import Emoji from './Emoji.js'
-import Time from './time.js'
 import QuoteMessage from './QuoteMessage.js'
+import {safeUrl} from '../util/url.js'
 
 export default class TextMessage extends Com {
 	constructor(props) {
@@ -14,13 +14,10 @@ export default class TextMessage extends Com {
 
 	renderTime() {
 		return null
-		if (!this.props.showTime && !this.props.isLast && !this.props.isFirst) return null
+	}
 
-		return (
-			<div>
-				<Time class='inline-time' time={sb.get(this.props.ev, 'created', sb.Date.now())} t={this.props.t} />
-			</div>
-		)
+	componentWillUnmount() {
+		sb.clearTimeout(this.focusTimeout)
 	}
 
 	focusSourceEventFromQuote(ev) {
@@ -29,23 +26,30 @@ export default class TextMessage extends Com {
 		let attachmentIndexField = sb.find(fields, (f) => f.key === 'attachment_index')
 		let attachmentIndex = sb.get(attachmentIndexField, 'value')
 		try {
-			attachmentIndex = JSON.parse(attachmentIndex)
+			attachmentIndex = sb.parseJSON(attachmentIndex)
 		} catch (err) {
 			attachmentIndex = undefined
 		}
 
 		if (attachmentIndex !== undefined) return // this is a quote for image or video, not for text
 		this.setState({focused: true})
-		if (this.focusTimeout) clearTimeout(this.focusTimeout)
-		this.focusTimeout = setTimeout(() => {
+		if (this.focusTimeout) sb.clearTimeout(this.focusTimeout)
+		this.focusTimeout = sb.setTimeout(() => {
 			this.setState({focused: false})
 		}, 3000)
 	}
 
 	render() {
-		var format = sb.get(this.props.ev, 'data.message.format', 'plaintext')
+		if (sb.get(this.props.ev, 'data.message.deleted')) {
+			let byType = sb.get(this.props.ev, 'by.type') === 'user' ? 'user' : 'agent'
+			return (
+				<div class={'message-' + byType + ' message-text--' + byType + ' message-text--deleted'}>
+					{this.props.t('recalled_message')}
+				</div>
+			)
+		}
 		let block = sb.get(this.props.ev, 'data.message.block')
-		if (block) return this.renderBlock(block)
+		if (block && !sb.isEmptyBlock(block)) return this.renderBlock(block)
 		return this.renderPlainText()
 	}
 
@@ -68,9 +72,11 @@ export default class TextMessage extends Com {
 				) {
 					url = '//' + url
 				}
+				url = safeUrl(url)
+				if (!url) return tag.text
 
 				return (
-					<a class='text-message-link' href={url} target='_blank' onClick={(e) => this.props.onLink(e, url)}>
+					<a class='text-message-link' href={url} target='_blank' rel='noopener noreferrer' onClick={(e) => this.props.onLink && this.props.onLink(e, url)}>
 						{tag.text}
 					</a>
 				)
@@ -91,17 +97,12 @@ export default class TextMessage extends Com {
 		})
 
 		if (sb.size(tags) === 0) return null
-		let isDeleted = sb.get(this.props.ev, 'data.message.deleted')
 
 		let attachments = sb.get(this.props.ev, 'data.message.attachments', [])
 		let quote = sb.find(attachments, (att) => att.type === 'quote')
 
 		if (byType === 'agent') {
 			let cls = 'message-agent message-text--agent'
-			if (isDeleted) {
-				tags = this.props.t('recalled_message')
-				cls += ' message-text--deleted'
-			}
 			if (this.state.focused) cls += ' just-focused'
 
 			return (
@@ -138,7 +139,7 @@ export default class TextMessage extends Com {
 		if (byType === 'agent') {
 			return (
 				<div class='message-agent message-text--agent' title={t}>
-					<Block block={block} onLink={this.props.onLink} textMessage />
+					<Block block={block} onLink={this.props.onLink} store={this.props.store} t={this.props.t} textMessage />
 					{this.renderTime()}
 				</div>
 			)
@@ -147,7 +148,7 @@ export default class TextMessage extends Com {
 		if (this.props.ev._error) msgcls += ' message-user--error'
 		return (
 			<div class={msgcls} title={t}>
-				<Block block={block} onLink={this.props.onLink} textMessage />
+				<Block block={block} onLink={this.props.onLink} store={this.props.store} t={this.props.t} textMessage />
 			</div>
 		)
 	}