@subiz/widget-v4 4.0.61 → 4.0.66

package/src/order/scratch

@@ -0,0 +1,211 @@
+renderShipping(order) {
+		let editmode = false
+		if (!order.status || order.status == 'new') {
+			editmode = !order.user_confirmation
+		}
+
+		let user = store.matchUser()
+		if (editmode) {
+			let addresses = store.matchShippingAddresses()
+
+			let $addrs = sb.map(addresses, (addr) => {
+				let fulladdr = [addr.street, addr.ward, addr.district, addr.region, addr.country].filter((a) => a).join(', ')
+				let cls = 'order__card'
+				if (this.state.shipping_address === addr.id) cls += ' order__card__active'
+				let $phone = null
+				if (addr.phone) {
+					$phone = (
+						<div style='margin-bottom:5px !important; '>
+							<img class='order_ship_icon' src={require('../../assets/img/phone.svg')} /> {addr.phone}
+						</div>
+					)
+				}
+				return (
+					<div class={cls}>
+						<div style='width: 100% !important;'>
+							<div class='radio'>
+								<input
+									type='radio'
+									id={'shipping_addr.' + addr.id}
+									onInput={(e) => this.onChangeShippingAddress(addr.id)}
+									name='shipping_address'
+									checked={this.state.shipping_address === addr.id}
+								/>
+								<label class='radio--label ml-2' for={'shipping_addr.' + addr.id}>
+									Giao hàng tới <b>{addr.fullname}</b>
+								</label>
+								<div class='radio--check'>
+									<div class='inside'></div>
+								</div>
+							</div>
+							<div class='muted mt-1' style='margin-left: 30px !important;'>
+								{$phone}
+								<div>
+									<img class='order_ship_icon' src={require('../../assets/img/home.svg')} /> {fulladdr}
+								</div>
+							</div>
+						</div>
+					</div>
+				)
+			})
+
+			let provinces = sb.map(this.state.provinces, (province) => ({id: province.id, name: province.province}))
+			let districts = sb.map(this.state.districts, (district) => ({id: district.id, name: district.district}))
+			let wards = sb.map(this.state.wards, (ward) => ({id: ward.id, name: ward.ward}))
+			let cls = 'order__card'
+			let $new = null
+			if (this.state.shipping_address === 'new') {
+				cls += ' order__card__active'
+				$new = (
+					<div style='margin-left: 0px !important;'>
+						<div class='d-flex'>
+							<div class='mr-2' style='flex: 1 !important;'>
+								<div class='order_form_label'>{this.props.t('fullname')}</div>
+								<input type='text' class='form-control' onInput={this.onChangeFullname} value={this.state.fullname} />
+							</div>
+							<div class='ml-2' style='flex: 1 !important;'>
+								<div class='order_form_label'>{this.props.t('phone')}</div>
+								<input type='text' class='form-control' onInput={this.onChangePhone} value={this.state.phone} />
+							</div>
+						</div>
+
+						<div class='' style='width: 100% !important'>
+							<div class='order_form_label'>{this.props.t('address')}</div>
+							<input type='text' class='form-control' onInput={this.onChangeAddress} value={this.state.address} />
+						</div>
+
+						<div>
+							<div class='order_form_label'>{this.props.t('province')}</div>
+							<DropdownSelect
+								width='180'
+								has_search
+								loading={this.state.loadProvince}
+								full
+								items={provinces}
+								selected={this.state.selectedProvince}
+								onSelect={this.onSelectProvince}
+							/>
+						</div>
+						<div>
+							<div class='order_form_label'>{this.props.t('district')}</div>
+							<DropdownSelect
+								width='180'
+								full
+								selected={this.state.selectedDistrict}
+								has_search
+								onSelect={this.onSelectDistrict}
+								loading={this.state.loadDistrict}
+								items={districts}
+							/>
+						</div>
+
+						<div class='order_form_label'>{this.props.t('ward')}</div>
+						<DropdownSelect
+							width='180'
+							selected={this.state.selectedWard}
+							full
+							has_search
+							onSelect={this.onSelectWard}
+							loading={this.state.loadWard}
+							items={wards}
+						/>
+					</div>
+				)
+			}
+
+			$addrs.push(
+				<div class={cls}>
+					<div style='width: 100% !important;'>
+						<div class='radio'>
+							<input
+								type='radio'
+								name='shipping_address'
+								id={'shipping_addr.new'}
+								onInput={(e) => this.onChangeShippingAddress('new')}
+								checked={this.state.shipping_address === 'new'}
+							/>
+							<label class='radio--label ml-2' for={'shipping_addr.new'}>
+								<b>Giao hàng tới địa chỉ khác</b>
+							</label>
+							<div class='radio--check'>
+								<div class='inside'></div>
+							</div>
+						</div>
+						{$new}
+					</div>
+				</div>,
+			)
+
+			let shopcls = 'order__card'
+			let $shop = null
+			if (this.state.shipping_address === 'shop') {
+				shopcls += ' order__card__active'
+				$shop = (
+					<div>
+						<div class='d-flex'>
+							<div class='mr-2' style='flex: 3 !important;'>
+								<div class='order_form_label'>{this.props.t('fullname')}</div>
+								<input type='text' class='form-control' onInput={this.onChangeFullname} value={this.state.fullname} />
+							</div>
+							<div class='ml-2' style='flex: 2 !important;'>
+								<div class='order_form_label'>{this.props.t('phones')}</div>
+								<input type='text' class='form-control' onInput={this.onChangePhone} value={this.state.phone} />
+							</div>
+						</div>
+						<div>
+							<div class='order_form_label'>{this.props.t('email')}</div>
+							<input type='text' class='form-control' onInput={this.onChangeEmail} value={this.state.email} />
+						</div>
+					</div>
+				)
+			}
+
+			$addrs.unshift(
+				<div class={shopcls}>
+					<div style='width: 100% !important;'>
+						<div class='radio'>
+							<input
+								type='radio'
+								name='shipping_address'
+								id={'shipping_addr.shop'}
+								onInput={(e) => this.onChangeShippingAddress('shop')}
+								checked={this.state.shipping_address === 'shop'}
+							/>
+							<label class='radio--label ml-2' for={'shipping_addr.shop'}>
+								<b>Nhận hàng tại shop</b>
+							</label>
+							<div class='radio--check'>
+								<div class='inside'></div>
+							</div>
+						</div>
+						{$shop}
+					</div>
+				</div>,
+			)
+			// let $oldaddress = sb.map()
+
+			return (
+				<div class='order_section'>
+					<div class='order_label'>{this.props.t('ship_to')}</div>
+					<div class='form'>{$addrs}</div>
+				</div>
+			)
+		}
+
+		let fulladdr = sb.get(order, 'shipping.address.full_address')
+		if (!fulladdr) return null
+		let $addr = fulladdr ? <div>{fulladdr}</div> : <i class='i muted'>Chưa có địa chỉ giao hàng</i>
+
+		return (
+			<div class='order_section'>
+				<div class='order_section_label'>{this.props.t('ship_to')}</div>
+				{$addr}
+			</div>
+		)
+	}
+
+
+
+1. ko co dia chi co san => dien luon new
+2. co dia chi => hien thi dia chi co san va option dia chi moi
+3.

