@subiz/widget-v4 4.0.61 → 4.0.66

package/src/chatbox/Order.js

@@ -0,0 +1,232 @@
+import sb from '../util/index.js'
+
+import ReleaseAnimation from './releaseAnimation.js'
+import Time from './time.js'
+const POPUP_MAX_HEIGHT = 400
+const POPUP_HARD_MAX_HEIGHT = 500
+const POPUP_MIN_HEIGHT = 0
+let defaultAvatar = require('../../assets/img/default_avatar.png')
+import {Com} from '../common.js'
+import {h, createRef} from 'preact'
+import RawOrder from '../order/order.js'
+
+export default class Order extends Com {
+	constructor(props) {
+		super(props)
+		this.refRating = createRef()
+		this.refHandle = createRef()
+	}
+
+	state = {
+		hide: true,
+		ratingHeight: 0,
+		overlayOpacity: 0.3,
+	}
+
+	componentDidMount() {
+		this.mouseUp = (e) => this.onMouseUp(e)
+		this.mouseMove = (e) => this.onMouseMove(e)
+		this.mouseDown = (e) => this.onMouseDown(e)
+
+		var $ratingHandle = this.refHandle.current
+		$ratingHandle.addEventListener('mousedown', this.mouseDown, {passive: true})
+		$ratingHandle.addEventListener('touchstart', this.mouseDown, {passive: true})
+
+		window.addEventListener('mouseup', this.mouseUp, {passive: true})
+		window.addEventListener('touchend', this.mouseUp, {passive: true})
+		window.addEventListener('mousemove', this.mouseMove, {passive: true})
+		window.addEventListener('touchmove', this.mouseMove, {passive: true})
+		this.animation = new ReleaseAnimation({
+			maxY: POPUP_MAX_HEIGHT,
+			minY: POPUP_MIN_HEIGHT,
+			duration: 150,
+		})
+
+		this.close()
+	}
+
+	componentWillUnmount() {
+		var $ratingHandle = this.refHandle.current
+		$ratingHandle.removeEventListener('mousedown', this.mouseDown, 0)
+		$ratingHandle.removeEventListener('touchstart', this.mouseDown, 0)
+
+		window.removeEventListener('mouseup', this.mouseUp, 0)
+		window.removeEventListener('touchend', this.mouseUp, 0)
+		window.removeEventListener('mousemove', this.mouseMove, 0)
+		window.removeEventListener('touchmove', this.mouseMove, 0)
+	}
+
+	render() {
+		if (this._show != this.props.show) {
+			this._show = this.props.show
+			setTimeout(() => {
+				if (!this._show) this.close()
+				else this.open()
+			})
+		}
+
+		let cls = this.state.hide ? 'd-none' : ''
+		return (
+			<div class={cls}>
+				<div class='extension--overlay' style={`opacity: ${this.state.overlayOpacity * 0.5} !important;`}></div>
+				<div class='extension' ref={this.refRating} style={`height: ${this.state.ratingHeight}px !important;`}>
+					<div class='extension--close-btn' onClick={this.close}>
+						{this.props.t('close')}
+					</div>
+					<div class='extension--handle' ref={this.refHandle}>
+						<div class='extension--thumb'></div>
+					</div>
+					<div style='overflow-x: hidden !important; overflow-y: scroll !important; height: 100% !important;'>
+						<RawOrder
+							key={this.props.order_id}
+							store={this.props.store}
+							onResponse={this.onResponse}
+							onClose={this.close}
+							t={this.props.t}
+							order_id={this.props.order_id}
+							cid={this.props.cid}
+						/>
+					</div>
+				</div>
+			</div>
+		)
+	}
+
+	onResponse = (response) => {
+		this.setState({response})
+	}
+
+	open() {
+		if (!this.state.hide) return
+		if (!this.props.order_id) return
+		this.setState({hide: false})
+		if (!this.refRating.current) return
+		var popupStyle = this.refRating.current.currentStyle || window.getComputedStyle(this.refRating.current)
+		var h0 = parseFloat(popupStyle.height)
+		this.animation.play(-20, h0, (h) => {
+			this.setState({
+				ratingHeight: h,
+				overlayOpacity: Math.min(1, (h - POPUP_MIN_HEIGHT) / (POPUP_HARD_MAX_HEIGHT - POPUP_MIN_HEIGHT)),
+			})
+		})
+	}
+
+	confirm = () => {
+		this.props.store.sendConvoEvent(this.props.cid, 'message_sent', {
+			message: {
+				format: 'plaintext',
+				text: 'confirm',
+				attachments: [
+					{type: 'postback', postback: {payload: JSON.stringify({type: 'order_confirmation', status: 'confirmed'})}},
+				],
+			},
+		})
+	}
+
+	close = async () => {
+		// wait for state to probagate
+		await sb.sleep(100)
+		if (this.state.response === 'confirmed') {
+			this.props.store.sendConvoEvent(this.props.cid, 'message_sent', {
+				message: {
+					format: 'plaintext',
+					text: this.props.t('confirm_order'),
+					attachments: [
+						{type: 'postback', postback: {payload: JSON.stringify({type: 'order_confirmation', status: 'confirmed'})}},
+					],
+				},
+			})
+		} else if (this.state.response === 'rejected') {
+			this.props.store.sendConvoEvent(this.props.cid, 'message_sent', {
+				message: {
+					format: 'plaintext',
+					text: this.props.t('cancel_order'),
+					attachments: [
+						{type: 'postback', postback: {payload: JSON.stringify({type: 'order_confirmation', status: 'cancelled'})}},
+					],
+				},
+			})
+		} else {
+		}
+		this.setState({response: ''})
+		if (this.state.hide) return
+		if (!this.refRating.current) return
+
+		var popupStyle = this.refRating.current.currentStyle || window.getComputedStyle(this.refRating.current)
+		var h0 = parseFloat(popupStyle.height)
+		this.animation.play(20, h0, (h) => {
+			this.setState({
+				ratingHeight: h,
+				overlayOpacity: Math.min(1, (h - POPUP_MIN_HEIGHT) / (POPUP_HARD_MAX_HEIGHT - POPUP_MIN_HEIGHT)),
+			})
+			if (h < POPUP_MIN_HEIGHT + 10) {
+				if (!this.state.hide) {
+					this.setState({hide: true})
+				}
+			}
+		})
+		/*
+		this.props.store.sendConvoEvent(this.props.cid, 'message_sent', {
+			message: {
+				format: 'plaintext',
+				text: 'cancel',
+				attachments: [
+					{type: 'postback', postback: {payload: JSON.stringify({type: 'order_confirmation', status: 'cancelled'})}},
+				],
+			},
+		})*/
+		this.props.onClose()
+	}
+
+	onMouseDown(e) {
+		this.mousePushed = true
+		this.animation.stop()
+		e.preventDefault()
+		if (e.touches && e.touches[0]) e = e.touches[0]
+		this.mousePushedDy = e.pageY - window.pageYOffset - this.refRating.current.getBoundingClientRect().y
+	}
+
+	onMouseUp(e) {
+		if (!this.mousePushed) return
+		if (e.touches && e.touches[0]) e = e.touches[0]
+		this.mousePushed = false
+		var popupStyle = this.refRating.current.currentStyle || window.getComputedStyle(this.refRating.current)
+		var h0 = parseFloat(popupStyle.height)
+		this.animation.play(this.mouseVelocity, h0, (h) => {
+			this.setState({
+				ratingHeight: h,
+				overlayOpacity: Math.min(1, (h - POPUP_MIN_HEIGHT) / (POPUP_HARD_MAX_HEIGHT - POPUP_MIN_HEIGHT)),
+			})
+			if (h < POPUP_MIN_HEIGHT + 10) {
+				if (!this.state.hide) {
+					this.setState({hide: true})
+					this.props.onRate && this.props.onRate({no_rating: true})
+				}
+			}
+		})
+	}
+
+	onMouseMove(e) {
+		if (!this.mousePushed) return
+		if (e.touches && e.touches[0]) e = e.touches[0]
+		var my = e.pageY
+
+		this.mouseVelocity = my - this.lastMouseY
+		this.lastMouseY = my
+		my = my - this.mousePushedDy
+		var K = 10000
+		var height = this.refRating.current.getBoundingClientRect().bottom - my
+
+		if (height > POPUP_MAX_HEIGHT) {
+			//TODO
+			var beta = K / (POPUP_HARD_MAX_HEIGHT - POPUP_MAX_HEIGHT) - POPUP_MAX_HEIGHT
+
+			height = POPUP_HARD_MAX_HEIGHT - K / (height + beta)
+		}
+
+		this.setState({
+			ratingHeight: height,
+			overlayOpacity: Math.min(1, (height - POPUP_MIN_HEIGHT) / (POPUP_HARD_MAX_HEIGHT - POPUP_MIN_HEIGHT)),
+		})
+	}
+}

