@subiz/widget-v4 4.1.71 → 4.1.73

package/app.js

@@ -21,19 +21,6 @@ if (!VERSION) throw new Error('subiz cannot detect version')
 
 var apiV4 = new ApiV4(config.ApiURL, config.FileURL, config.RealtimeURL)
 
-// isV4 tells whether the website is using widget version 4.1 or not
-function isV4_1() {
-	var scripts = document.getElementsByTagName('script')
-	if (!(window._sbzq instanceof Array)) return false
-
-	for (var s of scripts) {
-		if (!s || !s.src) continue
-		if (s.src.indexOf(config.BaseURL) !== -1) return true
-		if (s.src.indexOf('https://widgetv4.subiz.com') !== -1) return true // old
-	}
-	return false
-}
-
 // isV4 tells whether the website is using widget version 4.2 or not
 function isV4_2() {
 	if (window.sbz_v4) return true
@@ -50,24 +37,11 @@ function isV4_2() {
 	return false
 }
 
-// isV2 tells whether the website is using widget version 2 or not
-function isV2() {
-	if (!window._sbzq) return false
-	var scripts = document.getElementsByTagName('script')
-	for (var s of scripts) {
-		if (!s || !s.src) continue
-		if (s.src.indexOf('static.subiz.com') !== -1) return true
-	}
-	return false
-}
-
 // return widget version
 function detect() {
 	if (window._sbzaccid) return '4.3'
 	if (isV4_2()) return '4.2'
 	if (window.subiz_account_id && window.subiz_account_id > 0) return '1'
-	if (isV4_1()) return '4.1'
-	if (isV2()) return '2'
 	return undefined
 }
 
@@ -139,20 +113,6 @@ function loopTitle(laststate) {
 loopTitle()
 
 function init() {
-	// backward compatible api
-	if (VERSION === '1' || VERSION === '2') {
-		console.error('DETECTED SUBIZ OUTDATED V3 EMBEDED CODE', v3accid, '. Please visit https://subiz.com.vn for support')
-		return
-	}
-
-	if (VERSION === '1') apiV4._setAccount(window.subiz_account_id)
-	if (VERSION === '2' || VERSION === '4.1') {
-		let queue = window._sbzq || []
-		if (!Array.isArray(queue)) queue = []
-		window._sbzq = {push: callV2}
-		queue.forEach(callV2)
-	}
-
 	if (VERSION === '4.2' || VERSION === '4.3') {
 		let queue = (window.subiz && window.subiz.q) || []
 		window.subiz = function () {
@@ -169,5 +129,3 @@ function init() {
 }
 
 init()
-
-// TODO: should print example v4_1, v4_2, v4_3, ...

package/assets/less/widget.less

@@ -451,20 +451,21 @@
 .widget-preview--btn-close {
 	display: block;
 	cursor: pointer;
+	opacity: 0.5;
 	align-self: flex-start;
 	background-color: #e5e5e5;
 	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMi4yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXIteCI+PGxpbmUgeDE9IjE4IiB5MT0iNiIgeDI9IjYiIHkyPSIxOCI+PC9saW5lPjxsaW5lIHgxPSI2IiB5MT0iNiIgeDI9IjE4IiB5Mj0iMTgiPjwvbGluZT48L3N2Zz4K');
 	background-size: 16px 16px;
 	background-repeat: no-repeat;
 	background-position: center;
-	width: 22px;
-	height: 22px;
+	width: 24px;
+	height: 24px;
 	display: block;
 	border-radius: 100%;
 	transition: background-color 0.2s;
 
 	&:hover {
-		background-color: #c4c4c4;
+		opacity: 1;
 	}
 }
 
@@ -481,14 +482,14 @@
 .widget-preview--body {
 	display: flex;
 	padding: 15px;
-	align-items: center;
 }
 
 .widget-preview--title {
 	display: block;
 	font-size: 15px;
-	.color(gray);
+	.color(black);
 	margin-bottom: 5px;
+	opacity: 0.7;
 }
 
 .widget-preview--content {

package/assets/less/widget_header.less

@@ -36,15 +36,16 @@
 	.widget-header--title {
 		white-space: nowrap;
 		overflow: hidden;
+		font-weight: 500;
 		text-overflow: ellipsis;
 		font-size: 16px;
 		.color(@text-color);
 	}
 
 	.widget-header--description {
-		font-size: 14px;
+		font-size: 15px;
 		white-space: pre-wrap;
-		opacity: 0.8;
+		opacity: 0.7;
 		flex: 1;
 		.color(@text-color);
 		margin-top: 2.5px;
@@ -76,6 +77,7 @@
 	.widget-header--title {
 		white-space: nowrap;
 		overflow: hidden;
+		font-weight: 500;
 		text-overflow: ellipsis;
 		flex: 1;
 		font-size: 16px;
@@ -121,7 +123,7 @@
 	flex: 1;
 	display: flex;
 	flex-direction: column;
-	margin-left: 7.5px;
+	margin-left: 10px;
 	z-index: 1;
 }
 

package/compiled_src/chatbox/AudioAttachments.js

@@ -3,39 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = AudioAttachments;
 var _index = _interopRequireDefault(require("../util/index.js"));
-var _common = require("../common.js");
 var _preact = require("preact");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-class AudioAttachments extends _common.Com {
-  constructor(props) {
-    super(props);
-  }
-  render() {
-    let byType = _index.default.get(this.props.ev, 'by.type');
-    var attachments = _index.default.get(this.props.ev, 'data.message.attachments', []);
-    var audios = [];
-    _index.default.each(attachments, (att, i) => {
-      if (!att) return;
-      if (_index.default.includes(att.mimetype, 'audio')) audios.push(att);
-    });
-    if (audios.length === 0) return null;
-    var $audios = _index.default.map(audios, (audio, index) => {
-      return (0, _preact.h)("div", {
-        key: index,
-        class: `audio-attachment audio-attachment--${byType}`
-      }, (0, _preact.h)("audio", {
-        class: "audio-attachment__audio",
-        controls: true
-      }, (0, _preact.h)("source", {
-        src: this.props.store.replaceFileUrl(audio.url),
-        type: audio.mimetype
-      })));
-    });
+function AudioAttachments(props) {
+  let byType = _index.default.get(props.ev, 'by.type');
+  var attachments = _index.default.get(props.ev, 'data.message.attachments', []);
+  var audios = [];
+  _index.default.each(attachments, (att, i) => {
+    if (!att) return;
+    if (_index.default.includes(att.mimetype, 'audio')) audios.push(att);
+  });
+  if (audios.length === 0) return null;
+  var $audios = _index.default.map(audios, (audio, index) => {
     return (0, _preact.h)("div", {
-      class: `message-${byType} message-${byType}-audio`
-    }, $audios);
-  }
-}
-exports.default = AudioAttachments;
+      key: index,
+      class: `audio-attachment audio-attachment--${byType}`
+    }, (0, _preact.h)("audio", {
+      class: "audio-attachment__audio",
+      controls: true
+    }, (0, _preact.h)("source", {
+      src: props.store.replaceFileUrl(audio.url),
+      type: audio.mimetype
+    })));
+  });
+  return (0, _preact.h)("div", {
+    class: `message-${byType} message-${byType}-audio`
+  }, $audios);
+}

package/compiled_src/chatbox/Event.js

@@ -13,7 +13,6 @@ var _FormAttachments = _interopRequireDefault(require("./FormAttachments.js"));
 var _FormSubmitAttachments = _interopRequireDefault(require("./FormSubmitAttachments.js"));
 var _GenericTemplateAttachments = _interopRequireDefault(require("./GenericTemplateAttachments.js"));
 var _ProductAttachments = _interopRequireDefault(require("./ProductAttachments.js"));
-var _OrderAttachments = _interopRequireDefault(require("./OrderAttachments.js"));
 var _VideoAttachments = _interopRequireDefault(require("./VideoAttachments.js"));
 var _TextMessage = _interopRequireDefault(require("./TextMessage.js"));
 var _InfoMessage = _interopRequireDefault(require("./InfoMessage.js"));
@@ -22,6 +21,10 @@ var _time = _interopRequireDefault(require("./time.js"));
 var _common = require("../common.js");
 var _preact = require("preact");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+let OrderAttachments = false;
+const LoadOrderAttachments = () => Promise.resolve().then(() => _interopRequireWildcard(require('./OrderAttachments.js')));
 class Event extends _common.Com {
   constructor(props) {
     super(props);
@@ -115,14 +118,27 @@ class Event extends _common.Com {
       class: "message-sender-name"
     }, senderName));
   }
+  tryLoadOrder(ev) {
+    let byType = _index.default.get(ev, 'by.type');
+    if (byType === 'user') return;
+    let acc = this.props.store.matchAccount();
+    var attachments = _index.default.get(ev, 'data.message.attachments', []);
+    let orders = _index.default.filter(attachments, att => att.type === 'order' && att.order).map(att => att.order);
+    if (orders.length === 0) return;
+    if (!OrderAttachments) _index.default.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 = (0, _preact.h)("div", {
         class: "convo-event-time"
       }, (0, _preact.h)(_time.default, {
-        time: ev.created
+        time: ev.created,
+        t: this.props.t
       }));
     }
     let t = new _index.default.Date(ev.created).toLocaleString();
@@ -172,7 +188,7 @@ class Event extends _common.Com {
         onPostback: e => this.choosePostbackBtn(e),
         store: this.props.store,
         ev: ev
-      }), (0, _preact.h)(_OrderAttachments.default, {
+      }), (0, _preact.h)(OrderAttachments, {
         t: this.props.t,
         store: this.props.store,
         ev: ev

package/compiled_src/chatbox/InfoMessage.js

@@ -23,7 +23,8 @@ class InfoMessage extends _common.Com {
       $time = (0, _preact.h)("div", {
         class: "convo-event-time"
       }, (0, _preact.h)(_time.default, {
-        time: ev.created
+        time: ev.created,
+        t: this.props.t
       }));
     }
     if (ev.type === 'conversation_rated') {

package/compiled_src/chatbox/OrderAttachments.js

@@ -17,7 +17,7 @@ class ProductAttachments extends _common.Com {
     let orders = _index.default.filter(attachments, att => att.type === 'order' && att.order).map(att => att.order);
     if (orders.length === 0) return null;
     let $orders = _index.default.map(orders, (order, index) => {
-      _index.default.calcOrderTotal(order);
+      calcOrderTotal(order);
       let $note = null;
       if (order.note) {
         $note = (0, _preact.h)("div", null, (0, _preact.h)("div", {
@@ -46,7 +46,7 @@ class ProductAttachments extends _common.Com {
             title: this.props.t.i18n(product.i18n_name) || product.name
           }, this.props.t.i18n(product.i18n_name) || product.name), (0, _preact.h)("div", {
             class: "order_attachment__product_desc"
-          }, _index.default.getProductPropName(product, ' / ')), (0, _preact.h)("div", {
+          }, getProductPropName(product, ' / ')), (0, _preact.h)("div", {
             class: "order_attachment__product_desc"
           }, this.props.t('qty'), " ", item.quantity, "\xA0\xB7\xA0", _index.default.formatCurrency(product.price))));
         }));
@@ -66,10 +66,10 @@ class ProductAttachments extends _common.Com {
       phone = phone || _index.default.trim(phoneattr.text);
       if (phone) phone = this.props.t('phn') + ': ' + phone;
       let $shipto = null;
-      if (_index.default.displayOrderShippingAddress(order) || phone) {
+      if (displayOrderShippingAddress(order) || phone) {
         $shipto = (0, _preact.h)("div", null, (0, _preact.h)("div", {
           class: "order_attachment__label"
-        }, this.props.t('ship_to')), (0, _preact.h)("div", null, _index.default.displayOrderShippingAddress(order)), (0, _preact.h)("div", {
+        }, this.props.t('ship_to')), (0, _preact.h)("div", null, displayOrderShippingAddress(order)), (0, _preact.h)("div", {
           class: "order_attachment__text_truncate"
         }, phone));
       }
@@ -160,9 +160,105 @@ class ProductAttachments extends _common.Com {
         class: "order_attachment__header"
       }, this.props.t('order'), (0, _preact.h)("span", {
         class: "order_attachment__text_muted order_attachment__text_sm"
-      }, _index.default.getOrderDisplayName(order))), $products, $shipto, $note, $beforeTax, $subtotal, $total);
+      }, getOrderDisplayName(order))), $products, $shipto, $note, $beforeTax, $subtotal, $total);
     });
     return $orders;
   }
 }
