@subiz/widget-v4 4.0.58 → 4.0.63

package/src/order/order.js

@@ -0,0 +1,1157 @@
+import sb from '../util/index.js'
+import Time from '../chatbox/time.js'
+import * as common from '../common.js'
+import DropdownSelect from '../chatbox/DropdownSelect.js'
+import AddressPicker from './address_picker.js'
+import {h, createRef, render, Fragment} from 'preact'
+import Icon from './icon.js'
+import Spinner from '../chatbox/spinner.js'
+
+var checkedimg = require('../../assets/img/done_green.svg')
+var ximg = require('../../assets/img/x.svg')
+
+export default class Order extends common.Com {
+	state = {
+		loadProvince: true,
+
+		g_err: '',
+		fullname: '',
+		email: '',
+		phone: '',
+		loading: true,
+		order: {},
+		err: {},
+
+		selectedProvince: null,
+		selectedDistrict: null,
+		selectedWard: null,
+		street: '',
+		address: '',
+
+		sending: false,
+
+		step: '',
+	}
+
+	constructor(props) {
+		super(props)
+		this.load()
+	}
+
+	async load() {
+		if (!this.props.order_id) return
+		let orderout = await this.props.store.fetchOrder(this.props.order_id)
+		this.setState({loading: false})
+		if (!orderout.error) {
+			this.setState({order: orderout.body})
+		} else {
+			this.setState({error: orderout.error})
+		}
+
+		let user = this.props.store.matchUser()
+		let attributes = sb.get(this.props.store.matchUser(), 'attributes', [])
+		let fullname = sb.get(
+			sb.find(attributes, (att) => att.key === 'fullname'),
+			'text',
+		)
+		let email = sb.get(
+			sb.find(attributes, (att) => att.key === 'emails'),
+			'text',
+		)
+		let phone = sb.get(
+			sb.find(attributes, (att) => att.key === 'phones'),
+			'text',
+		)
+		this.setState({fullname, email, phone})
+
+		await this.props.store.fetchShippingAddresses()
+
+		let out = await this.props.store.list_provinces()
+		this.setState({loadProvince: false})
+		if (!out.error) this.setState({provinces: sb.get(out, 'body.addresses')})
+	}
+
+	isMobile() {
+		if (this.props.cid) return true
+		if (this.props.isMobile) return true
+		return this.props.store.isMobile()
+	}
+
+	onChangeShippingAddress(id) {
+		this.setState({shipping_address: id, err: {}, g_err: ''})
+	}
+
+	renderMobileSuccess = (order) => {
+		return (
+			<div class='order' style='height: 100% !important'>
+				<div style='display: flex !important; align-items: center !important; padding-top: 40px !important; padding-bottom: 20px !important; flex-direction: column !important; height: 100% !important'>
+					<img style='width: 60px !important; height: 60px !important;' width='60' height='60' src={checkedimg} />
+					<div style='margin-top: 20px !important; margin-bottom: 10px !important'>
+						<b style='font-size: 18px !important;'>Đơn hàng của bạn đã được ghi nhận</b>
+					</div>
+					<div class='muted'>Tôi sẽ liên hệ lại với bạn khi đơn hàng được xử lý</div>
+					<div style='flex:1 !important'></div>
+					<div style='margin-top: 20px !important; padding: 0px 20px 0 20px !important; width: 100% !important'>
+						<div class='order_btn order__btn__light' onClick={this.close}>
+							{this.props.t('close')}
+						</div>
+					</div>
+				</div>
+			</div>
+		)
+	}
+
+	onChangeShipping(id) {
+		this.setState({shipping: id, err: {}, g_err: ''})
+	}
+
+	onSelectProvince = async (item) => {
+		this.setState({selectedProvince: item, err: {}, g_err: ''})
+		this.setState({loadDistrict: true})
+		let out = await this.props.store.list_districts({id: item.id})
+		this.setState({loadDistrict: false})
+		if (!out.error) this.setState({districts: sb.get(out, 'body.addresses')})
+	}
+
+	onSelectDistrict = async (item) => {
+		this.setState({selectedDistrict: item, err: {}, g_err: ''})
+		this.setState({loadWard: true})
+		let out = await this.props.store.list_wards({id: item.id})
+		this.setState({loadWard: false})
+		if (!out.error) this.setState({wards: sb.get(out, 'body.addresses')})
+	}
+
+	onSelectWard = (item) => this.setState({selectedWard: item, err: {}, g_err: ''})
+	onChangeFullname = (e) => this.setState({fullname: e.target.value, err: {}, g_err: ''})
+	onChangeAddress = (e) => this.setState({address: e, err: {}, g_err: ''})
+	onSelectAddress = (addr) => {
+		if (!addr) return
+		this.setState({
+			address: [sb.trim(addr.address), sb.trim(addr.street)].join(' ').trim(),
+			street: addr.street,
+			err: {},
+			g_err: '',
+		})
+
+		this.onSelectWard({id: addr.ward_id, name: addr.ward})
+		this.onSelectDistrict({id: addr.district_id, name: addr.district})
+		this.onSelectProvince({id: addr.province_id, name: addr.province})
+	}
+	onChangeEmail = (e) => this.setState({email: e.target.value, err: {}, g_err: ''})
+	onChangePhone = (e) => this.setState({phone: e.target.value, err: {}, g_err: ''})
+	onChangePaymentMethod = (id) => this.setState({pm: id})
+
+	renderDesktopPaymentMethod(order) {
+		return null
+		let editmode = false
+		if (!order.status || order.status == 'new') {
+			editmode = !order.user_confirmation
+		}
+
+		if (editmode) {
+			let pms = this.props.store.matchPaymentMethods()
+
+			let $pms = sb.map(pms, (pm) => {
+				let $name = pm.description
+				if (pm.method == 'bank_transfer') {
+					$name = pm.description + ' ' + pm.bank_name + ' ' + pm.bank_branch
+				}
+				let cls = 'order__card'
+				let $desc = null
+				if (this.state.pm === pm.id) {
+					cls += ' order__card__active'
+
+					$desc = (
+						<div class='muted mt-1' style='margin-left: 26px !important;'>
+							Trả tiền mặt khi bạn nhận hàng
+						</div>
+					)
+
+					if (pm.method == 'bank_transfer') {
+						$desc = (
+							<div class='muted mt-1' style='margin-left: 26px !important;'>
+								<div>STK: {pm.bank_number}</div>
+								<div>Chủ tài khoản: {pm.bank_owner}</div>
+							</div>
+						)
+					}
+				}
+
+				return (
+					<div style='width: 100% !important; margin-top: 10px !important;'>
+						<div class='radio'>
+							<input
+								type='radio'
+								id={'pm.' + pm.id}
+								onInput={(e) => this.onChangePaymentMethod(pm.id)}
+								name='pm'
+								checked={this.state.pm === pm.id}
+							/>
+							<label
+								class='radio--label'
+								style={`margin-left: 4px !important; font-weight: ${this.state.pm === pm.id ? 500 : 400} !important;`}
+								for={'pm.' + pm.id}>
+								{$name}
+							</label>
+							<div class='radio--check'>
+								<div class='inside'></div>
+							</div>
+							{$desc}
+						</div>
+					</div>
+				)
+			})
+
+			let seccls = 'card_section'
+			if (this.isMobile()) seccls = 'order_section'
+
+			return (
+				<Fragment>
+					<div class='order_section__line'></div>
+					<div class={seccls}>
+						<div class='order_label'>{this.props.t('payment')}</div>
+						<div class='form' style='justify-content: space-between !important;'>
+							{$pms}
+						</div>
+					</div>
+				</Fragment>
+			)
+		}
+
+		let pm = order.payment_method || {method: 'cod'}
+
+		let $body = null
+		if (pm.method === 'cash') $body = <div>{this.props.t('pm_cash')}</div>
+		if (pm.method === 'cod') $body = <div>{this.props.t('pm_cod')}</div>
+		if (pm.method === 'bank_transfer') {
+			let name = pm.bank_name
+			if (pm.bank_branch) name += ' - ' + pm.bank_branch
+			$body = (
+				<div>
+					<div>Ngân hàng: {name}</div>
+					<div class='mt-1'>Chủ tài khoản: {pm.bank_owner}</div>
+					<div class='mt-1'>Số tài khoản: {pm.bank_number}</div>
+				</div>
+			)
+		}
+		if (!$body) return null
+
+		return (
+			<Fragment>
+				<div class='order_label'>{this.props.t('payment')}</div>
+				{$body}
+			</Fragment>
+		)
+	}
+
+	renderDesktopShipping(order) {
+		let editmode = false
+		if (!order.status || order.status == 'new') {
+			editmode = !order.user_confirmation
+		}
+
+		let user = this.props.store.matchUser()
+		if (editmode) {
+			let addresses = this.props.store.matchShippingAddresses()
+
+			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 = 'ship_card'
+			let $body = null
+			let ship_icon_active = false
+
+			if (this.state.shipping === 'ship') {
+				ship_icon_active = true
+				let $preaddrs = sb.map(addresses, (addr) => {
+					let fulladdr = [addr.street, addr.ward, addr.district, addr.region, addr.country].filter((a) => a).join(', ')
+					let $phone = null
+					if (addr.phone) {
+						$phone = (
+							<Fragment>
+								&nbsp;·&nbsp;{this.props.t('phn')} {addr.phone}
+							</Fragment>
+						)
+					}
+					return (
+						<div style='margin-bottom: 15px !important'>
+							<div class='radio d-flex '>
+								<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'
+									for={'shipping_addr.' + addr.id}
+									style={`font-weight: ${this.state.shipping_address === addr.id ? 500 : 400} !important`}>
+									{addr.fullname}
+									{$phone}
+									<div class='mt-1 muted'>DC {fulladdr}</div>
+								</label>
+								<div class='radio--check'>
+									<div class='inside'></div>
+								</div>
+							</div>
+						</div>
+					)
+				})
+
+				$preaddrs.push(
+					<div style=''>
+						<div class='radio d-flex '>
+							<input
+								type='radio'
+								id={'shipping_addr.new'}
+								onInput={(e) => this.onChangeShippingAddress('new')}
+								name='shipping_address'
+								checked={this.state.shipping_address === 'new'}
+							/>
+							<label class='radio--label' for={'shipping_addr.new'}>
+								{this.state.shipping_address === 'new' ? <b>Tới địa chỉ khác</b> : 'Tới địa chỉ khác'}
+							</label>
+							<div class='radio--check'>
+								<div class='inside'></div>
+							</div>
+						</div>
+					</div>,
+				)
+
+				let $new = (
+					<div style='padding-left: 22px !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 ' + (this.state.err.name && 'err')}
+									onInput={this.onChangeFullname}
+									value={this.state.fullname}
+								/>
+							</div>
+							<div class='ml-2' style='flex: 1 !important;'>
+								<div class='order_form_label'>{this.props.t('phones')}</div>
+								<input
+									type='text'
+									class={'form-control ' + (this.state.err.phone && 'err')}
+									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>
+							<AddressPicker
+								initAddress={this.state.address}
+								store={this.props.store}
+								width='100%'
+								onChangeAddress={this.onChangeAddress}
+								full={this.isMobile()}
+								onSelect={this.onSelectAddress}
+								extra_cls={this.state.err.address && 'err'}
+							/>
+						</div>
+
+						<div class='d-flex' style='justify-content: space-between !important;'>
+							<div style='flex: 1 !important; overflow:hidden !important; margin-right: 7px !important;'>
+								<div class='order_form_label'>{this.props.t('province')}</div>
+								<DropdownSelect
+									width='194'
+									full={this.isMobile()}
+									has_search
+									loading={this.state.loadProvince}
+									items={provinces}
+									selected={this.state.selectedProvince}
+									onSelect={this.onSelectProvince}
+									extra_cls={this.state.err.province && 'err'}
+								/>
+							</div>
+							<div style='flex: 1 !important; overflow:hidden !important; margin-left: 7px !important;'>
+								<div class='order_form_label'>{this.props.t('district')}</div>
+								<DropdownSelect
+									width='194'
+									full={this.isMobile()}
+									selected={this.state.selectedDistrict}
+									has_search
+									onSelect={this.onSelectDistrict}
+									loading={this.state.loadDistrict}
+									extra_cls={this.state.err.district && 'err'}
+									items={districts}
+								/>
+							</div>
+						</div>
+						<div class='d-flex' style='justify-content: space-between !important;'>
+							<div style='flex: 1 !important; overflow:hidden !important; margin-right: 7px !important;'>
+								<div class='order_form_label'>{this.props.t('ward')}</div>
+								<DropdownSelect
+									width='194'
+									selected={this.state.selectedWard}
+									full={this.isMobile()}
+									has_search
+									onSelect={this.onSelectWard}
+									extra_cls={this.state.err.ward && 'err'}
+									loading={this.state.loadWard}
+									items={wards}
+								/>
+							</div>
+							<div style='flex: 1 !important; margin-left: 7px !important;'></div>
+						</div>
+					</div>
+				)
+				cls += ' ship_card__active'
+				if (sb.size(addresses) == 0) {
+					$body = (
+						<div>
+							<div class={'mt-3 mb-2 '}>{this.props.t('input_shipping_info')}</div>
+							{$new}
+						</div>
+					)
+				} else {
+					if (this.state.shipping_address !== 'new') $new = null
+
+					$body = (
+						<div>
+							<div class='mt-3 mb-2' style='margin-bottom: 10px !important;'>
+								Vui lòng chọn địa chỉ giao hàng
+							</div>
+							<div class='form'>{$preaddrs}</div>
+							{$new}
+						</div>
+					)
+				}
+			}
+
+			let shopcls = 'ship_card'
+			let shop_icon_active = false
+			if (this.state.shipping === 'shop') {
+				shop_icon_active = true
+				shopcls += ' ship_card__active'
+				$body = (
+					<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 ' + (this.state.err.name && 'err')}
+									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 ' + (this.state.err.phone && 'err')}
+									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 ' + (this.state.err.email && 'err')}
+								onInput={this.onChangeEmail}
+								value={this.state.email}
+							/>
+						</div>
+					</div>
+				)
+			}
+
+			// let $oldaddress = sb.map()
+
+			let seccls = 'card_section'
+			if (this.isMobile()) seccls = 'order_section'
+
+			return (
+				<Fragment>
+					<div class='order_section__line'></div>
+
+					<div class={seccls}>
+						<div class='order_label'>{this.props.t('ship_to')}</div>
+						<div class='d-flex'>
+							<div class={shopcls + ' mr-3'} onClick={(e) => this.onChangeShipping('shop')}>
+								<Icon name='shop' active={shop_icon_active} /> <b class='ml-2'>Nhận hàng tại shop</b>
+							</div>
+							<div class={cls} onClick={(e) => this.onChangeShipping('ship')}>
+								<Icon name='package' active={ship_icon_active} /> <b class='ml-2'>Giao hàng cho tôi</b>
+							</div>
+						</div>
+						{$body}
+					</div>
+				</Fragment>
+			)
+		}
+
+		let addr = sb.get(order, 'shipping.address') || {}
+		let fulladdr = [addr.address, addr.ward, addr.district, addr.region, addr.country].filter((a) => a).join(', ')
+		let $phone = null
+		if (addr.phone)
+			$phone = (
+				<div class='mt-1 muted'>
+					{this.props.t('phn')}:&nbsp;{addr.phone}
+				</div>
+			)
+
+		if (sb.get(order, 'shipping.pickup_at_shop')) {
+			fulladdr = 'Nhận hàng tại cửa hàng'
+		}
+		// if (!fulladdr) return null
+		let $addr = fulladdr ? <div>{fulladdr}</div> : <i class='i muted'>Chưa có địa chỉ giao hàng</i>
+
+		let seccls = 'card_section'
+		if (this.isMobile()) seccls = 'order_section'
+		return (
+			<div class={seccls}>
+				<div class='order_label '>{this.props.t('ship_to')}</div>
+				{$addr}
+				{$phone}
+			</div>
+		)
+	}
+
+	renderDesktopSummary(order) {
+		let $deposit = null
+		if (order.deposit > 0) {
+			$deposit = <span class='muted'>(cọc {sb.formatCurrency(order.deposit)})</span>
+		}
+
+		let $discount = null
+		if (order.total_discount > 0) {
+			$discount = (
+				<div class='order_summary_line'>
+					<div>Giảm giá</div>
+					<div>{sb.formatCurrency(order.total_discount)}</div>
+				</div>
+			)
+		}
+
+		let $pay = null
+
+		if ($deposit || order.payment_made) {
+			$pay = (
+				<Fragment>
+					<div class='order_summary_line'>
+						<div>Bạn đã trả</div>
+						<div>
+							{$deposit} {sb.formatCurrency(order.payment_made)}
+						</div>
+					</div>
+					<div class='order_summary_line'>
+						<div>Bạn chưa trả</div>
+						<div>{sb.formatCurrency((order.total || 0) - (order.payment_made || 0))}</div>
+					</div>
+				</Fragment>
+			)
+		}
+
+		let $tax = (
+			<div class='order_summary_line'>
+				<div>Tiền thuế</div>
+				<div>{sb.formatCurrency(order.total_tax)}</div>
+			</div>
+		)
+
+		let $ship = (
+			<div class='order_summary_line'>
+				<div>Phí vận chuyển</div>
+				<div>{sb.get(order, 'shipping.fee', 0)} d</div>
+			</div>
+		)
+
+		let editmode = false
+		if (!order.status || order.status == 'new') {
+			editmode = !order.user_confirmation
+		}
+		let $note = null
+		if (editmode) {
+			$ship = null
+			$tax = null
+			$note = (
+				<div class='muted'>
+					<img class='order_ship_icon' src={require('../../assets/img/info.svg')} />
+					&nbsp; Chưa bao gồm thuế và phí vận chuyển
+				</div>
+			)
+		}
+
+		let seccls = ''
+		if (this.isMobile()) seccls = 'order_section'
+
+		return (
+			<Fragment>
+				<div class='order_section__line'></div>
+				<div class={seccls}>
+					<div class='order_label'>Tóm tắt</div>
+					<div class='order_summary_line'>
+						<div>Tổng tiền hàng</div>
+						<div>{sb.formatCurrency(order.subtotal)}</div>
+					</div>
+					{$tax}
+					{$discount}
+					{$ship}
+					{$note}
+
+					<div
+						class='order_summary_line'
+						style='margin-top: 10px !important; padding-top: 15px !important; border-top: 1px solid #eee !important'>
+						<div>Bạn phải trả</div>
+						<div class='order__total'>{sb.formatCurrency(order.total)}</div>
+					</div>
+					{$pay}
+				</div>
+			</Fragment>
+		)
+	}
+
+	renderStatusBadge(order) {
+		let status = order.status || 'new'
+		return (
+			<div style='float: right !important;' class={'order_status order_status__' + status}>
+				{status}
+			</div>
+		)
+	}
+
+	renderShippingInfo(order) {
+		if (order.status != 'new' || order.user_confirmation) {
+			// read only
+		}
+
+		// let fulladdr = sb.get(order, 'shipping.address.full_address')
+		// if (!fulladdr) return null
+		let shipping_provider = sb.get(order, 'shipping.shipping_provider')
+		if (!shipping_provider) return null
+
+		let shipping_code = sb.get(order, 'shipping.shipping_code')
+		let $tracking_code = null
+		if (shipping_code)
+			$tracking_code = (
+				<div class='muted' style='margin-top: 3px !important'>
+					Vận đơn&nbsp;
+					<a
+						class='order_tracking_link'
+						target='_blank'
+						href={'https://giaohangtietkiem.vn/tra-cuu-van-don/' + shipping_code}>
+						{shipping_code}
+						&nbsp;
+						<img class='order_tracking_link_icon' src={require('../../assets/img/external-link.svg')} />
+					</a>
+				</div>
+			)
+
+		if (shipping_provider == 'ghtk') {
+			return (
+				<div class='order_section'>
+					<div class='order_section_label'>Đơn vị vận chuyển</div>
+					<div class='d-flex align-items-center'>
+						<img class='order_shipping_provider_logo' src={ShippingProvider.ghtk.logo} />
+						<div>
+							{ShippingProvider.ghtk.name}
+							{$tracking_code}
+						</div>
+					</div>
+				</div>
+			)
+		}
+		return null
+	}
+
+	renderDesktopShippingInfo(order) {
+		// let fulladdr = sb.get(order, 'shipping.address.full_address')
+		// if (!fulladdr) return null
+		let shipping_provider = sb.get(order, 'shipping.shipping_provider')
+		if (!shipping_provider) return null
+
+		let shipping_code = sb.get(order, 'shipping.shipping_code')
+		let $tracking_code = null
+		if (shipping_code)
+			$tracking_code = (
+				<div class='muted' style='margin-top: 3px !important'>
+					Vận đơn&nbsp;
+					<a
+						class='order_tracking_link'
+						target='_blank'
+						href={'https://giaohangtietkiem.vn/tra-cuu-van-don/' + shipping_code}>
+						{shipping_code}
+						&nbsp;
+						<img class='order_tracking_link_icon' src={require('../../assets/img/external-link.svg')} />
+					</a>
+				</div>
+			)
+
+		if (shipping_provider == 'ghtk') {
+			return (
+				<Fragment>
+					<div class='order_label'>Đơn vị vận chuyển</div>
+					<div class='d-flex align-items-center'>
+						<img class='order_shipping_provider_logo' src={ShippingProvider.ghtk.logo} />
+						<div>
+							{ShippingProvider.ghtk.name}
+							{$tracking_code}
+						</div>
+					</div>
+				</Fragment>
+			)
+		}
+		return null
+	}
+
+	renderProducts(order) {
+		let $products = null
+		$products = sb.map(order.items, (item) => {
+			if (!item || !item.product) return null
+			let product = item.product
+			return (
+				<div class='order_attachment__product'>
+					<img
+						class='order_attachment__product_img'
+						alt={'' + 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>
+						<div class='order_attachment__product_desc'>{product.description || product.long_description}</div>
+						<div class='order_attachment__product_desc'>
+							{this.props.t('qty')} {item.quantity}&nbsp;·&nbsp;{sb.formatCurrency(product.price)}
+						</div>
+					</div>
+				</div>
+			)
+		})
+
+		if (!this.isMobile())
+			return (
+				<div>
+					<div class='order_label'>{this.props.t('product')}</div>
+					{$products}
+				</div>
+			)
+
+		return (
+			<div class='order_section'>
+				<div class='order_section_label'>{this.props.t('product')}</div>
+				{$products}
+			</div>
+		)
+	}
+
+	onChangeQuantity = (item, text) => {
+		let qty = parseInt(text) || 1
+		item.quantity = qty
+		this.forceUpdate()
+	}
+
+	renderDesktopProducts(order) {
+		let $products = null
+		let editmode = false
+		if (!order.status || order.status == 'new') {
+			editmode = !order.user_confirmation
+		}
+
+		if (editmode) {
+			$products = sb.map(order.items, (item) => {
+				if (!item || !item.product) return null
+				let product = item.product
+				return (
+					<div class='order_attachment__product'>
+						<img
+							class='order_attachment__product_img'
+							alt={'' + product.id}
+							src={sb.get(product, 'images.0') || require('../../assets/img/default.jpg')}
+						/>
+
+						<div style='overflow: hidden !important; flex: 1 !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_desc'>{sb.formatCurrency(product.price)}</div>
+						</div>
+						<input
+							class='form-control'
+							style='text-align: center !important; font-weight: 400 !important; width: 50px !important'
+							value={item.quantity}
+							onInput={(e) => this.onChangeQuantity(item, e.target.value)}
+							type='text'
+						/>
+						<div style='width: 80px !important; text-align: right !important; '>
+							<b>{sb.formatCurrency(item.quantity * product.price)}</b>
+						</div>
+					</div>
+				)
+			})
+		} else {
+			$products = sb.map(order.items, (item) => {
+				if (!item || !item.product) return null
+				let product = item.product
+				return (
+					<div class='order_attachment__product'>
+						<img
+							class='order_attachment__product_img'
+							alt={'' + product.id}
+							src={sb.get(product, 'images.0') || require('../../assets/img/default.jpg')}
+						/>
+
+						<div style='overflow: hidden !important; flex: 1 !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_desc'>{sb.formatCurrency(product.price)}</div>
+						</div>
+						<div style='text-align: center !important; font-weight: 400 !important; width: 50px !important'>
+							{item.quantity}
+						</div>
+						<div style='width: 80px !important; text-align: right !important; '>
+							<b>{sb.formatCurrency(item.total)}</b>
+						</div>
+					</div>
+				)
+			})
+		}
+
+		return (
+			<div class='card_section'>
+				<div class='desktop_order__heading'>
+					{this.renderStatusBadge(order)}
+					<b style='font-size: 18px !important;'>
+						{this.props.t('order')} #{order.order_number || order.id}
+					</b>
+					<div class='muted'>
+						<Time style='font-size: 13px !important;' time={order.issue_date || order.created} />
+					</div>
+				</div>
+
+				<div
+					class='order_label d-flex'
+					style='margin-top: 20px !important;justify-content: space-between !important; align-items: flex-end !important;'>
+					<div style='flex: 1 !important;'>{this.props.t('product')}</div>
+					<div style='font-weight: 400 !important; text-align:center !important; width: 50px !important'>
+						{this.props.t('qty')}
+					</div>
+					<div style='font-weight: 400 !important; text-align: right !important; width: 80px !important;'>
+						{this.props.t('total')}
+					</div>
+				</div>
+				{$products}
+			</div>
+		)
+	}
+
+	renderMobile(order) {
+		if (this.state.step === 'success') return this.renderMobileSuccess(order)
+		let $error = null
+		if (this.state.g_err) {
+			$error = (
+				<div class='mb-2 text__danger'>
+					<img style='margin-top: -4px !important; height: 15px !important;' src={ximg} />
+					&nbsp;<b>{this.state.g_err}</b>
+				</div>
+			)
+		}
+		let $status = (
+			<div>
+				{$error}
+				<div class='btn-confirm-order' style='margin-top: 0 !important;' onClick={this.confirm}>
+					{this.props.t('confirm_order')}
+				</div>
+			</div>
+		)
+
+		let $close = (
+			<div class='order_btn order__btn__light mt-3' onClick={this.onCancel}>
+				{this.props.t('cancel_order')}
+			</div>
+		)
+
+		
+		
+
+		if (order.user_confirmation || order.status != 'new') {
+			$status = null
+			if (this.props.cid)
+			$close = (
+				<div class='order_btn order__btn__light mt-3' onClick={this.close}>
+					{this.props.t('close')}
+				</div>
+			)
+		}
+
+	
+
+		return (
+			<div class='order' style='height: 100% !important'>
+				<div class='order--content'>
+					<div class='order--heading'>
+						{this.renderStatusBadge(order)}
+						<b style='font-size: 16px !important;'>
+							{this.props.t('order')} #{order.order_number || order.id}
+						</b>
+						<div class='muted'>
+							<Time style='font-size: 13px !important;' time={order.issue_date || order.created} />
+						</div>
+					</div>
+					{this.renderProducts(order)}
+					{this.renderDesktopShipping(order)}
+					{this.renderShippingInfo(order)}
+					{this.renderDesktopPaymentMethod(order)}
+					{this.renderDesktopSummary(order)}
+					<div class='order_section pb-3' style='padding-top: 0 !important;'>
+						{$status}
+						{$close}
+					</div>
+				</div>
+			</div>
+		)
+	}
+
+	renderActions(order) {
+		let $actions = null
+		let editmode = false
+		if (!order.status || order.status == 'new') {
+			editmode = !order.user_confirmation
+		}
+
+		if (this.state.step === 'success')
+			return (
+				<div class='d-flex' style='align-items: center !important; justify-content: flex-end !important'>
+					<div>Ghi nhận thành công</div>&nbsp;
+					<img style='width: 16px !important; height: 16px !important;' width='16' height='16' src={checkedimg} />
+				</div>
+			)
+
+		if (editmode) {
+			let $error = null
+			if (this.state.g_err) {
+				$error = (
+					<div class='mb-2 text__danger'>
+						<img style='margin-top: -4px !important; height: 15px !important;' src={ximg} />
+						&nbsp;<b>{this.state.g_err}</b>
+					</div>
+				)
+			}
+
+			$actions = (
+				<div>
+					{$error}
+					<div class='btn-confirm-order' onClick={this.confirm}>
+						{this.props.t('confirm_order')}
+					</div>
+					<div class='btn-cancel-order' onClick={this.onCancel}>
+						{this.props.t('cancel_order')}
+					</div>
+				</div>
+			)
+		}
+		return $actions
+	}
+
+	renderDesktop(order) {
+		let acc = this.props.store.matchAccount()
+		var uri = acc.logo_url || require('../../assets/img/image_default.png')
+
+		return (
+			<div class='desktop order'>
+				<div class='order_acc_header'>
+					<img class='order_acc_logo' src={uri} />
+					<div class='order_acc_name'>{acc.name}</div>
+				</div>
+				<div class='desktop_order__content'>
+					<div style='flex: 1 !important; padding-right: 20px !important;'>
+						{this.renderDesktopProducts(order)}
+						{this.renderDesktopShipping(order)}
+						{this.renderDesktopShippingInfo(order)}
+						{this.renderDesktopPaymentMethod(order)}
+
+						<div class='order__footer'>
+							<a target='_blank' href='https://subiz.com.vn' class='order__footer_link'>
+								Cung cấp bởi <b>Subiz</b>
+							</a>
+							<div class='order__footer_delimiter'></div>
+							<a target='_blank' href='https://subiz.com.vn/vi/terms-of-service.html' class='order__footer_link'>
+								Điều khoản
+							</a>
+							<a target='_blank' href='https://subiz.com.vn/vi/privacy-policy.html' class='order__footer_link'>
+								Quyền riêng tư
+							</a>
+						</div>
+					</div>
+					<div>
+						<div class='order_recap'>
+							{this.renderDesktopSummary(order)}
+							{this.renderActions(order)}
+						</div>
+					</div>
+				</div>
+			</div>
+		)
+	}
+
+	render() {
+		if (this.state.loading)
+			return (
+				<div class='order_error'>
+					<Spinner class='mt-4' size='60' static />
+				</div>
+			)
+		if (this.state.error)
+			return (
+				<div class='order_error'>
+					<img class='mt-3' src={require('../../assets/img/empty_1.svg')} />
+					<div class='mt-3'>{this.props.t('order_load_error')}</div>
+				</div>
+			)
+		let order = this.state.order
+		if (this.isMobile()) return this.renderMobile(order)
+		return this.renderDesktop(order)
+	}
+
+	confirm = async () => {
+		this.setState({g_err: ''})
+		// validate
+		let err = {}
+		if (!this.state.shipping) {
+			this.setState({g_err: 'Mời bạn chọn địa chỉ giao hàng trước khi xác nhận'})
+		}
+		if (this.state.shipping === 'shop') {
+			if (!sb.isPhone(this.state.phone)) {
+				err.phone = true
+			}
+
+			if (!sb.trim(this.state.fullname)) {
+				err.name = true
+			}
+			if (!sb.trim(this.state.email)) {
+				err.email = true
+			}
+		} else if (this.state.shipping_address == 'new') {
+			if (!sb.isPhone(this.state.phone)) {
+				err.phone = true
+			}
+
+			if (!sb.trim(this.state.fullname)) {
+				err.name = true
+			}
+			if (!sb.trim(this.state.address)) {
+				err.address = true
+			}
+
+			if (sb.size(this.state.selectedWard) == 0) {
+				err.ward = true
+			}
+
+			if (sb.size(this.state.selectedDistrict) == 0) {
+				err.district = true
+			}
+
+			if (sb.size(this.state.selectedProvince) == 0) {
+				err.province = true
+			}
+		}
+
+		if (sb.size(err) > 0) {
+			this.setState({err, g_err: this.props.t('input_shipping_info_err')})
+			return
+		}
+
+		// save
+		let user = this.props.store.matchUser()
+		let ufullname = sb.getUserAttr(user, 'fullname', 'text')
+		let uemail = sb.getUserAttr(user, 'emails', 'text')
+		let uphone = sb.getUserAttr(user, 'phones', 'text')
+
+		let order = sb.cloneDeep(this.state.order)
+		if (this.state.shipping === 'shop') {
+			sb.set(order, 'shipping.pickup_at_shop', true)
+			sb.set(order, 'shipping.address.phone', this.state.phone)
+			sb.set(order, 'shipping.address.fullname', this.state.fullname)
+			sb.set(order, 'shipping.address.email', this.state.email)
+		} else {
+			if (this.state.shipping_address == 'new') {
+				let out = await this.props.store.createShippingAddress({
+					address: this.state.address,
+					country: 'Việt Nam',
+					fullname: this.state.fullname,
+					email: this.state.email,
+					phone: this.state.phone,
+					district: this.state.selectedDistrict.name,
+					district_id: this.state.selectedDistrict.id,
+					province: this.state.selectedProvince.name,
+					province_id: this.state.selectedProvince.id,
+					ward: this.state.selectedWard.name,
+					street: this.state.street,
+					ward_id: this.state.selectedWard.id,
+				})
+
+				if (out.error) return this.setState({g_err: this.props.t('update_failed')})
+				sb.set(order, 'shipping.address', out.body)
+			} else {
+				let addresses = this.props.store.matchShippingAddresses()
+				let sa = sb.find(addresses, (addr) => addr.id === this.state.shipping_address)
+				if (!sa) {
+					return this.setState({err, g_err: this.props.t('input_shipping_info_err')})
+				}
+				sb.set(order, 'shipping.address', sa)
+			}
+		}
+
+		let changeduser = false
+		if (!ufullname && this.state.fullname) {
+			changeduser = true
+			sb.setUserAttr(user, {key: 'fullname', text: this.state.fullname})
+		}
+
+		if (!uemail && this.state.email) {
+			changeduser = true
+			sb.setUserAttr(user, {key: 'emails', text: this.state.email})
+		}
+
+		if (!uphone && this.state.phone) {
+			changeduser = true
+			sb.setUserAttr(user, {key: 'phones', text: this.state.phone})
+		}
+
+		// quick update user
+		if (changeduser) this.props.store.setUser(user)
+
+		this.setState({sending: true})
+		order.user_confirmation = 'confirmed'
+		let out = await this.props.store.updateOrder(order)
+		this.setState({sending: false})
+		if (out.error) {
+			return this.setState({g_err: this.props.t('update_failed')})
+		}
+
+		this.setState({step: 'success'})
+		if (this.props.onResponse) this.props.onResponse('confirmed')
+	}
+
+	onCancel = () => {
+		if (this.props.onResponse) this.props.onResponse('rejected')
+		this.close()
+	}
+
+	close = () => {
+		if (this.props.cid && !this.state.order.user_confirmation) {
+			let order = sb.cloneDeep(this.state.order)
+			order.user_confirmation = 'rejected'
+			this.props.store.updateOrder(order)
+		}
+		if (this.props.onClose) this.props.onClose()
+	}
+}
+
+let ShippingProvider = {
+	ghtk: {
+		name: 'Giao hàng tiết kiệm',
+		logo: require('../../assets/img/ghtk.svg'),
+	},
+	ghn: {
+		name: 'Giao hàng nhanh',
+		logo: require('../../assets/img/ghn.svg'),
+	},
+}