package/src/chatbox/OrderAttachments.js

@@ -37,7 +37,8 @@ export default class ProductAttachments extends Com {
 								<div class='order_attachment__product'>
 									<img
 										class='order_attachment__product_img'
-										src={(sb.get(product, 'images.0'), require('../../assets/img/default.jpg'))}
+										alt={'' + sb.get(product, 'id')}
+										src={sb.get(product, 'images.0', require('../../assets/img/default.jpg'))}
 									/>
 									<div style='overflow: hidden !important;'>
 										<div class='order_attachment__product_name'>{product.name}</div>

package/src/chatbox/ProductAttachments.js

@@ -22,17 +22,53 @@ export default class ProductAttachments extends Com {
 		let $products = sb.map(products, (att, index) => {
 			let product = att.product
 
-			let $detailbtn = null
+			let $detailbtns = []
 			let url = product.url || product.mobile_url
 			if (this.props.store.isMobile()) url = product.mobile_url || product.url
-			if (url)
-				$detailbtn = (
+			if (url && sb.size(product.buttons) == 0)
+				$detailbtns.push(
 					<a class='product_attachment__btn' href={url} target='_blank'>
 						{this.props.t('detail')}
 						<img src={require('../../assets/img/external-link.svg')} class='product_attachment__btn_external_link' />
-					</a>
+					</a>,
 				)
 
+			console.log("P", product)
+
+			if (sb.size(product.buttons) > 0) {
+				$detailbtns = $detailbtns.concat(
+					sb.map(product.buttons, (button, index) => {
+						if (button.type === 'call_button') {
+							return (
+								<a class='product_attachment__btn' href={'tel:' + button.phone_number} key={index} title={button.title}>
+									{button.title}
+								</a>
+							)
+						}
+
+						if (button.type === 'url_button') {
+							return (
+								<a class='product_attachment__btn' href={button.url} target='_blank' key={index} title={button.title}>
+									{button.title || this.props.t('detail')}{' '}
+									<img
+										src={require('../../assets/img/external-link.svg')}
+										class='product_attachment__btn_external_link'
+									/>
+								</a>
+							)
+						}
+
+						if (button.type === 'postback_button') {
+							return (
+								<a class='product_attachment__btn' href='javascript:;' onClick={(_) => this.props.onPostback(button)}>
+									{button.title}
+								</a>
+							)
+						}
+					}),
+				)
+			}
+
 			let $title = (
 				<a href={url} class='product_attachment__title' target='_blank'>
 					{product.name}
@@ -60,7 +96,7 @@ export default class ProductAttachments extends Com {
 					{$title}
 					{$subtitle}
 					{$price}
-					<div class='product_attachment__btns'>{$detailbtn}</div>
+					<div class='product_attachment__btns'>{$detailbtns}</div>
 				</div>
 			)
 		})

package/src/chatbox/TextMessage.js

@@ -9,11 +9,11 @@ const loadMarked = () => import(/*webpackChunkName: "marked" */ 'marked')
 ;(async () => {
 	let markedf = (await loadMarked()).marked
 	marked = (obj, text) => markedf(text)
-	sb.map(mustrerender, obj => obj.forceUpdate())
+	sb.map(mustrerender, (obj) => obj.forceUpdate())
 	mustrerender = []
 })()
 
-import { Com } from '../common.js'
+import {Com} from '../common.js'
 import {h} from 'preact'
 import Emoji from './Emoji.js'
 import ShadowDomRoot from './ShadowDomRoot.js'
@@ -28,12 +28,21 @@ export default class TextMessage extends Com {
 		if (sb.size(text) === 0) return null
 
 		let byType = sb.get(this.props.ev, 'by.type')
-
-		var tags = sb.extractText(text).map(tag => {
+		var tags = sb.extractText(text).map((tag) => {
 			if (tag.type === 'emoji') return <Emoji emojiCode={tag.text} byType={byType} />
 			if (tag.type === 'link') {
+				let url = tag.text || ''
+				if (
+					!url.startsWith('//') &&
+					!url.startsWith('https://') &&
+					!url.startsWith('http://') &&
+					!url.startsWith('data:')
+				) {
+					url = '//' + url
+				}
+
 				return (
-					<a href={tag.text} target="_blank">
+					<a href={url} target='_blank' onClick={(e) => this.props.onLink(e, url)}>
 						{tag.text}
 					</a>
 				)
@@ -46,9 +55,9 @@ 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>
+			return <div class='message-agent message-text--agent'>{tags}</div>
 		}
-		return <div class="message-user message-text--user">{tags}</div>
+		return <div class='message-user message-text--user'>{tags}</div>
 	}
 
 	renderMarkdown() {
@@ -62,16 +71,16 @@ export default class TextMessage extends Com {
 
 		if (byType === 'agent') {
 			return (
-				<div class="markdown-message message-agent message-text--agent">
-          <ShadowDomRoot html={marked(this, text)} />
+				<div class='markdown-message message-agent message-text--agent'>
+					<ShadowDomRoot html={marked(this, text)} />
 				</div>
 			)
 		}
 
 		return (
-			<div class="d-flex flex-column align-items-end">
-				<div class="markdown-message message-user message-text--user">
-          <ShadowDomRoot html={marked(this, text)} />
+			<div class='d-flex flex-column align-items-end'>
+				<div class='markdown-message message-user message-text--user'>
+					<ShadowDomRoot html={marked(this, text)} />
 				</div>
 			</div>
 		)

package/src/chatbox/Typing.js

@@ -30,6 +30,10 @@ export default class Typing extends Com {
 				return
 			}
 
+			// dont show typing of agent, some agent dont like this
+			let ag = this.props.store.matchAgent(ev.by.id)
+			if (ag.type == 'agent') return
+
 			if (sb.get(ev, 'type') !== 'conversation_typing') return
 			this.setState({ ev: ev, isShow: true })
 			if (this.timer) clearTimeout(this.timer)
@@ -38,7 +42,7 @@ export default class Typing extends Com {
 
 				this.timer = null
 				this.setState({ isShow: false })
-			}, 10000)
+			}, 5000)
 		})
 	}
 

package/src/chatbox/Widget.js

@@ -10,6 +10,7 @@ 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 ListField from './ListField.js'
 
 const defaultAvatar = 'https://file-subiz.com/fiqoahedjbgwclpouoml-avatar_default_baa8a1d7.png'
@@ -28,6 +29,8 @@ export default class Widget extends Com {
 			creating: false,
 			clickedJoin: false,
 			formData: {},
+			showOrder: false,
+			order_id: '',
 		})
 
 		this.props.store.onUpdate(this, (_) => this.forceUpdate())
@@ -44,6 +47,7 @@ export default class Widget extends Com {
 		}
 
 		if (prevProp.cid !== this.props.cid) {
+			this.closeOrder()
 			this.setState({clickedJoin: false})
 			// this.props.store.setLastview('chat', { cid: this.props.cid })
 			setTimeout(() => {
@@ -64,7 +68,6 @@ export default class Widget extends Com {
 	}
 
 	render() {
-		let formRequired = this.isFormRequired()
 		let showform = this.shouldShowForm()
 
 		let form
@@ -568,6 +571,7 @@ export default class Widget extends Com {
 				<div class='widget-body--content' onClick={(e) => this.onContainerClick(e)}>
 					<Events
 						isShow={this.props.isShow}
+						onLink={this.onLink}
 						store={this.props.store}
 						onFormSubmit={(e) => this.onEventFormSubmit(e)}
 						ref={(ref) => (this.events = ref)}
@@ -587,11 +591,39 @@ export default class Widget extends Com {
 					cid={this.props.cid}
 					t={this.props.t}
 				/>
+				<Order
+					forceView={this.props.view}
+					plugin={this.props.plugin}
+					show={this.state.showOrder}
+					order_id={this.state.order_id}
+					store={this.props.store}
+					onClose={this.closeOrder}
+					cid={this.props.cid}
+					t={this.props.t}
+				/>
 				{$input}
 			</div>
 		)
 	}
 
+	onLink = (e, url) => {
+		if (!url) return e.preventDefault()
+		let noschemeurl = url.replace(/(^\w+:|^)\/\//, '')
+		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})
+			// display order instead
+			e.preventDefault()
+			return
+		}
+	}
+
+	closeOrder = (e) => {
+		this.setState({showOrder: false, order_id: ''})
+		this.focusInput()
+	}
+
 	// end or visit unsent convo which require form
 	async onStartConvoClick() {
 		var convo = this.props.store.matchConvo(this.props.cid) || {}
@@ -866,7 +898,5 @@ class FormMounter extends Com {
 }
 
 function encode(key) {
-	return btoa(key)
-		.split('=')
-		.join('')
+	return encodeURIComponent(key)
 }

package/src/chatbox/main.js

@@ -160,12 +160,15 @@ export default class Main extends Com {
 }
 
 function restoreViewport() {
-	// remove our viewport
+	// restore scroll attribute for background document
+	if (document.body && document.body.classList) document.body.classList.remove('sbz_no_scroll')
 	let metatag = document.getElementById('subiz-meta-viewport')
 	if (metatag) metatag.remove()
 }
 
 function modifyViewport() {
+	// dont allow to scroll background document
+	if (document.body && document.body.classList) document.body.classList.add('sbz_no_scroll')
 	let metatag = document.createElement('meta')
 	metatag.httpEquiv = 'X-UA-Compatible'
 	metatag.name = 'viewport'

package/src/chatbox/spinner.js

@@ -17,7 +17,7 @@ export default class Spinner extends Com {
     border-left-color: ${borderColor} !important;border-top-color: ${borderColor} !important;
     border-bottom-color: ${borderColor} !important;border-right-color: ${mainColor} !important;`
 		if (this.props.static) {
-			let style = `width: ${size}px;height: ${size}px;`
+			let style = `width: ${size}px !important;height: ${size}px !important;`
 			if (size < 40) return <LoaderIcon size={size + ''} style={`stroke:${mainColor}`} />
 			if (this.props.center) {
 				return (

package/src/chatbox/time.js

@@ -47,7 +47,7 @@ export default class Time extends Com {
 	}
 
 	render() {
-		return <span>{this.state.t}</span>
+		return <span style={this.props.style}>{this.state.t}</span>
 	}
 }
 

package/src/common.js

@@ -1,8 +1,8 @@
-import { h, Component } from 'preact'
+import {h, Component} from 'preact'
 import sb from './util/index.js'
 
 export class Com extends Component {
-	constructor (props) {
+	constructor(props) {
 		super(props)
 		this._isMounted = true
 		setTimeout(() => {
@@ -18,31 +18,75 @@ export class Com extends Component {
 }
 
 export class Clickaway extends Com {
-	constructor (props) {
+	constructor(props) {
 		super(props)
 		this.setWrapperRef = this.setWrapperRef.bind(this)
 		this.onClick = this.onClick.bind(this)
 	}
 
-	componentDidMount () {
+	componentDidMount() {
 		document.addEventListener('mousedown', this.onClick)
 	}
 
-	componentWillUnmount () {
+	componentWillUnmount() {
 		document.removeEventListener('mousedown', this.onClick)
 	}
 
-	setWrapperRef (node) {
+	setWrapperRef(node) {
 		this.wrapperRef = node
 	}
 
-	onClick (event) {
+	onClick(event) {
 		if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
 			this.props.onClickaway && this.props.onClickaway()
 		}
 	}
 
-	render () {
+	render() {
 		return <div ref={this.setWrapperRef}>{this.props.children}</div>
 	}
 }
+
+export 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'
+}
+
+export let langMessages = {}
+let downloadLock = false
+
+export 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
+	})
+}

package/src/contact/contact.js

@@ -2,7 +2,7 @@ import sb from '../util/index.js'
 import {render, h, createRef} from 'preact'
 import {Com} from '../common.js'
 // var Color = require('color')
-import {Loader} from '@googlemaps/js-api-loader'
+// import {Loader} from '@googlemaps/js-api-loader'
 
 let CSS = (() => import(/*webpackChunkName: "contact-css" */ './css.js'))()