@subiz/widget-v4 4.0.59 → 4.0.64

package/src/order/address_picker.js

@@ -0,0 +1,235 @@
+import sb from '../util/index.js'
+import {Com, Clickaway} from '../common.js'
+import {h, createRef} from 'preact'
+import Spinner from '../chatbox/spinner.js'
+
+// props: ['items', 'mode', 'has_search', selected, loading, width, full],
+export default class AddressPicker extends Com {
+	state = {
+		show: false,
+		searchValue: '',
+		addresses: [],
+	}
+
+	filterRef = createRef()
+	overlayRef = createRef()
+
+	constructor(props) {
+		super(props)
+
+		document.addEventListener('touchmove', function(e) {
+			// e.preventDefault();
+			// e.stopPropagation();
+			// alert('2')
+			// return false
+		})
+	}
+
+	onTouchMove = (e) => {
+		if (e.target === this.overlayRef.current) {
+			e.preventDefault()
+			e.stopPropagation()
+		}
+	}
+
+	hideDropdown = () => {
+		this.setState({show: false, searchValue: ''})
+	}
+
+	onKeydown = (e) => {
+		if (e.key === 'Escape') {
+			if (!this.state.show) return
+			if (this.state.searchValue) this.setState({searchValue: ''})
+			else this.hideDropdown()
+			e.preventDefault()
+			e.stopPropagation()
+		}
+
+		if (e.key == 'Enter') {
+		}
+	}
+
+	doSearch = sb.throttle(async () => {
+		// flag to detect rat race
+		let requestId = Date.now()
+		this.requestId = requestId
+
+		let res = await this.props.store.suggest_addresses(this.state.searchValue)
+
+		// avoid previouse request render after
+		if (this.requestId !== requestId) return
+		this.setState({addresses: sb.get(res, 'body.addresses', [])})
+	}, 100)
+
+	componentDidMount() {
+		window.addEventListener('keydown', this.onKeydown)
+	}
+
+	componentWillUnmount() {
+		window.removeEventListener('keydown', this.onKeydown)
+	}
+
+	onChangeSearchValue = (e) => {
+		this.setState({searchValue: e.target.value})
+		this.props.onChangeAddress(e.target.value)
+		this.doSearch()
+	}
+
+	renderEmpty() {
+		return (
+			<div class='dropdown_select_filter__empty'>
+				<img class='dropdown_select_filter__empty_img' src={require('../../assets/img/not_found_search.png')} />
+				<div class='muted' style='text-align: center !important;'>
+					Không có kết quả
+				</div>
+			</div>
+		)
+	}
+
+	renderLoading() {
+		return (
+			<div class='dropdown_select_filter__empty pt-3'>
+				<Spinner size='40' static />
+				<div class='muted mt-2' style='text-align: center !important;'>
+					Đang tải dữ liệu
+				</div>
+			</div>
+		)
+	}
+
+	toogleDropdown = async () => {
+		await this.setState({show: true, searchValue: this.props.initAddress || ''})
+
+		this.focusFilter()
+	}
+
+	focusFilter() {
+		if (!this.filterRef.current) return
+		this.filterRef.current.focus()
+		setTimeout(() => {
+			if (!this.filterRef.current) return
+			this.filterRef.current.focus()
+		}, 100)
+	}
+
+	onSelect = (item) => {
+		this.props.onSelect(item)
+		this.hideDropdown()
+	}
+
+	renderDropdown() {
+		if (!this.state.show) return null
+
+		let $items = sb.map(this.state.addresses, (addr, i) => {
+			let label = [((addr.address || '') + ' ' + normalize(addr.street)).trim()].join(', ')
+			let desc = [normalize(addr.ward), normalize(addr.district), normalize(addr.province)].join(', ')
+
+			return (
+				<div class='dropdown_select__item' onClick={(_) => this.onSelect(addr)} key={i}>
+					<div>
+						<b>{label}</b>
+					</div>
+					<div style='opacity: 0.7 !important;'>{desc}</div>
+				</div>
+			)
+		})
+
+		let $filter = null
+		let $img = <img class='dropdown_select_filter__icon' src={require('../../assets/img/search.svg')} />
+		if (this.props.loading) {
+			$img = <img class='dropdown_select_filter__icon' src={require('../../assets/img/loader.svg')} />
+		}
+		$filter = (
+			<div class='dropdown_select_filter'>
+				{$img}
+				<input
+					ref={this.filterRef}
+					value={this.state.searchValue}
+					onInput={this.onChangeSearchValue}
+					type='text'
+					class='dropdown_select_filter_input '
+				/>
+			</div>
+		)
+
+		if ($items.length == 0) $items = this.renderEmpty()
+		if (this.props.loading) $items = this.renderLoading()
+
+		let style = `width: ${this.props.width || '150px'} !important;`
+		if (this.props.full) {
+			style = ` top: 20px !important; left: 20px !important; right: 20px !important; width: unset !important; `
+			return (
+				<div
+					class='dropdown_select__overlay'
+					ref={this.overlayRef}
+					onClick={this.hideDropdown}
+					onTouchMove={this.onTouchMove}>
+					<div
+						class='dropdown_select'
+						style={style}
+						onClick={(e) => {
+							e.preventDefault()
+							e.stopPropagation()
+						}}>
+						{$filter}
+						<div class='dropdown_select__items'>{$items}</div>
+					</div>
+				</div>
+			)
+		}
+
+		return (
+			<div class='dropdown_select' style={style}>
+				{$filter}
+				<div class='dropdown_select__items'>{$items}</div>
+			</div>
+		)
+	}
+
+	onBackgroundScroll = (e) => {
+		console.log('EEEEEEE', e)
+	}
+
+	render() {
+		let $name = (
+			<div class='text-truncate' style='flex: 1 !important;'>
+				{this.props.initAddress}
+			</div>
+		)
+
+		let style = 'position: relative !important;'
+		if (this.props.full) {
+			style = ''
+		}
+
+		return (
+			<div style={style}>
+				<Clickaway onClickaway={this.hideDropdown}>
+					<div type='text' class={'dropdown_select_input ' + this.props.extra_cls} onClick={this.toogleDropdown}>
+						{$name}
+					</div>
+					{this.renderDropdown()}
+				</Clickaway>
+			</div>
+		)
+	}
+}
+
+function normalize(s) {
+	let ls = (s + '').toLowerCase()
+	if (ls.startsWith('tp ')) return s.substr(3)
+
+	if (ls.startsWith('thanh pho ')) return s.substr('thanh pho '.length)
+	if (ls.startsWith('thành phố ')) return s.substr('thành phố '.length)
+	if (ls.startsWith('tỉnh ')) return s.substr('tỉnh '.length)
+	if (ls.startsWith('huyện ')) return s.substr('huyện '.length)
+	if (ls.startsWith('tỉnh ')) return s.substr('tỉnh '.length)
+	if (ls.startsWith('xã ')) return s.substr('xã '.length)
+	if (ls.startsWith('thị trấn ')) return s.substr('thị trấn '.length)
+	if (ls.startsWith('thị xã ')) return s.substr('thị xã '.length)
+	// phuong khuong dinh => khuong dinh; phuong 1 => phuong 1
+	if (ls.startsWith('đường ') && (s[7] < '0' || s[7] > '9')) return s.substr('đường '.length)
+	if (ls.startsWith('phường ') && (s[7] < '0' || s[7] > '9')) return s.substr('phường '.length)
+	if (ls.startsWith('quận ') && (s[7] < '0' || s[7] > '9')) return s.substr('quận '.length)
+	return s
+}