-exports.default = ProductAttachments;
+exports.default = ProductAttachments;
+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) {
+  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;
+    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;
+  });
+  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;
+  }
+  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;
+  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/compiled_src/chatbox/PoweredBy.js

@@ -3,32 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _common = require("../common.js");
+exports.default = PoweredBy;
 var _preact = require("preact");
 var logo = require('../../assets/img/subiz-mono.svg');
-class PoweredBy extends _common.Com {
-  constructor(props) {
-    super(props);
-  }
-  render() {
-    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`;
-    return (0, _preact.h)("div", {
-      class: "poweredby"
-    }, (0, _preact.h)("a", {
-      href: link,
-      class: "poweredby--text",
-      target: "_blank",
-      title: "Subiz"
-    }, (0, _preact.h)("img", {
-      width: "14",
-      height: "10",
-      class: "poweredby--subiz-logo",
-      src: logo,
-      alt: "power by subiz"
-    }), " Subiz"));
-  }
-}
-exports.default = PoweredBy;
+function PoweredBy(props) {
+  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 (0, _preact.h)("div", {
+    class: "poweredby"
+  }, (0, _preact.h)("a", {
+    href: link,
+    class: "poweredby--text",
+    target: "_blank",
+    title: "Subiz"
+  }, (0, _preact.h)("img", {
+    width: "14",
+    height: "10",
+    class: "poweredby--subiz-logo",
+    src: logo,
+    alt: "powerred by subiz"
+  }), " Subiz"));
+}

package/compiled_src/chatbox/TextMessage.js

@@ -66,20 +66,6 @@ class TextMessage extends _common.Com {
       if (insert.dynamicField) {
         return _index.default.get(insert, 'dynamicField.text', '');
       }
-      if (insert.mention) {
-        if (insert.mention.id == '*' || insert.mention.id == 'all') {
-          return (0, _preact.h)("span", {
-            class: "mention"
-          }, "@", this.$t('all'));
-        }
-        let ag = store.matchAgent(insert.mention.id);
-        let name = _index.default.getAgentDisplayName(ag, insert.mention.fullname);
-        return (0, _preact.h)("span", {
-          class: "mention",
-          "data-agent-id": ag.id,
-          "data-agent-fullname": name
-        }, "@", name);
-      }
       if (insert.emoji) return (0, _preact.h)(_Emoji.default, {
         emojiCode: `:${insert.emoji}:`
       });

package/compiled_src/chatbox/VideoAttachments.js

@@ -23,6 +23,7 @@ class VideoAttachments extends _common.Com {
     if (videos.length === 0) return null;
     var $videos = _index.default.map(videos, (video, index) => {
       return (0, _preact.h)("div", {
+        key: index,
         class: `video-attachment video-attachment--${byType}`
       }, (0, _preact.h)("video", {
         class: "video-attachment__video",

package/compiled_src/chatbox/Widget.js

@@ -13,7 +13,6 @@ var _MessageInput = _interopRequireDefault(require("./MessageInput.js"));
 var _Events = _interopRequireDefault(require("./Events.js"));
 var _Typing = _interopRequireDefault(require("./Typing.js"));
 var _Rating = _interopRequireDefault(require("./Rating.js"));
-var _Order = _interopRequireDefault(require("./Order.js"));
 var _ListField = _interopRequireDefault(require("./ListField.js"));
 var _spinner = _interopRequireDefault(require("./spinner.js"));
 var _time = _interopRequireDefault(require("./time.js"));
@@ -23,9 +22,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var send = require('../../assets/img/send.svg');
 var checkedimg = require('../../assets/img/done_gray.svg');
 var empty = require('../../assets/img/empty.svg');
+let Order = false;
+const LoadOrder = () => Promise.resolve().then(() => _interopRequireWildcard(require('./Order.js')));
 const defaultAvatar = 'https://file-subiz.com/fiqoahedjbgwclpouoml-avatar_default_baa8a1d7.png';
 class Widget extends _common.Com {
   constructor(props) {
@@ -95,9 +98,12 @@ class Widget extends _common.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
+        _index.default.setTimeout(async () => {
+          if (!Order) Order = (await LoadOrder()).default;
+          this.setState({
+            showOrder: true,
+            order_id: orderid
+          });
         });
         e.preventDefault();
         return;
@@ -462,14 +468,16 @@ class Widget extends _common.Com {
       let $field = null;
       var errclass = field.error ? 'input--error' : '';
       if (field.type === 'text') {
-        if (key === 'question') {
+        if (key == 'question' || _index.default.get(field, 'def.multiple_line')) {
           $field = (0, _preact.h)("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"
           });
@@ -479,20 +487,9 @@ class Widget extends _common.Com {
           $field = this.renderRadioField(field);
         } else if (_index.default.get(field, 'def.select') === 'dropdown') {
           $field = this.renderDropdownField(field);
-        } else if (_index.default.get(field, 'def.multiple_line')) {
-          $field = (0, _preact.h)("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"
-          });
         } else {
           $field = (0, _preact.h)("input", {
+            id: 'form_' + encode(key),
             value: field.value || '',
             onInput: e => this.onInputChange(key, e.target.value),
             onChange: e => this.onInputChange(key, e.target.value),
@@ -505,6 +502,7 @@ class Widget extends _common.Com {
         }
       } else if (field.type === 'number') {
         $field = (0, _preact.h)("input", {
+          id: 'form_' + encode(key),
           value: field.value,
           onInput: e => this.onInputChange(key, e.target.value),
           ref: ref => {
@@ -557,6 +555,7 @@ class Widget extends _common.Com {
         $field = this.renderDropdownField(field);
       } else if (field.type === 'datetime') {
         $field = (0, _preact.h)("input", {
+          id: 'form_' + encode(key),
           value: field.value,
           onInput: e => this.onInputChange(key, e.target.value),
           class: `form-control ${errclass}`,
@@ -576,8 +575,9 @@ class Widget extends _common.Com {
       if (field.label) label = field.label;
       return (0, _preact.h)("div", {
         key: 'form_' + encode(key)
-      }, (0, _preact.h)("div", {
-        class: "label"
+      }, (0, _preact.h)("label", {
+        class: "label",
+        for: 'form_' + encode(key)
       }, label, field.is_required ? (0, _preact.h)("span", {
         class: "ml-1 red"
       }, "*") : ''), field.error ? (0, _preact.h)("div", {
@@ -779,7 +779,7 @@ class Widget extends _common.Com {
       onRate: e => this.onRate(e),
       cid: this.props.cid,
       t: this.props.t
-    }), (0, _preact.h)(_Order.default, {
+    }), (0, _preact.h)(Order, {
       forceView: this.props.view,
       plugin: this.props.plugin,
       show: this.state.showOrder,
@@ -872,7 +872,7 @@ class Widget extends _common.Com {
     }, (0, _preact.h)(_time.default, {
       ago: true,
       time: time,
-      key: time,
+      t: this.props.t,
       short: true
     }))), (0, _preact.h)("div", {
       class: "d-flex flex-row"