@subiz/widget-v4 4.0.92 → 4.0.94

package/src/chatbox/OrderAttachments.js

@@ -15,12 +15,15 @@ export default class ProductAttachments extends Com {
 		if (orders.length === 0) return null
 
 		let $orders = sb.map(orders, (order, index) => {
+			sb.calcOrderTotal(order)
 			let $note = null
 			if (order.note) {
 				$note = (
 					<div>
 						<div class='order_attachment__label'>{this.props.t('note')}</div>
-						<div class='order_attachment__text_truncate'>{order.note}</div>
+						<div class='order_attachment__note' title={order.note}>
+							{order.note}
+						</div>
 					</div>
 				)
 			}
@@ -38,11 +41,16 @@ export default class ProductAttachments extends Com {
 									<img
 										class='order_attachment__product_img'
 										alt={'' + sb.get(product, 'id')}
-										src={sb.get(product, 'images.0', require('../../assets/img/default.jpg'))}
+										src={sb.get(product, 'image', require('../../assets/img/default.jpg'))}
 									/>
 									<div style='overflow: hidden !important;'>
-										<div class='order_attachment__product_name'>{product.name}</div>
-										<div class='order_attachment__product_desc'>{product.description || product.long_description}</div>
+										<div
+											class='order_attachment__product_name'
+											title={this.props.t.i18n(product.i18n_name) || product.name}
+										>
+											{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'>
 											{this.props.t('qty')} {item.quantity}&nbsp;·&nbsp;{sb.formatCurrency(product.price)}
 										</div>
@@ -56,17 +64,15 @@ export default class ProductAttachments extends Com {
 
 			let $total = (
 				<div class='order_attachment__footer'>
-					<div>{this.props.t('total')}</div>{' '}
-					<div>
-						<b>{sb.formatCurrency(order.total)}</b>
+					<div class='d-flex align-items-center justify-content-between'>
+						<div>{this.props.t('total')}</div>{' '}
+						<div>
+							<b class='order_attachment__total'>{sb.formatCurrency(order.total)}</b>
+						</div>
 					</div>
 				</div>
 			)
 
-			let addr = sb.get(order, 'shipping.address', {})
-			let fulladdr = [addr.street, addr.ward, addr.district, addr.region, addr.country].filter((a) => a).join(', ')
-			let address = fulladdr
-
 			let phoneattr = sb.find(sb.get(order, 'user.attributes', []), (attr) => attr.key === 'phones') || {
 				key: 'phones',
 				text: '',
@@ -76,29 +82,116 @@ export default class ProductAttachments extends Com {
 			if (phone) phone = this.props.t('phn') + ': ' + phone
 
 			let $shipto = null
-			if (address || phone) {
+			if (sb.displayOrderShippingAddress(order) || phone) {
 				$shipto = (
 					<div>
 						<div class='order_attachment__label'>{this.props.t('ship_to')}</div>
-						<div class='order_attachment__text_truncate'>{address}</div>
+						<div>{sb.displayOrderShippingAddress(order)}</div>
 						<div class='order_attachment__text_truncate'>{phone}</div>
 					</div>
 				)
 			}
 
+			let $beforeTax = null
+			if (order._discount_before_tax) {
+				$beforeTax = (
+					<div class='order_attachment__footer'>
+						<div class='d-flex align-items-center justify-content-between'>
+							<div class='order_attachment__label no_margin'>{this.props.t('subtotal_before_tax')}</div>{' '}
+							<div>{sb.formatCurrency(order._order_value)}</div>
+						</div>
+						<div class='d-flex align-items-center justify-content-between'>
+							<div class='order_attachment__label no_margin'>{this.props.t('discount_before_tax')}</div>{' '}
+							<div>-{sb.formatCurrency(order._discount_before_tax)}</div>
+						</div>
+					</div>
+				)
+			}
+
+			let $subtotal = (
+				<div class='d-flex align-items-center justify-content-between'>
+					<div class='order_attachment__label no_margin'>{this.props.t('subtotal')}</div>{' '}
+					<div style=''>{sb.formatCurrency(order.subtotal)}</div>
+				</div>
+			)
+			let $tax = null
+			if (order.total_tax) {
+				let taxname = ''
+				if (sb.size(order._taxM) === 1) {
+					let tax = sb.get(order._taxM, '0.tax', {})
+					if (tax.name && tax.percentage) taxname = `(${tax.name} ${Math.round(tax.percentage || 0) / 100}%)`
+				}
+				$tax = (
+					<div class='d-flex align-items-center justify-content-between'>
+						<div class='order_attachment__label no_margin'>
+							{this.props.t('tax')} {taxname}
+						</div>
+						<div style=''>{sb.formatCurrency(order.total_tax)}</div>
+					</div>
+				)
+			}
+			let $discount = null
+			if (order.discount_type === 'percentage' && order.discount_percentage) {
+				$discount = (
+					<div class='d-flex align-items-center justify-content-between'>
+						<div class='order_attachment__label no_margin'>
+							{this.props.t('discount_after_tax')} ({Math.round(order.discount_percentage / 100)}%)
+						</div>{' '}
+						<div style=''>-{sb.formatCurrency(order._computed_discount)}</div>
+					</div>
+				)
+			}
+			if (order.discount_type === 'amount' && order.discount_amount) {
+				$discount = (
+					<div class='d-flex align-items-center justify-content-between'>
+						<div class='order_attachment__label no_margin'>{this.props.t('discount_after_tax')}</div>{' '}
+						<div class='no-shrink'>-{sb.formatCurrency(order._computed_discount)}</div>
+					</div>
+				)
+			}
+			let $shipping = null
+			if (sb.get(order, 'shipping.nominal_fee')) {
+				$shipping = (
+					<div class='d-flex align-items-center justify-content-between'>
+						<div class='order_attachment__label no_margin'>{this.props.t('shipping_fee')}</div>{' '}
+						<div style=''>{sb.formatCurrency(sb.get(order, 'shipping.nominal_fee', 0))}</div>
+					</div>
+				)
+			}
+			let $adjustment = null
+			if (order.adjustment) {
+				$adjustment = (
+					<div class='d-flex align-items-center justify-content-between'>
+						<div class='order_attachment__label no_margin'>{order.adjustment_description}</div>{' '}
+						<div class='no-shrink'>{sb.formatCurrency(order.adjustment)}</div>
+					</div>
+				)
+			}
+
+			$subtotal = (
+				<div class='order_attachment__footer'>
+					{$subtotal}
+					{$tax}
+					{$shipping}
+					{$discount}
+					{$adjustment}
+				</div>
+			)
+			if (!$shipping && !$adjustment && !$discount && !$tax) {
+				$subtotal = null
+			}
+
 			return (
 				<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'>#{order.id}</span>
+						<span class='order_attachment__text_muted order_attachment__text_sm'>{sb.getOrderDisplayName(order)}</span>
 					</div>
 					{$products}
 					{$shipto}
-					<div>
-						<div class='order_attachment__label'>{this.props.t('payment')}</div>
-						<div>COD</div>
-					</div>
 					{$note}
+					{$beforeTax}
+					{$subtotal}
 					{$total}
 				</div>
 			)

package/src/lib.js

@@ -10,9 +10,9 @@ document.head.append($link)
 sb.preloadWebfonts(['Roboto'], [400, 500])
 
 class Widget {
-	constructor(ApiURL, FileURL, RealtimeURL, inmem, fake, agenttoken) {
+	constructor(ApiURL, FileURL, RealtimeURL, inmem, fake) {
 		this.domGate = new sb.Gate()
-		this.store = new Store(ApiURL, FileURL, RealtimeURL, inmem, fake, agenttoken)
+		this.store = new Store(ApiURL, FileURL, RealtimeURL, inmem, fake)
 
 		// expose store for debugging purpose
 		window.sbz_store = this.store
@@ -37,6 +37,28 @@ class Widget {
 		cb()
 	}
 
+	async cleanLogin(user_id, tokenGenerator) {}
+
+	async login(accid, user_id, tokenGenerator, $container) {
+		let user = await this.store.login(accid, user_id, tokenGenerator)
+
+		if (!$container) $container = document.body
+		this.pluginMgr = new PluginMgr(this, $container)
+
+		let clean = setInterval(() => {
+			// check if the dom is deleted
+			if ($container && $container.isConnected) return
+			this.pluginMgr.destroy()
+			clearInterval(clean)
+		}, 1000)
+		this.domGate.open()
+		return user
+	}
+
+	logout(accid) {
+		return this.store.logout()
+	}
+
 	async setAccount(id, $container, mask, cb) {
 		let outmask = await this.store.init(id, mask)
 		// add container to client site

package/src/store/api.js

@@ -13,6 +13,8 @@ function jsonifyTextPlain(param, done) {
 
 export default class {
 	constructor(ApiURL, FileURL) {
+		this.refreshLock = new sb.Mutex()
+
 		this.FileURL = FileURL
 		this.ApiURL = ApiURL
 		this.apireq = ajax
@@ -23,7 +25,19 @@ export default class {
 			.beforeHook(jsonifyTextPlain)
 			.setParser('json')
 			.beforeHook((param, done) => {
-				// attachAccessToken
+				if (this.token_generator) {
+					let user_id = this.profile_id
+					this.token_generator().then((token) => {
+						if (user_id != this.profile_id) return done(true) // outdated
+
+						if (!token) return done(false)
+						if (token == 'error') return done(false)
+						param.request = param.request.addQuery('x-access-token', token)
+						return done(true)
+					})
+					return
+				}
+
 				if (this.mask) param.request = param.request.addQuery('x-user-mask', this.mask)
 				return done(true)
 			})
@@ -40,6 +54,101 @@ export default class {
 		this.uid = obj.uid
 	}
 
+	async setTokenGenerator(accid, uid, tokenGenerator) {
+		this.tokensession = this.tokensession || 0
+		this.tokensession++
+		let tokensession = this.tokensession
+
+		if (!accid || !sb.startsWith(accid, 'ac')) return {error: 'invalid_account_id'}
+		if (!uid) return {error: 'invalid_user_id'}
+		if (typeof tokenGenerator !== 'function') return {error: 'invalid_token_generator'}
+
+		this.accid = accid
+		this.profile_id = uid
+		this.token_generator = async (force) => {
+			await this.refreshLock.lock()
+			if (tokensession != this.tokensession) {
+				this.refreshLock.unlock()
+				return // outdated
+			}
+			let age = (sb.Date.now() - (this.last_token_at || 0)) / 1000
+
+			// very good token, use this one
+			if (!force && this.last_token && age < 1800) {
+				this.refreshLock.unlock()
+				return this.last_token
+			}
+
+			if (!force && this.last_token && age < 3000) {
+				// the token is still good, but should get new one
+				if (this.token_generator)
+					setTimeout(async () => {
+						let token, err
+						try {
+							token = await tokenGenerator(uid)
+						} catch (e) {
+							err = e
+						}
+						if (tokensession != this.tokensession) {
+							this.refreshLock.unlock()
+							return // outdated
+						}
+
+						if (err) this.last_token = 'error'
+						else this.last_token = token
+						this.last_token_at = sb.Date.now()
+						this.refreshLock.unlock()
+					})
+				return this.last_token
+			}
+
+			// the token is outdated, must get new one
+			let token
+			let err
+			try {
+				token = await tokenGenerator(uid)
+			} catch (e) {
+				err = e
+			}
+
+			if (tokensession != this.tokensession) {
+				this.refreshLock.unlock()
+				return // outdated
+			}
+
+			if (err) this.last_token = 'error'
+			else this.last_token = token
+			this.last_token_at = sb.Date.now()
+			this.refreshLock.unlock()
+			return this.last_token
+		}
+
+		let outuser
+		for (let i = 0; true; i++) {
+			await this.token_generator(true)
+			if (tokensession != this.tokensession) break // outdated
+			outuser = await ajax
+				.setBaseUrl(this.ApiURL)
+				.withCredentials(true)
+				.addQuery('v', '6')
+				.addQuery('x-access-token', this.last_token)
+				.setParser('json')
+				.get(`/accounts/${accid}/users/${uid}`)
+			if (!sb.get(outuser, 'body.id')) {
+				let sleeptime = Math.min(2000 + i * 100, 120000)
+				await sb.sleep(sleeptime)
+				continue
+			}
+			break
+		}
+		if (outuser.error) {
+			if (sb.get(outuser.body.code)) return {error: outuser.body.code}
+			return outuser
+		}
+		this.uid = outuser.body.id
+		return outuser.body
+	}
+
 	listConversations = (_) =>
 		this.apireq
 			.addQuery('user_id', this.uid)
@@ -119,26 +228,6 @@ export default class {
 
 	getChallenge = (accid) => this.apireq.post(`/accounts/${accid}/scrypt-challenges`)
 
-	async createAgentUser(agenttoken) {
-		for (var i = 0; i < 10; i++) {
-			let {body, error} = await ajax
-				.setBaseUrl(this.ApiURL)
-				.setContentType('text/plain')
-				.beforeHook(jsonifyTextPlain)
-				.setParser('json')
-				.addQuery('x-access-token', agenttoken)
-				.post(`/agent-users`)
-			if (error) {
-				await sb.sleep(1000)
-				continue
-			}
-
-			let userid = body ? body.id || '' : ''
-			if (!userid) return ''
-			return body.account_id + '@' + userid
-		}
-	}
-
 	async createUser(accid) {
 		for (var i = 0; i < 10; i++) {
 			const {body: challenge} = await this.getChallenge(accid)

package/src/store/api_fake.js

@@ -16,11 +16,7 @@ const OK200 = Promise.resolve({code: 200})
 export default class {
 	constructor(ApiURL, FileURL) {
 		this.FileURL = FileURL
-		this.apireq = ajax
-			.setBaseUrl(ApiURL)
-			.setContentType('text/plain')
-			.beforeHook(jsonifyTextPlain)
-			.setParser('json')
+		this.apireq = ajax.setBaseUrl(ApiURL).setContentType('text/plain').beforeHook(jsonifyTextPlain).setParser('json')
 	}
 
 	// for faking data (optional for real api)
@@ -28,6 +24,10 @@ export default class {
 		this.agentid = agid
 	}
 
+	setTokenGenerator(accid, uid, tokenGenerator) {
+		this.accid = accid
+	}
+
 	setAuth(obj) {
 		this.accid = obj.accid
 		this.mask = obj.mask
@@ -66,7 +66,6 @@ export default class {
 	getChallenge = (accid) => OK200
 
 	createUser = (accid) => Promise.resolve({account_id: accid, id: 'usqzgtgfake', mask: 'fakemask'})
-	createAgentUser = (agenttoken) => Promise.resolve('fakemask')
 
 	time = (_) => Promise.resolve({code: 200, body: new sb.Date().toISOString()})
 	updateUser = (data) => OK200

package/src/store/store.js

@@ -15,8 +15,7 @@ const page_loaded = sb.Date.now()
 
 // available localstorage key mask, user, hasManuallyClosed, isopen, close_preview_at, lastview, bot_run_logs, plugin_run_logs
 export default class Store {
-	constructor(ApiURL, FileURL, RealtimeURL, inmem, fakeapi, agenttoken) {
-		this.agent_token = agenttoken
+	constructor(ApiURL, FileURL, RealtimeURL, inmem, fakeapi) {
 		this.g_sync = {}
 		this.forceDevice = null
 		this.forcePlugins = {}
@@ -318,18 +317,22 @@ export default class Store {
 	matchHasManuallyClosed = () => !!this.kv.match('hasManuallyClosed') // true if user has ever closed the widget
 	matchClosePreviewAt = () => this.kv.match('close_preview_at') || 0
 
-	sendPresence = sb.throttle(async () => {
-		await this.readyGate.entry()
-		if (!sb.get(this.kv.match('user'), 'id')) return // store not init
-		if (sb.isUserBanned(this.kv.match('user'))) return
-		return this.api.sendPresence(
-			this.device,
-			this.browserVisibility === 'visible' && document.hasFocus(),
-			this._currentViewingProduct.id,
-			this._currentViewingProduct.source_id,
-			this._currentViewingProduct.sku,
-		)
-	}, 1000)
+	sendPresence = sb.throttle(
+		async () => {
+			await this.readyGate.entry()
+			if (!sb.get(this.kv.match('user'), 'id')) return // store not init
+			if (sb.isUserBanned(this.kv.match('user'))) return
+			return this.api.sendPresence(
+				this.device,
+				this.browserVisibility === 'visible' && document.hasFocus(),
+				this._currentViewingProduct.id,
+				this._currentViewingProduct.source_id,
+				this._currentViewingProduct.sku,
+			)
+		},
+		1000, // dont send presence update too tight
+		{leading: false}, // dont send right after load. should send after content_view
+	)
 
 	now = () => sb.Date.now() + this.timeDiff // millisecond on server
 
@@ -354,9 +357,6 @@ export default class Store {
 		// trust cookie, remove localstorage
 		if (mask && localstorageMask && mask !== localstorageMask) this.clearBrowserData()
 
-		// use this mask
-		if (this.agent_token) mask = await this.api.createAgentUser(this.agent_token)
-
 		var userId = ''
 		if (mask) {
 			let parts = mask.split('@')
@@ -396,6 +396,36 @@ export default class Store {
 		return mask
 	}
 
+	async login(accid, user_id, tokenGenerator) {
+		let user = await this.api.setTokenGenerator(accid, user_id, tokenGenerator)
+		if (user.error) return user
+
+		this.clearBrowserData()
+		this.readyGate.close()
+		accid = (accid || '').trim()
+
+		this.g_sync = {}
+		this.new_visitor = false // for checking returning or new visitor
+
+		if (this.realtime) this.realtime.stop()
+		if (this.fake) this.realtime = new RealtimeFake()
+		else this.realtime = new Realtime(this.RealtimeURL, {getAccessToken: () => this.api.token_generator()})
+
+		this.realtime.onEvent(this.onWs.bind(this))
+		this.realtime.onInterrupted(() => this.reconnectWs(accid, user.id))
+
+		this.seenLoop()
+		await this.reconnect()
+		this.readyGate.open()
+		this.reconnectWs(accid, user.id)
+
+		return user
+	}
+
+	logout(user_id) {
+		this.api.setTokenGenerator(undefined, undefined, undefined)
+	}
+
 	seenQueue = [] // convoid will be seen
 	seenLoop() {
 		// periodically send seen

package/src/util/index.js

@@ -18,6 +18,7 @@ import * as common from './common.js'
 sb = Object.assign(sb, common)
 
 sb.Gate = require('./gate.js').default
+sb.Mutex = require('./mutex.js').default
 
 var op = require('./op.js')
 sb.get = op.get
@@ -31,4 +32,7 @@ sb = Object.assign(sb, extractor)
 import * as campaign from './campaign.js'
 sb = Object.assign(sb, campaign)
 
+import * as order from './order.js'
+sb = Object.assign(sb, order)
+
 export default sb

package/src/util/mutex.js

@@ -0,0 +1,27 @@
+export default class Mutex {
+	constructor() {
+		this.isOpen = true
+		this.cbs = []
+	}
+
+	_check() {
+		if (!this.isOpen) return
+		let cb = this.cbs.pop()
+		if (!cb) return
+		this.isOpen = false
+		cb()
+	}
+
+	lock() {
+		return new Promise((resolve) => {
+			this.cbs.push(resolve)
+			this._check()
+		})
+	}
+
+	unlock() {
+		if (this.isOpen) return
+		this.isOpen = true
+		this._check()
+	}
+}

package/src/util/order.js

@@ -0,0 +1,120 @@
+const op = require('./op.js')
+const common = require('./common')
+op.filter = common.filter
+op.map = common.map
+op.each = common.each
+op.size = common.size
+op.find = common.find
+
+export 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)
+}
+
+export function getOrderDisplayName(order = {}) {
+	return order.number || order.id || ''
+}
+
+export 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
+}
+
+export 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
+}