package/src/order/icon.js

@@ -0,0 +1,32 @@
+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.rel = 'stylesheet'
+document.head.append($link)
+
+sb.preloadWebfonts(['Roboto'], [400, 500])
+
+import Time from '../chatbox/time.js'
+let defaultAvatar = require('../../assets/img/default_avatar.png')
+import * as common from '../common.js'
+import DropdownSelect from '../chatbox/DropdownSelect.js'
+import {h, createRef, render, Fragment} from 'preact'
+
+export default class Icon extends common.Com {
+	render() {
+		if (this.props.name == 'package') {
+			if (this.props.active)
+				return <img style='width: 18px !important;' src={require('../../assets/img/package.svg')} />
+
+			return <img style='width: 18px !important;' src={require('../../assets/img/package_fade.svg')} />
+		}
+
+		if (this.props.name === 'shop') {
+			if (this.props.active) return <img style='width: 18px !important;' src={require('../../assets/img/shop.svg')} />
+
+			return <img style='width: 18px !important;' src={require('../../assets/img/shop_faded.svg')} />
+		}
+	}
+}

package/src/order/index.js

@@ -0,0 +1,86 @@
+import Store from '../store/store.js'
+import * as common from '../common.js'
+import sb from '../util/index.js'
+import {h, render} from 'preact'
+import Order from './order.js'
+// find the body
+let promiseMainCSS = (() => import(/*webpackChunkName: "main-css" */ '../chatbox/css.js'))()
+
+var config = require('../../config.js')
+
+function findChatbox(store) {
+	var pluginM = store.matchPlugin()
+	let chatboxs = sb.filter(pluginM, (plugin) => plugin.type === 'chatbox')
+	if (sb.size(chatboxs) === 0) {
+		console.error('no chatbox found.')
+		return
+	}
+	return chatboxs[0]
+}
+
+function getUrlParameter(name) {
+	name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]')
+	var regex = new RegExp('[\\?&]' + name + '=([^&#]*)')
+	var results = regex.exec(location.search)
+	return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '))
+}
+
+var $link = document.createElement('link')
+$link.href = 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap'
+$link.rel = 'stylesheet'
+document.head.append($link)
+
+sb.preloadWebfonts(['Roboto'], [400, 500])
+
+async function load() {
+	let store = new Store(config.ApiURL, config.FileURL, config.RealtimeURL, true)
+	let signkey = getUrlParameter('x-signed-key')
+	let {body, error} = await store.lookupOrder(signkey)
+	let order = body
+	// order.status  = 'confirmed'
+	let accid = sb.get(order, 'ctx.credential.account_id')
+	let user_id = sb.get(order, 'ctx.credential.issuer')
+	let mask = accid + '@' + user_id
+	await store.init(accid, mask)
+
+	window.store = store
+
+	let t = (key) => {
+		if (_locale === 'debug') return `{{${key}}}`
+
+		let messages = sb.get(common.langMessages, _locale, [])
+		let message = sb.find(messages, (message) => message.key === key)
+		return sb.get(message, 'message', key)
+	}
+	let acc = store.matchAccount()
+	let plugin = findChatbox(store)
+
+	// make sure you are still alive
+	let css = (await promiseMainCSS).default.default.toString()
+	var outcss = sb.replaceCssVariable(css, plugin.chatbox)
+
+	let $cssStyleDiv = document.createElement('style')
+	document.head.appendChild($cssStyleDiv)
+	$cssStyleDiv.type = 'text/css'
+	$cssStyleDiv.id = 'subiz-style-for-order'
+
+	sb.setCss('order', $cssStyleDiv, outcss)
+
+	// auto detect language first
+	let _locale = plugin.locale || acc.locale || 'vi-VN'
+	t.i18n = (i18nText) => {
+		if (!i18nText) return ''
+		let fallbackLocale = plugin.locale || acc.locale || 'vi-VN'
+		fallbackLocale = fallbackLocale.replace('-', '_')
+		let locale = _locale.replace('-', '_')
+
+		return i18nText[locale] || i18nText[fallbackLocale]
+	}
+	t.locale = () => _locale
+
+	common.downloadLanguage(store, _locale).then(() => {
+		render(<Order store={store} t={t} order_id={order.id} />, document.getElementById('order'))
+	})
+}
+
+load()