@subiz/widget-v4 4.1.71 → 4.1.73

package/inject.js

@@ -38,7 +38,7 @@ function runChatbox(subiz) {
 			show_close_button: true,
 			overlay: true,
 			text_color: 'rgba(0,0,0,1)',
-			font_family: 'Roboto',
+			font_family: 'Inter',
 			font_size: '14px',
 			background: 'white',
 			spacer: '10',
@@ -410,7 +410,7 @@ function runPopup(subiz) {
 				overlay: true,
 				primary_color: '#FDAD15',
 				text_color: '#333',
-				font_family: 'Roboto',
+				font_family: 'Inter',
 				font_size: '14px',
 				background: 'white',
 				spacer: '10',
@@ -636,7 +636,7 @@ function runPopup2(subiz) {
 				overlay: true,
 				primary_color: '#E36539',
 				text_color: '#333',
-				font_family: 'Roboto',
+				font_family: 'Inter',
 				font_size: '14px',
 				background: 'white',
 				spacer: '10',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.71",
+	"version": "4.1.73",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -9,10 +9,10 @@
 		"lib": "rm -rf compiled_src && npx babel --out-dir=compiled_src src"
 	},
 	"dependencies": {
-		"@subiz/ajax": "^3.0.12",
+		"@subiz/ajax": "^3.0.14",
 		"@subiz/flow": "^1.1.0",
 		"@subiz/storage": "0.0.8",
-		"@subiz/wsclient": "^4.0.21",
+		"@subiz/wsclient": "^4.0.24",
 		"cookie_js": "1.4.2",
 		"core-js": "^3.36.1",
 		"css-loader": "5.2.7",
@@ -23,14 +23,14 @@
 	},
 	"devDependencies": {
 		"@babel/cli": "^7.24.1",
-		"@babel/core": "^7.24.3",
+		"@babel/core": "^7.24.4",
 		"@babel/plugin-proposal-class-properties": "^7.18.6",
 		"@babel/plugin-transform-react-jsx": "^7.23.4",
-		"@babel/preset-env": "^7.24.3",
+		"@babel/preset-env": "^7.24.4",
 		"babel-loader": "^9.1.3",
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.6.0",
-		"puppeteer": "^22.6.0",
+		"puppeteer": "^22.6.3",
 		"webpack": "^5.91.0",
 		"webpack-bundle-analyzer": "^4.10.1",
 		"webpack-cli": "^5.1.4",

package/src/chatbox/AudioAttachments.js

@@ -1,31 +1,24 @@
 import sb from '../util/index.js'
-import {Com} from '../common.js'
 import {h} from 'preact'
 
-export default class AudioAttachments extends Com {
-	constructor(props) {
-		super(props)
-	}
+export default function AudioAttachments(props) {
+	let byType = sb.get(props.ev, 'by.type')
+	var attachments = sb.get(props.ev, 'data.message.attachments', [])
+	var audios = []
+	sb.each(attachments, (att, i) => {
+		if (!att) return
+		if (sb.includes(att.mimetype, 'audio')) audios.push(att)
+	})
+	if (audios.length === 0) return null
 
-	render() {
-		let byType = sb.get(this.props.ev, 'by.type')
-		var attachments = sb.get(this.props.ev, 'data.message.attachments', [])
-		var audios = []
-		sb.each(attachments, (att, i) => {
-			if (!att) return
-			if (sb.includes(att.mimetype, 'audio')) audios.push(att)
-		})
-		if (audios.length === 0) return null
-
-		var $audios = sb.map(audios, (audio, index) => {
-			return (
-				<div key={index} class={`audio-attachment audio-attachment--${byType}`}>
-					<audio class='audio-attachment__audio' controls>
-						<source src={this.props.store.replaceFileUrl(audio.url)} type={audio.mimetype} />
-					</audio>
-				</div>
-			)
-		})
-		return <div class={`message-${byType} message-${byType}-audio`}>{$audios}</div>
-	}
+	var $audios = sb.map(audios, (audio, index) => {
+		return (
+			<div key={index} class={`audio-attachment audio-attachment--${byType}`}>
+				<audio class='audio-attachment__audio' controls>
+					<source src={props.store.replaceFileUrl(audio.url)} type={audio.mimetype} />
+				</audio>
+			</div>
+		)
+	})
+	return <div class={`message-${byType} message-${byType}-audio`}>{$audios}</div>
 }

package/src/chatbox/Event.js

@@ -7,7 +7,10 @@ import FormAttachments from './FormAttachments.js'
 import FormSubmitAttachments from './FormSubmitAttachments.js'
 import GenericTemplateAttachments from './GenericTemplateAttachments.js'
 import ProductAttachments from './ProductAttachments.js'
-import OrderAttachments from './OrderAttachments.js'
+let OrderAttachments = false
+
+const LoadOrderAttachments = () => import(/*webpackChunkName: "OrderAttachment" */ './OrderAttachments.js')
+
 //import FormSubmitAttachment from './formSubmitAttachment.js'
 import VideoAttachments from './VideoAttachments.js'
 import TextMessage from './TextMessage.js'
@@ -113,14 +116,30 @@ export default class Event extends Com {
 		)
 	}
 
+	tryLoadOrder(ev) {
+		let byType = sb.get(ev, 'by.type')
+		if (byType === 'user') return
+		// filter out all generic
+
+		let acc = this.props.store.matchAccount()
+		var attachments = sb.get(ev, 'data.message.attachments', [])
+		let orders = sb.filter(attachments, (att) => att.type === 'order' && att.order).map((att) => att.order)
+
+		if (orders.length === 0) return
+		if (!OrderAttachments)
+			sb.setTimeout(async () => {
+				OrderAttachments = (await LoadOrderAttachments()).default
+			})
+	}
+
 	renderMessageSent() {
 		let ev = this.props.event.ev
-
+		this.tryLoadOrder(ev)
 		var $time = null
 		if (this.props.event.show_time) {
 			$time = (
 				<div class='convo-event-time'>
-					<Time time={ev.created} />
+					<Time time={ev.created} t={this.props.t} />
 				</div>
 			)
 		}

package/src/chatbox/InfoMessage.js

@@ -1,6 +1,6 @@
 import sb from '../util/index.js'
 
-function getRateLang (rating) {
+function getRateLang(rating) {
 	if (!rating) return 'poor'
 	if (rating < 2) return 'poor'
 	if (rating < 4) return 'average'
@@ -8,29 +8,29 @@ function getRateLang (rating) {
 }
 
 import Time from './time.js'
-import { Com } from '../common.js'
-import { h } from 'preact'
+import {Com} from '../common.js'
+import {h} from 'preact'
 //  [ 'ev'],
 export default class InfoMessage extends Com {
-	render () {
+	render() {
 		let ev = this.props.ev.ev
 		var $time = null
 		if (this.props.ev.show_time) {
 			$time = (
-				<div class="convo-event-time">
-					<Time time={ev.created} />
+				<div class='convo-event-time'>
+					<Time time={ev.created} t={this.props.t} />
 				</div>
 			)
 		}
 
 		// if (this.ev.type === 'conversation_rating_requested') return <div class="info-message"></div>
 		if (ev.type === 'conversation_rated') {
-			var rating = sb.get(ev, 'data.conversation.ratings.0', { no_rating: true, rating: 0 })
+			var rating = sb.get(ev, 'data.conversation.ratings.0', {no_rating: true, rating: 0})
 			if (rating.no_rating) return null
 			return (
-				<div class="convo-event">
+				<div class='convo-event'>
 					{$time}
-					<div class="info-message">
+					<div class='info-message'>
 						{this.props.t('rated_as') + ' ' + this.props.t(getRateLang(rating.rating)).toLowerCase()}
 					</div>
 				</div>
@@ -38,9 +38,9 @@ export default class InfoMessage extends Com {
 		}
 		if (ev.type === 'conversation_state_updated' && sb.get(ev, 'data.conversation.state') === 'ended') {
 			return (
-				<div class="convo-event">
+				<div class='convo-event'>
 					{$time}
-					<div class="info-message">{this.props.t('conversation_ended')}</div>
+					<div class='info-message'>{this.props.t('conversation_ended')}</div>
 				</div>
 			)
 		}

package/src/chatbox/OrderAttachments.js

@@ -15,7 +15,7 @@ export default class ProductAttachments extends Com {
 		if (orders.length === 0) return null
 
 		let $orders = sb.map(orders, (order, index) => {
-			sb.calcOrderTotal(order)
+			calcOrderTotal(order)
 			let $note = null
 			if (order.note) {
 				$note = (
@@ -50,7 +50,7 @@ export default class ProductAttachments extends Com {
 										>
 											{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'>{getProductPropName(product, ' / ')}</div>
 										<div class='order_attachment__product_desc'>
 											{this.props.t('qty')} {item.quantity}&nbsp;·&nbsp;{sb.formatCurrency(product.price)}
 										</div>
@@ -82,11 +82,11 @@ export default class ProductAttachments extends Com {
 			if (phone) phone = this.props.t('phn') + ': ' + phone
 
 			let $shipto = null
-			if (sb.displayOrderShippingAddress(order) || phone) {
+			if (displayOrderShippingAddress(order) || phone) {
 				$shipto = (
 					<div>
 						<div class='order_attachment__label'>{this.props.t('ship_to')}</div>
-						<div>{sb.displayOrderShippingAddress(order)}</div>
+						<div>{displayOrderShippingAddress(order)}</div>
 						<div class='order_attachment__text_truncate'>{phone}</div>
 					</div>
 				)
@@ -185,7 +185,7 @@ export default class ProductAttachments extends Com {
 				<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'>{sb.getOrderDisplayName(order)}</span>
+						<span class='order_attachment__text_muted order_attachment__text_sm'>{getOrderDisplayName(order)}</span>
 					</div>
 					{$products}
 					{$shipto}
@@ -199,3 +199,116 @@ export default class ProductAttachments extends Com {
 		return $orders
 	}
 }
+
+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)
+}
+
+function getOrderDisplayName(order = {}) {
+	return order.number || order.id || ''
+}
+
+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
+}
+
+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
+}

package/src/chatbox/PoweredBy.js

@@ -1,26 +1,18 @@
 var logo = require('../../assets/img/subiz-mono.svg')
-
-import {Com} from '../common.js'
 import {h} from 'preact'
-export default class PoweredBy extends Com {
-	constructor(props) {
-		super(props)
-	}
-
-	render() {
-		// dont render onmobile
-		if (this.props.store.isMobile()) return null
-		let user = this.props.store.matchUser() || {}
-		var link = `https://subiz.com.vn/?utm_source=${
-			window.location.host || `id-${user.account_id}`
-		}&utm_medium=widget&utm_campaign=widget_referral`
+export default function PoweredBy(props) {
+	// dont render on mobile
+	if (props.store.isMobile()) return null
+	let user = props.store.matchUser() || {}
+	var link = `https://subiz.com.vn/?utm_source=${
+		window.location.host || `id-${user.account_id}`
+	}&utm_medium=widget&utm_campaign=widget_referral`
 
-		return (
-			<div class='poweredby'>
-				<a href={link} class='poweredby--text' target='_blank' title='Subiz'>
-					<img width='14' height='10' class='poweredby--subiz-logo' src={logo} alt='power by subiz' /> Subiz
-				</a>
-			</div>
-		)
-	}
+	return (
+		<div class='poweredby'>
+			<a href={link} class='poweredby--text' target='_blank' title='Subiz'>
+				<img width='14' height='10' class='poweredby--subiz-logo' src={logo} alt='powerred by subiz' /> Subiz
+			</a>
+		</div>
+	)
 }

package/src/chatbox/TextMessage.js

@@ -42,7 +42,6 @@ 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>
 		}
@@ -63,19 +62,6 @@ export default class TextMessage extends Com {
 			if (insert.dynamicField) {
 				return sb.get(insert, 'dynamicField.text', '')
 			}
-			if (insert.mention) {
-				if (insert.mention.id == '*' || insert.mention.id == 'all') {
-					return <span class='mention'>@{this.$t('all')}</span>
-				}
-
-				let ag = store.matchAgent(insert.mention.id)
-				let name = sb.getAgentDisplayName(ag, insert.mention.fullname)
-				return (
-					<span class='mention' data-agent-id={ag.id} data-agent-fullname={name}>
-						@{name}
-					</span>
-				)
-			}
 			if (insert.emoji) return <Emoji emojiCode={`:${insert.emoji}:`} />
 			if (typeof insert === 'string') {
 				let $tags = sb.extractText(insert).map((tag, i) => {

package/src/chatbox/VideoAttachments.js

@@ -20,7 +20,7 @@ export default class VideoAttachments extends Com {
 
 		var $videos = sb.map(videos, (video, index) => {
 			return (
-				<div class={`video-attachment video-attachment--${byType}`}>
+				<div key={index} class={`video-attachment video-attachment--${byType}`}>
 					<video
 						class='video-attachment__video'
 						src={this.props.store.replaceFileUrl(video.url)}

package/src/chatbox/Widget.js

@@ -10,7 +10,9 @@ 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 Order from './Order.js'
+let Order = false
+const LoadOrder = () => import(/*webpackChunkName: "Order" */ './Order.js')
 import ListField from './ListField.js'
 
 const defaultAvatar = 'https://file-subiz.com/fiqoahedjbgwclpouoml-avatar_default_baa8a1d7.png'
@@ -426,15 +428,17 @@ export default class Widget extends Com {
 			let $field = null
 			var errclass = field.error ? 'input--error' : ''
 			if (field.type === 'text') {
-				if (key === 'question') {
+				if (key == 'question' || sb.get(field, 'def.multiple_line')) {
 					$field = (
 						<textarea
 							class='form-control'
 							ref={(ref) => {
 								this['form_' + encode(key)] = ref
 							}}
+							id={'form_' + encode(key)}
 							value={field.value || ''}
 							onInput={(e) => this.onInputChange(key, e.target.value)}
+							onChange={(e) => this.onInputChange(key, e.target.value)}
 							row='4'
 							class='form-control'
 						></textarea>
@@ -445,23 +449,10 @@ export default class Widget extends Com {
 					$field = this.renderRadioField(field)
 				} else if (sb.get(field, 'def.select') === 'dropdown') {
 					$field = this.renderDropdownField(field)
-				} else if (sb.get(field, 'def.multiple_line')) {
-					$field = (
-						<textarea
-							class='form-control'
-							ref={(ref) => {
-								this['form_' + encode(key)] = ref
-							}}
-							value={field.value || ''}
-							onInput={(e) => this.onInputChange(key, e.target.value)}
-							onChange={(e) => this.onInputChange(key, e.target.value)}
-							row='4'
-							class='form-control'
-						></textarea>
-					)
 				} else {
 					$field = (
 						<input
+							id={'form_' + encode(key)}
 							value={field.value || ''}
 							onInput={(e) => this.onInputChange(key, e.target.value)}
 							onChange={(e) => this.onInputChange(key, e.target.value)}
@@ -476,6 +467,7 @@ export default class Widget extends Com {
 			} else if (field.type === 'number') {
 				$field = (
 					<input
+						id={'form_' + encode(key)}
 						value={field.value}
 						onInput={(e) => this.onInputChange(key, e.target.value)}
 						ref={(ref) => {
@@ -537,6 +529,7 @@ export default class Widget extends Com {
 			} else if (field.type === 'datetime') {
 				$field = (
 					<input
+						id={'form_' + encode(key)}
 						value={field.value}
 						onInput={(e) => this.onInputChange(key, e.target.value)}
 						class={`form-control ${errclass}`}
@@ -558,10 +551,10 @@ export default class Widget extends Com {
 			if (field.label) label = field.label
 			return (
 				<div key={'form_' + encode(key)}>
-					<div class='label'>
+					<label class='label' for={'form_' + encode(key)}>
 						{label}
 						{field.is_required ? <span class='ml-1 red'>*</span> : ''}
-					</div>
+					</label>
 					{field.error ? <div class='form-control--valid-input--error'>{field.error}</div> : ''}
 					{$field}
 				</div>
@@ -824,7 +817,10 @@ export default class Widget extends Com {
 		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})
+			sb.setTimeout(async () => {
+				if (!Order) Order = (await LoadOrder()).default
+				this.setState({showOrder: true, order_id: orderid})
+			})
 			// display order instead
 			e.preventDefault()
 			return
@@ -935,7 +931,7 @@ export default class Widget extends Com {
 				<div class='d-flex flex-row'>
 					<div class='convo-list--convo-name'>{name}</div>
 					<div class='convo-list--convo-time'>
-						<Time ago time={time} key={time} short />
+						<Time ago time={time} t={this.props.t} short />
 					</div>
 				</div>
 

package/src/chatbox/time.js

@@ -18,21 +18,28 @@ export default class Time extends Com {
 
 	updateTime() {
 		var t = ''
+		let forceLocale = ''
+		if (this.props.t) {
+			if (this.props.t.locale && typeof this.props.t.locale === 'function') {
+				forceLocale = this.props.t.locale()
+			}
+		}
 		if (this.props.ago) {
 			if (this.props.short) {
 				// more than 10 days
-				if (Math.abs(this.props.time - new sb.Date().getTime()) > 86400000 * 10) {
-					let tim = new sb.Date(this.props.time)
-					let tzyear = tim.getFullYear()
-					let locale = sb.get(navigator, 'languages.0', 'en-US')
-					let tzmonthname = tim.toLocaleDateString(locale, {month: 'short'})
-					let tzdate = tim.getDate()
-					t = tzdate + ' ' + tzmonthname + ' ' + tzyear
-				}
+				//if (Math.abs(this.props.time - new sb.Date().getTime()) > 86400000 * 10) {
+					//let tim = new sb.Date(this.props.time)
+					//let tzyear = tim.getFullYear()
+					//let locale = sb.get(navigator, 'languages.0', 'en-US')
+					//if (forceLocale) locale = forceLocale
+					//let tzmonthname = tim.toLocaleDateString(locale, {month: 'short'})
+					//let tzdate = tim.getDate()
+					//t = tzdate + ' ' + tzmonthname + ' ' + tzyear
+				//}
 			}
 
-			if (!t && this.props.time > 0) t = ago(this.props.time, new sb.Date().getTime())
-		} else t = sb.shortTime(this.props.time, this.props.tzoffset)
+			if (!t && this.props.time > 0) t = ago(this.props.time, new sb.Date().getTime(), this.props.t)
+		} else t = sb.shortTime(this.props.time, this.props.tzoffset, Date.now(), forceLocale)
 
 		if (this.props.uppercase) t = t.toUpperCase()
 
@@ -47,24 +54,47 @@ export default class Time extends Com {
 	}
 
 	render() {
-		return <span style={this.props.style}>{this.state.t}</span>
+		let locale = sb.get(navigator, 'languages.0', 'en-US')
+		if (this.props.t) {
+			if (this.props.t.locale && typeof this.props.t.locale === 'function') {
+				locale = this.props.t.locale()
+			}
+		}
+		let title = new Date(this.props.time).toLocaleString(locale)
+		return <span style={this.props.style} title={title}>{this.state.t}</span>
 	}
 }
 
-function ago(timeA, timeB) {
-	const relObj = {
-		s: '%d s',
-		m: '1m',
-		mm: '%dm',
-		h: '1h',
-		hh: '%dh',
-		d: '1d',
-		dd: '%dd',
-		M: '1M',
-		MM: '%M',
-		y: '1y',
-		yy: '%dy',
+function ago(timeA, timeB, t) {
+	let relObj = {
+		s: '%d sec',
+		m: '1 min',
+		mm: '%d mins',
+		h: '1 hour',
+		hh: '%d hours',
+		d: '1 day',
+		dd: '%d days',
+		M: '1 month',
+		MM: '%d months',
+		y: '1 year',
+		yy: '%d years',
 	}
+	if (t) {
+		relObj = {
+			s: `%d ${t('second_short')}`,
+			m: `1 ${t('minute_short')}`,
+			mm: `%d ${t('minutes_short')}`,
+			h: `1 ${t('hour_short')}`,
+			hh: `%d ${t('hours_short')}`,
+			d: `1 ${t('day_short')}`,
+			dd: `%d ${t('days_short')}`,
+			M: `1 ${t('month_short')}`,
+			MM: `%d ${t('months_short')}`,
+			y: `1 ${t('year_short')}`,
+			yy: `%d ${t('years_short')}`,
+		}
+	}
+
 	const loc = relObj
 	const T = [
 		{l: 's', r: 44, d: 1000},