@subiz/widget-v4 4.1.70 → 4.1.72

package/src/chatbox/OrderAttachments.js

@@ -15,7 +15,7 @@ export default class ProductAttachments extends Com {
 		if (orders.length === 0) return null
 
 		let $orders = sb.map(orders, (order, index) => {
-			sb.calcOrderTotal(order)
+			calcOrderTotal(order)
 			let $note = null
 			if (order.note) {
 				$note = (
@@ -50,7 +50,7 @@ export default class ProductAttachments extends Com {
 										>
 											{this.props.t.i18n(product.i18n_name) || product.name}
 										</div>
-										<div class='order_attachment__product_desc'>{sb.getProductPropName(product, ' / ')}</div>
+										<div class='order_attachment__product_desc'>{getProductPropName(product, ' / ')}</div>
 										<div class='order_attachment__product_desc'>
 											{this.props.t('qty')} {item.quantity}&nbsp;·&nbsp;{sb.formatCurrency(product.price)}
 										</div>
@@ -82,11 +82,11 @@ export default class ProductAttachments extends Com {
 			if (phone) phone = this.props.t('phn') + ': ' + phone
 
 			let $shipto = null
-			if (sb.displayOrderShippingAddress(order) || phone) {
+			if (displayOrderShippingAddress(order) || phone) {
 				$shipto = (
 					<div>
 						<div class='order_attachment__label'>{this.props.t('ship_to')}</div>
-						<div>{sb.displayOrderShippingAddress(order)}</div>
+						<div>{displayOrderShippingAddress(order)}</div>
 						<div class='order_attachment__text_truncate'>{phone}</div>
 					</div>
 				)
@@ -185,7 +185,7 @@ export default class ProductAttachments extends Com {
 				<div class={`order_attachment order_attachment__${byType}`}>
 					<div class='order_attachment__header'>
 						{this.props.t('order')}
-						<span class='order_attachment__text_muted order_attachment__text_sm'>{sb.getOrderDisplayName(order)}</span>
+						<span class='order_attachment__text_muted order_attachment__text_sm'>{getOrderDisplayName(order)}</span>
 					</div>
 					{$products}
 					{$shipto}
@@ -199,3 +199,116 @@ export default class ProductAttachments extends Com {
 		return $orders
 	}
 }
+
+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 names = []
+	op.each(multiPropsOptions, (option) => {
+		let prop = op.find(props, (prop) => prop.key === option.key) || {}
+		if (prop.value) names.push(prop.value)
+	})
+	return names.join(seperator)
+}
+
+function getOrderDisplayName(order = {}) {
+	return order.number || order.id || ''
+}
+
+function displayOrderShippingAddress(order, isShorten) {
+	let addr = op.get(order, 'shipping.address', {})
+	let fulladdr = [addr.address, addr.ward, addr.district, addr.province]
+		.filter((a) => a)
+		.join(', ')
+		.trim()
+	if (isShorten) fulladdr = shortenAddr(fulladdr)
+	return fulladdr
+}
+
+function shortenAddr(str) {
+	str = str || ''
+	str = str.replace(/Hà Nội/gi, 'HN')
+	str = str.replace(/Hồ Chí Minh/gi, 'HCM')
+	str = str.replace(/Thành Phố/gi, 'TP')
+
+	return str
+}
+
+function calcOrderTotal(order) {
+	// compute subtotal first, since it doesn't depend on tax or gloal discount
+	let subtotal = 0
+	let beforeTaxDiscount = 0
+	let ordervalue = 0
+	op.map(order.items, (item) => {
+		if (!item.product) return 0
+		let price = op.get(item, 'product.price', 0) * (item.quantity || 0)
+		ordervalue += price
+
+		// some products that are discounted before tax
+		// the discount amount is calculated in product price for
+		// simpler calucation in future
+		if (item.discount_type == 'percentage') {
+			if (item.discount_percentage > 0) {
+				beforeTaxDiscount += (price * item.discount_percentage) / 10000
+				price = price * (1 - (item.discount_percentage || 0) / 10000)
+			}
+		} else if (item.discount_type == 'amount') {
+			if (item.discount_amount > 0) {
+				beforeTaxDiscount += item.discount_amount
+				price = price - (item.discount_amount || 0)
+				if (price <= 0) price = 0
+			}
+		}
+		item.total = price
+		subtotal += price
+	})
+
+	// TAX
+	let taxM = {}
+	op.map(order.items, (item, i) => {
+		if (!item.product) return
+		let tax = item.product.tax
+		if (!tax) return
+		if (!tax.id) return
+		let taxprice = (item.total * tax.percentage) / 10000
+		item.total_tax = taxprice
+		taxM[i] = {tax: tax, taxprice: taxprice}
+	})
+
+	let totaltax = 0
+	op.map(taxM, (t) => (totaltax += t.taxprice))
+
+	let computed_discount = 0
+	if (order.discount_type == 'percentage' && order.discount_percentage > 0) {
+		computed_discount = ((subtotal + totaltax) * order.discount_percentage) / 10000
+	} else if (order.discount_type == 'amount') {
+		computed_discount = order.discount_amount || 0
+	}
+
+	// SHIP
+	let shippingfee = op.get(order, 'shipping.nominal_fee', 0)
+	if (shippingfee > 0) {
+		if (op.get(order, 'shipping.tax.id')) {
+			let tax = order.shipping.tax
+			let taxprice = shippingfee * (tax.percentage / 10000)
+			taxM['ship'] = {tax: tax, taxprice: taxprice}
+			order.shipping.total_tax = taxprice
+		}
+	}
+
+	totaltax = 0
+	op.map(taxM, (t) => (totaltax += t.taxprice))
+	let total = subtotal + totaltax - computed_discount + shippingfee
+
+	// add adjustment
+	total += order.adjustment || 0
+	if (total < 0) total = 0
+	order.subtotal = subtotal
+	order._computed_discount = computed_discount
+	order._taxM = taxM
+	order.total = total
+	order.total_tax = totaltax
+	order._discount_before_tax = beforeTaxDiscount
+	order._order_value = ordervalue
+}

package/src/chatbox/PoweredBy.js

@@ -1,26 +1,18 @@
 var logo = require('../../assets/img/subiz-mono.svg')
-
-import {Com} from '../common.js'
 import {h} from 'preact'
-export default class PoweredBy extends Com {
-	constructor(props) {
-		super(props)
-	}
-
-	render() {
-		// dont render onmobile
-		if (this.props.store.isMobile()) return null
-		let user = this.props.store.matchUser() || {}
-		var link = `https://subiz.com.vn/?utm_source=${
-			window.location.host || `id-${user.account_id}`
-		}&utm_medium=widget&utm_campaign=widget_referral`
+export default function PoweredBy(props) {
+	// dont render on mobile
+	if (props.store.isMobile()) return null
+	let user = props.store.matchUser() || {}
+	var link = `https://subiz.com.vn/?utm_source=${
+		window.location.host || `id-${user.account_id}`
+	}&utm_medium=widget&utm_campaign=widget_referral`
 
-		return (
-			<div class='poweredby'>
-				<a href={link} class='poweredby--text' target='_blank' title='Subiz'>
-					<img width='14' height='10' class='poweredby--subiz-logo' src={logo} alt='power by subiz' /> Subiz
-				</a>
-			</div>
-		)
-	}
+	return (
+		<div class='poweredby'>
+			<a href={link} class='poweredby--text' target='_blank' title='Subiz'>
+				<img width='14' height='10' class='poweredby--subiz-logo' src={logo} alt='powerred by subiz' /> Subiz
+			</a>
+		</div>
+	)
 }

package/src/chatbox/Rating.js

@@ -121,7 +121,7 @@ export default class Rating extends Com {
 		let foundUser = false
 		sb.map(this.props.store.listEvents(this.props.cid), (ev) => {
 			if (!ev || !ev.by) return
-			if (ev.by.type == 'user') foundUser = true
+			if (ev.by.type == 'user' && ev.type == 'message_sent') foundUser = true
 			if (ev.type === 'conversation_state_updated' && sb.get(ev, 'data.conversation.state') === 'ended') {
 				ended = ev
 			}

package/src/chatbox/TextMessage.js

@@ -42,7 +42,6 @@ export default class TextMessage extends Com {
 		})
 
 		if (sb.size(tags) === 0) return null
-
 		if (byType === 'agent') {
 			return <div class='message-agent message-text--agent'>{tags}</div>
 		}
@@ -63,19 +62,6 @@ export default class TextMessage extends Com {
 			if (insert.dynamicField) {
 				return sb.get(insert, 'dynamicField.text', '')
 			}
-			if (insert.mention) {
-				if (insert.mention.id == '*' || insert.mention.id == 'all') {
-					return <span class='mention'>@{this.$t('all')}</span>
-				}
-
-				let ag = store.matchAgent(insert.mention.id)
-				let name = sb.getAgentDisplayName(ag, insert.mention.fullname)
-				return (
-					<span class='mention' data-agent-id={ag.id} data-agent-fullname={name}>
-						@{name}
-					</span>
-				)
-			}
 			if (insert.emoji) return <Emoji emojiCode={`:${insert.emoji}:`} />
 			if (typeof insert === 'string') {
 				let $tags = sb.extractText(insert).map((tag, i) => {

package/src/chatbox/VideoAttachments.js

@@ -20,7 +20,7 @@ export default class VideoAttachments extends Com {
 
 		var $videos = sb.map(videos, (video, index) => {
 			return (
-				<div class={`video-attachment video-attachment--${byType}`}>
+				<div key={index} class={`video-attachment video-attachment--${byType}`}>
 					<video
 						class='video-attachment__video'
 						src={this.props.store.replaceFileUrl(video.url)}

package/src/chatbox/Widget.js

@@ -10,7 +10,9 @@ import MessageInput from './MessageInput.js'
 import Events from './Events.js'
 import Typing from './Typing.js'
 import Rating from './Rating.js'
-import Order from './Order.js'
+// import Order from './Order.js'
+let Order = false
+const LoadOrder = () => import(/*webpackChunkName: "Order" */ './Order.js')
 import ListField from './ListField.js'
 
 const defaultAvatar = 'https://file-subiz.com/fiqoahedjbgwclpouoml-avatar_default_baa8a1d7.png'
@@ -426,15 +428,17 @@ export default class Widget extends Com {
 			let $field = null
 			var errclass = field.error ? 'input--error' : ''
 			if (field.type === 'text') {
-				if (key === 'question') {
+				if (key == 'question' || sb.get(field, 'def.multiple_line')) {
 					$field = (
 						<textarea
 							class='form-control'
 							ref={(ref) => {
 								this['form_' + encode(key)] = ref
 							}}
+							id={'form_' + encode(key)}
 							value={field.value || ''}
 							onInput={(e) => this.onInputChange(key, e.target.value)}
+							onChange={(e) => this.onInputChange(key, e.target.value)}
 							row='4'
 							class='form-control'
 						></textarea>
@@ -445,23 +449,10 @@ export default class Widget extends Com {
 					$field = this.renderRadioField(field)
 				} else if (sb.get(field, 'def.select') === 'dropdown') {
 					$field = this.renderDropdownField(field)
-				} else if (sb.get(field, 'def.multiple_line')) {
-					$field = (
-						<textarea
-							class='form-control'
-							ref={(ref) => {
-								this['form_' + encode(key)] = ref
-							}}
-							value={field.value || ''}
-							onInput={(e) => this.onInputChange(key, e.target.value)}
-							onChange={(e) => this.onInputChange(key, e.target.value)}
-							row='4'
-							class='form-control'
-						></textarea>
-					)
 				} else {
 					$field = (
 						<input
+							id={'form_' + encode(key)}
 							value={field.value || ''}
 							onInput={(e) => this.onInputChange(key, e.target.value)}
 							onChange={(e) => this.onInputChange(key, e.target.value)}
@@ -476,6 +467,7 @@ export default class Widget extends Com {
 			} else if (field.type === 'number') {
 				$field = (
 					<input
+						id={'form_' + encode(key)}
 						value={field.value}
 						onInput={(e) => this.onInputChange(key, e.target.value)}
 						ref={(ref) => {
@@ -537,6 +529,7 @@ export default class Widget extends Com {
 			} else if (field.type === 'datetime') {
 				$field = (
 					<input
+						id={'form_' + encode(key)}
 						value={field.value}
 						onInput={(e) => this.onInputChange(key, e.target.value)}
 						class={`form-control ${errclass}`}
@@ -558,10 +551,10 @@ export default class Widget extends Com {
 			if (field.label) label = field.label
 			return (
 				<div key={'form_' + encode(key)}>
-					<div class='label'>
+					<label class='label' for={'form_' + encode(key)}>
 						{label}
 						{field.is_required ? <span class='ml-1 red'>*</span> : ''}
-					</div>
+					</label>
 					{field.error ? <div class='form-control--valid-input--error'>{field.error}</div> : ''}
 					{$field}
 				</div>
@@ -824,7 +817,10 @@ export default class Widget extends Com {
 		if (noschemeurl.startsWith('widget.subiz.com.vn/orders/')) {
 			let orderid = noschemeurl.substr('widget.subiz.com.vn/orders/'.length)
 			orderid = orderid.split('/')[0]
-			this.setState({showOrder: true, order_id: orderid})
+			sb.setTimeout(async () => {
+				if (!Order) Order = (await LoadOrder()).default
+				this.setState({showOrder: true, order_id: orderid})
+			})
 			// display order instead
 			e.preventDefault()
 			return
@@ -935,7 +931,7 @@ export default class Widget extends Com {
 				<div class='d-flex flex-row'>
 					<div class='convo-list--convo-name'>{name}</div>
 					<div class='convo-list--convo-time'>
-						<Time ago time={time} key={time} short />
+						<Time ago time={time} t={this.props.t} short />
 					</div>
 				</div>
 

package/src/chatbox/time.js

@@ -18,21 +18,28 @@ export default class Time extends Com {
 
 	updateTime() {
 		var t = ''
+		let forceLocale = ''
+		if (this.props.t) {
+			if (this.props.t.locale && typeof this.props.t.locale === 'function') {
+				forceLocale = this.props.t.locale()
+			}
+		}
 		if (this.props.ago) {
 			if (this.props.short) {
 				// more than 10 days
-				if (Math.abs(this.props.time - new sb.Date().getTime()) > 86400000 * 10) {
-					let tim = new sb.Date(this.props.time)
-					let tzyear = tim.getFullYear()
-					let locale = sb.get(navigator, 'languages.0', 'en-US')
-					let tzmonthname = tim.toLocaleDateString(locale, {month: 'short'})
-					let tzdate = tim.getDate()
-					t = tzdate + ' ' + tzmonthname + ' ' + tzyear
-				}
+				//if (Math.abs(this.props.time - new sb.Date().getTime()) > 86400000 * 10) {
+					//let tim = new sb.Date(this.props.time)
+					//let tzyear = tim.getFullYear()
+					//let locale = sb.get(navigator, 'languages.0', 'en-US')
+					//if (forceLocale) locale = forceLocale
+					//let tzmonthname = tim.toLocaleDateString(locale, {month: 'short'})
+					//let tzdate = tim.getDate()
+					//t = tzdate + ' ' + tzmonthname + ' ' + tzyear
+				//}
 			}
 
-			if (!t && this.props.time > 0) t = ago(this.props.time, new sb.Date().getTime())
-		} else t = sb.shortTime(this.props.time, this.props.tzoffset)
+			if (!t && this.props.time > 0) t = ago(this.props.time, new sb.Date().getTime(), this.props.t)
+		} else t = sb.shortTime(this.props.time, this.props.tzoffset, Date.now(), forceLocale)
 
 		if (this.props.uppercase) t = t.toUpperCase()
 
@@ -47,24 +54,47 @@ export default class Time extends Com {
 	}
 
 	render() {
-		return <span style={this.props.style}>{this.state.t}</span>
+		let locale = sb.get(navigator, 'languages.0', 'en-US')
+		if (this.props.t) {
+			if (this.props.t.locale && typeof this.props.t.locale === 'function') {
+				locale = this.props.t.locale()
+			}
+		}
+		let title = new Date(this.props.time).toLocaleString(locale)
+		return <span style={this.props.style} title={title}>{this.state.t}</span>
 	}
 }
 
-function ago(timeA, timeB) {
-	const relObj = {
-		s: '%d s',
-		m: '1m',
-		mm: '%dm',
-		h: '1h',
-		hh: '%dh',
-		d: '1d',
-		dd: '%dd',
-		M: '1M',
-		MM: '%M',
-		y: '1y',
-		yy: '%dy',
+function ago(timeA, timeB, t) {
+	let relObj = {
+		s: '%d sec',
+		m: '1 min',
+		mm: '%d mins',
+		h: '1 hour',
+		hh: '%d hours',
+		d: '1 day',
+		dd: '%d days',
+		M: '1 month',
+		MM: '%d months',
+		y: '1 year',
+		yy: '%d years',
 	}
+	if (t) {
+		relObj = {
+			s: `%d ${t('second_short')}`,
+			m: `1 ${t('minute_short')}`,
+			mm: `%d ${t('minutes_short')}`,
+			h: `1 ${t('hour_short')}`,
+			hh: `%d ${t('hours_short')}`,
+			d: `1 ${t('day_short')}`,
+			dd: `%d ${t('days_short')}`,
+			M: `1 ${t('month_short')}`,
+			MM: `%d ${t('months_short')}`,
+			y: `1 ${t('year_short')}`,
+			yy: `%d ${t('years_short')}`,
+		}
+	}
+
 	const loc = relObj
 	const T = [
 		{l: 's', r: 44, d: 1000},

package/src/lib.js

@@ -3,11 +3,11 @@ 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;600&display=swap'
+$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, 600])
+sb.preloadWebfonts(['Inter'], [400, 500])
 
 class Widget {
 	constructor(ApiURL, FileURL, RealtimeURL, inmem, fake) {

package/src/order/icon.js

@@ -2,11 +2,11 @@ import sb from '../util/index.js'
 let promiseMainCSS = (() => import(/*webpackChunkName: "main-css" */ '../chatbox/css.js'))()
 
 var $link = document.createElement('link')
-$link.href = 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap'
+$link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap'
 $link.rel = 'stylesheet'
 document.head.append($link)
 
-sb.preloadWebfonts(['Roboto'], [400, 500])
+sb.preloadWebfonts(['Inter'], [400, 500])
 
 import Time from '../chatbox/time.js'
 let defaultAvatar = require('../../assets/img/default_avatar.png')

package/src/order/index.js

@@ -26,11 +26,11 @@ function getUrlParameter(name) {
 }
 
 var $link = document.createElement('link')
-$link.href = 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap'
+$link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap'
 $link.rel = 'stylesheet'
 document.head.append($link)
 
-sb.preloadWebfonts(['Roboto'], [400, 500])
+sb.preloadWebfonts(['Inter'], [400, 500])
 
 async function load() {
 	let store = new Store(config.ApiURL, config.FileURL, config.RealtimeURL, true)

package/src/plugin.js

@@ -2,7 +2,8 @@ import sb from './util/index.js'
 import * as common from './common.js'
 import {h, render, createRef} from 'preact'
 
-const LoadChatbox = () => import(/*webpackChunkName: "chatbox" */ './chatbox/main.js')
+// const LoadChatbox = () => import(/*webpackChunkName: "chatbox" */ './chatbox/main.js')
+import Chatbox from './chatbox/main.js'
 const LoadContact = () => import(/*webpackChunkName: "contact" */ './contact/contact.js')
 const LoadPopup = () => import(/*webpackChunkName: "popup" */ './popup/popup.js')
 const LoadNotif = () => import(/*webpackChunkName: "notif" */ './notif/notif.js')
@@ -54,7 +55,7 @@ function Plugin(plugin, store, $container, lib) {
 
 	var _ref = createRef()
 
-	let Chatbox = null
+	// let Chatbox = null
 	let Popup = null
 	let Contact = null
 	let Notif = null
@@ -70,7 +71,7 @@ function Plugin(plugin, store, $container, lib) {
 		if (_destroy) return
 		if (!$div) return
 		if (plugin.type === 'chatbox') {
-			if (!Chatbox) Chatbox = (await LoadChatbox()).default
+			// if (!Chatbox) Chatbox = (await LoadChatbox()).default
 			render(<Chatbox destroy={_destroy} plugin={plugin} store={store} ref={_ref} t={this.t} />, $div)
 		}
 

package/src/store/api.js

@@ -239,20 +239,7 @@ export default class {
 
 	sendTyping = (cid) => this.apireq.post(`/accounts/${this.accid}/conversations/${cid}/typing`)
 
-	sendLostFocus = (device, productid, source_id, sku) =>
-		this.sendEvent({
-			by: {id: this.uid, device: device},
-			type: 'presence_updated',
-			data: {
-				presence: {
-					viewing_product_sku: sku,
-					viewing_product_source_id: source_id,
-					viewing_product_id: productid,
-					pinged: sb.Date.now(),
-					is_focused: false,
-				},
-			},
-		})
+	sendLostFocus = () => this.apireq.post(`/accounts/${this.accid}/focuses/${this.uid}/delete`)
 
 	sendContentView(device, pageUrl, pageTitle, id, source_id, sku) {
 		if (!id) id = undefined // dont accept ''

package/src/store/store.js

@@ -364,15 +364,7 @@ export default class Store {
 			if (!this._track_page_view) return
 
 			let hasfocus = this.browserVisibility === 'visible' && document.hasFocus()
-			if (!hasfocus) {
-				this.api.sendLostFocus(
-					this.device,
-					this._currentViewingProduct.id,
-					this._currentViewingProduct.source_id,
-					this._currentViewingProduct.sku,
-				)
-				return
-			}
+			if (!hasfocus) return this.api.sendLostFocus()
 
 			this.api.sendContentView(
 				this.device,