package/src/plugin.js

@@ -1,4 +1,5 @@
 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')
@@ -6,10 +7,6 @@ const LoadContact = () => import(/*webpackChunkName: "contact" */ './contact/con
 const LoadPopup = () => import(/*webpackChunkName: "popup" */ './popup/popup.js')
 const LoadNotif = () => import(/*webpackChunkName: "notif" */ './notif/notif.js')
 
-// cache lang messages
-let langMessages = {}
-let downloadLock = false
-
 function Plugin(plugin, store, $container, lib) {
 	if (!$container) throw '$div must is a valid html node'
 	var $div = document.createElement('div')
@@ -17,7 +14,7 @@ function Plugin(plugin, store, $container, lib) {
 	$container.appendChild($div) // use body as container
 
 	// auto detect language first
-	let _locale = getLocale(plugin, sb.detectLang())
+	let _locale = common.getLocale(plugin, sb.detectLang())
 
 	var domGate = new sb.Gate()
 	var pageIndex = 0
@@ -136,11 +133,10 @@ function Plugin(plugin, store, $container, lib) {
 	}
 
 	// language
-
 	let t = (key) => {
 		if (_locale === 'debug') return `{{${key}}}`
 
-		let messages = sb.get(langMessages, _locale, [])
+		let messages = sb.get(common.langMessages, _locale, [])
 		let message = sb.find(messages, (message) => message.key === key)
 		return sb.get(message, 'message', key)
 	}
@@ -157,7 +153,7 @@ function Plugin(plugin, store, $container, lib) {
 	t.locale = () => _locale
 
 	this.forceDownloadLanguage = async () => {
-		await downloadLanguage(store, _locale, true)
+		await common.downloadLanguage(store, _locale, true)
 		this.update(plugin)
 	}
 
@@ -167,8 +163,8 @@ function Plugin(plugin, store, $container, lib) {
 		this.t = null
 		_render() // hide plugin first
 
-		_locale = getLocale(plugin, locale)
-		await downloadLanguage(store, _locale)
+		_locale = common.getLocale(plugin, locale)
+		await common.downloadLanguage(store, _locale)
 		this.t = t
 		_render()
 		return _locale
@@ -203,7 +199,7 @@ function Plugin(plugin, store, $container, lib) {
 
 	this.update(plugin)
 	// auto detect language firlst
-	downloadLanguage(store, _locale).then(() => {
+	common.downloadLanguage(store, _locale).then(() => {
 		this.t = t
 		this.update(plugin)
 	})
@@ -348,44 +344,3 @@ export default class PluginMgr {
 		this._destroy = true
 	}
 }
-
-function downloadLanguage(store, locale, force) {
-	if (downloadLock)
-		return new Promise((resolve) => setTimeout(() => downloadLanguage(store, locale, force).then(resolve), 100))
-
-	downloadLock = true
-	// let locale = getLocale()
-	let messages
-	if (locale === 'debug' || (langMessages[locale] && !force)) {
-		downloadLock = false
-		return Promise.resolve()
-	}
-
-	return store.getLocaleContent(locale).then((res) => {
-		downloadLock = false
-		messages = sb.get(res, 'body.messages', [])
-		langMessages[locale] = messages
-	})
-}
-
-const getLocale = (plugin, loc) => {
-	if (!loc) loc = ''
-	let found = sb.find(plugin.locales, (l) => l.toLowerCase().trim() === loc.toLowerCase().trim())
-	if (found) return found
-
-	found = sb.find(plugin.locales, (l) => {
-		l = l
-			.replace('-', '_')
-			.split('_')[0]
-			.trim()
-			.toLowerCase()
-		let compareloc = loc
-			.replace('-', '_')
-			.split('_')[0]
-			.trim()
-			.toLowerCase()
-		return l == compareloc
-	})
-	if (found) return found
-	return plugin.locale || 'en-US'
-}

package/src/store/api.js

@@ -47,7 +47,10 @@ export default class {
 			.get('/conversations')
 
 	listMessages = (cid, limit, start_id) =>
-		this.apireq.addQuery('limit', limit).addQuery('start_id', start_id).get(`/conversations/${cid}/messages`)
+		this.apireq
+			.addQuery('limit', limit)
+			.addQuery('start_id', start_id)
+			.get(`/conversations/${cid}/messages`)
 
 	ajax = ajax
 
@@ -156,4 +159,26 @@ export default class {
 		this.apireq.post(`/accounts/${this.accid}/campaigns/${impression.campaign_id}/impressions`, impression)
 	sendConversion = (conversion) =>
 		this.apireq.post(`/accounts/${this.accid}/campaigns/${conversion.campaign_id}/conversions`, conversion)
+
+	lookupOrder = (key) =>
+		ajax
+			.setBaseUrl(this.ApiURL)
+			.setContentType('text/plain')
+			.beforeHook(jsonifyTextPlain)
+			.setParser('json')
+			.addQuery('x-signed-key', key)
+			.get(`/orders/123`)
+
+	getOrder = (id) => this.apireq.get(`/accounts/${this.accid}/orders/` + id)
+	updateOrder = (order) => this.apireq.post(`/accounts/${this.accid}/orders/` + order.id, order)
+
+	fetchShippingAddresses = () => this.apireq.get(`/accounts/${this.accid}/users/${this.uid}/shipping-addresses`)
+	createShippingAddress = (addr) =>
+		this.apireq.post(`/accounts/${this.accid}/users/${this.uid}/shipping-addresses`, addr)
+
+	list_provinces = () => this.apireq.get(`/accounts/${this.accid}/provinces`)
+	list_districts = (p) => this.apireq.setQuery(p).get(`/accounts/${this.accid}/districts`)
+	list_wards = (p) => this.apireq.setQuery(p).get(`/accounts/${this.accid}/wards`)
+
+	suggest_address = (keyword) => this.apireq.setQuery({keyword: keyword}).get(`/accounts/${this.accid}/addresses`)
 }

package/src/store/store.js

@@ -80,6 +80,23 @@ export default class Store {
 		return sb.Date.now() - (this.g_sync[key] || 0) < 300000
 	}
 
+	async fetchShippingAddresses() {
+		let out = await this.api.fetchShippingAddresses()
+		if (out.error) return null
+		this.cache.put('shipping_address', out.body.shipping_addresses)
+	}
+
+	matchShippingAddresses() {
+		return this.cache.match('shipping_address')
+	}
+
+	updateOrder(order) {
+		return this.api.updateOrder(order)
+	}
+	createShippingAddress(addr) {
+		return this.api.createShippingAddress(addr)
+	}
+
 	async overrideAcc(acc) {
 		this.forceAcc = sb.cloneDeep(acc)
 		await this.readyGate.entry()
@@ -176,8 +193,11 @@ export default class Store {
 		return this.kv.match('user')
 	}
 
+	suggest_addresses = (keyword) => this.api.suggest_address(keyword)
+
 	matchSession = () => this.kv.match('session') || {}
 	matchAccount = () => this.cache.match('account')
+	matchPaymentMethods = () => this.cache.match('payment_methods')
 
 	matchUnread = () => {
 		let user = this.matchUser()
@@ -231,6 +251,11 @@ export default class Store {
 		return this.reconnectGate.open()
 	}
 
+	list_provinces = () => this.api.list_provinces()
+	list_districts = (p) => this.api.list_districts(p)
+	list_wards = (p) => this.api.list_wards(p)
+
+	list_provices
 	listEvents = (id) => {
 		if (!id || id === '*' || typeof id !== 'string') return
 		if (!this.isInsync('events' + id)) {
@@ -439,6 +464,7 @@ export default class Store {
 	}
 
 	_setUser(user) {
+		user = sb.cloneDeep(user)
 		let olduser = this.kv.match('user') || {}
 		var accid = olduser.account_id || user.account_id
 		var id = olduser.id || user.id
@@ -536,6 +562,10 @@ export default class Store {
 			this.cache.put('agent', agentM)
 		}
 
+		// payment methods
+		let pms = sb.get(setting, 'payment_methods', [])
+		this.cache.put('payment_methods', pms)
+
 		this.pubsub.publish('account')
 	}
 
@@ -725,6 +755,14 @@ export default class Store {
 		return {convo}
 	}
 
+	fetchOrder(id) {
+		return this.api.getOrder(id)
+	}
+
+	lookupOrder(key) {
+		return this.api.lookupOrder(key)
+	}
+
 	createPostback(cid, postback) {
 		return this.api.createPostback(cid, postback)
 	}
@@ -778,6 +816,14 @@ export default class Store {
 		}
 		this.onWs(ret)
 		sendEventToThirdParty('SUBIZ Chat', 'Sent', 'User')
+		// send special event if user sent the first msg
+		let lastMsgSent = this.kv.match('last_msg_sent')
+		if (!lastMsgSent) {
+			let dataLayer = window.dataLayer || []
+			dataLayer.push({event: 'SUBIZ Chat', event_action: 'Sent', event_label: 'User', first_interaction: 1})
+		}
+
+		this.kv.put('last_msg_sent', sb.Date.now())
 	}
 
 	onConvoEvent = (o, cb) => this.pubsub.on2(o, 'events', cb)
@@ -825,7 +871,9 @@ export default class Store {
 	setIsOpen = (isopen) => {
 		let lastisopen = this.kv.match('isopen')
 		this.kv.put('isopen', isopen)
-		if (!lastisopen && isopen) sendEventToThirdParty('SUBIZ Chat', 'Opened', 'Subiz Windows')
+		if (!lastisopen && isopen) {
+			sendEventToThirdParty('SUBIZ Chat', 'Opened', 'Subiz Windows')
+		}
 	}
 	closePreview = () => this.kv.put('close_preview_at', new sb.Date().getTime())
 	setLastview = (view, opts) => this.kv.put('lastview', {view, opts})
@@ -923,7 +971,7 @@ export default class Store {
 		let startms = sb.Date.now()
 
 		// store not init
-		if (!sb.get(this.kv.match('user'), 'id')) return setTimeout(() => this.loopTime(), 30000)
+		if (!sb.get(this.kv.match('user'), 'id')) return setTimeout(() => this.loopTime(), 120000)
 
 		let {body: t, error} = await this.api.time()
 		if (error) return setTimeout(() => this.loopTime(), 30000)
@@ -931,7 +979,7 @@ export default class Store {
 		var serverMs = new sb.Date(t).getTime() + latences
 		var localMs = sb.Date.now()
 		this.timeDiff = Math.floor(serverMs - localMs)
-		setTimeout(() => this.loopTime(), 60000)
+		setTimeout(() => this.loopTime(), 120000)
 	}
 
 	replaceFileUrl(src) {
@@ -1091,6 +1139,8 @@ function sendEventToThirdParty(category, action, label) {
 	document.dispatchEvent(new CustomEvent('subiz', {detail: {category, action, label}}))
 	sendToGA(category, action, label)
 	sendToFBPixel(category, action, label)
+	let dataLayer = window.dataLayer || []
+	dataLayer.push({event: category, event_action: action, event_label: label})
 }
 
 // from http://detectmobilebrowsers.com/

package/src/util/common.js

@@ -924,6 +924,7 @@ export function preloadWebfonts(fonts, done) {
 			node.style.color = 'transparent'
 			node.style.fontSize = '20px'
 			node.style.height = '0px'
+			node.style.top = '0px'
 			node.style.width = '0px'
 
 			node.style.fontWeight = weight
@@ -1074,9 +1075,9 @@ export function getUrlParameter() {
 export var sleep = (ms) => new Promise((res) => setTimeout(res, ms))
 
 export function formatCurrency(val) {
-	if (!val) return 0
+	if (!val) return '0 đ'
 	val = Math.round(val)
-	return val.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
+	return val.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')+ ' đ'
 }
 
 function replaceFileUrl(src) {
@@ -1106,3 +1107,48 @@ function replaceFileUrl(src) {
 	src = src.replace('http://file.mysubiz.com/', fileurl)
 	return src
 }
+
+export function unicodeToAscii(str) {
+	str = str + ''
+	// worka round Đ not work
+	str = str.replace('đ', 'd').replace('Đ', 'D')
+	return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
+}
+
+export function scrollIntoViewIfNeeded($ele) {
+	centerIfNeeded = arguments.length === 0 ? true : !!centerIfNeeded
+
+	var parent = $ele.parentNode
+	var parentComputedStyle = window.getComputedStyle(parent, null)
+	var parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width'))
+	var parentBorderLeftWidth = parseInt(parentComputedStyle.getPropertyValue('border-left-width'))
+	var overTop = $ele.offsetTop - parent.offsetTop < parent.scrollTop
+	var overBottom =
+		$ele.offsetTop - parent.offsetTop + $ele.clientHeight - parentBorderTopWidth >
+		parent.scrollTop + parent.clientHeight
+	var overLeft = $ele.offsetLeft - parent.offsetLeft < parent.scrollLeft
+	var overRight =
+		$ele.offsetLeft - parent.offsetLeft + $ele.clientWidth - parentBorderLeftWidth >
+		parent.scrollLeft + parent.clientWidth
+	var alignWithTop = overTop && !overBottom
+
+	if ((overTop || overBottom) && centerIfNeeded) {
+		parent.scrollTop =
+			$ele.offsetTop - parent.offsetTop - parent.clientHeight / 2 - parentBorderTopWidth + $ele.clientHeight / 2
+	}
+
+	if ((overLeft || overRight) && centerIfNeeded) {
+		parent.scrollLeft =
+			$ele.offsetLeft - parent.offsetLeft - parent.clientWidth / 2 - parentBorderLeftWidth + $ele.clientWidth / 2
+	}
+
+	if ((overTop || overBottom || overLeft || overRight) && !centerIfNeeded) {
+		$ele.scrollIntoView(alignWithTop)
+	}
+}
+
+// if (!Element.prototype.scrollIntoViewIfNeeded) {
+//Element.prototype.scrollIntoViewIfNeeded = function(centerIfNeeded) {
+
+//}
+//}

package/up

@@ -38,6 +38,6 @@ sleep 5
 
 echo "Remove cloudfare cache"
 # PURGE CLOUD FLARE CACHE
-curl -X POST "https://api.cloudflare.com/client/v4/zones/cc22eff135a40705ebe59955b450217d/purge_cache" -H "X-Auth-Email: thanhpham@vietnambiz.com" -H "X-Auth-Key: $(cat ~/.cloudflare)" -H "Content-Type: application/javascript"
+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)"
 
 echo "Success. $(cat dist/HASH)"

package/webpack.dev.js

@@ -7,6 +7,7 @@ module.exports = {
 		inject: './inject.js',
 		preview: './preview.js',
 		library: './library.js',
+		order: './src/order/index.js',
 		screenshoot: './screenshoot.js',
 	},
 	output: {publicPath: '/'},
@@ -14,6 +15,7 @@ module.exports = {
 	optimization: {minimize: false},
 	plugins: [
 		new HtmlWebpackPlugin({filename: './index.html', template: './index.html', inject: 'body', chunks: ['app']}),
+		new HtmlWebpackPlugin({filename: './order.html', template: './order.html', inject: 'body', chunks: ['order']}),
 		new HtmlWebpackPlugin({filename: './preview.html', template: './preview.html', chunks: ['preview']}),
 		new HtmlWebpackPlugin({filename: './inject.html', template: './inject.html', inject: 'body', chunks: ['inject']}),
 		new HtmlWebpackPlugin({filename: './library.html', template: './index.html', inject: 'body', chunks: ['library']}),