@subiz/widget-v4 4.0.93 → 4.0.95

package/assets/less/chatbox.less

@@ -229,6 +229,14 @@ body div#sbz92 {
 		flex-shrink: 0;
 	}
 
+	.justify-content-between {
+		justify-content: space-between;
+	}
+
+	.no-shrink {
+		flex-shrink: 0;
+	}
+
 	@import 'avatar.less';
 	@import 'widget_header.less';
 	@import 'message_input.less';

package/assets/less/message.less

@@ -613,10 +613,11 @@ a.message_error {
 .order_attachment__footer {
 	margin-top: 10px;
 	padding-top: 10px;
-	display: flex;
-	justify-content: space-between;
 	border-top: 1px solid #ccc;
-	line-height: 1;
+}
+
+.order_attachment__total {
+	font-size: 16px;
 }
 
 .order_attachment__label {
@@ -625,6 +626,10 @@ a.message_error {
 	margin-top: 10px;
 }
 
+.order_attachment__label.no_margin {
+	margin-top: 0;
+}
+
 .order_attachment.order_attachment__user {
 	margin-right: 50px;
 

package/assets/less/order.less

@@ -482,3 +482,13 @@ div.order__card.order__card__active {
 	height: 100%;
 	width: 100%;
 }
+
+.order_attachment__note {
+	font-size: 14px;
+	white-space: pre-wrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 3;
+	-webkit-box-orient: vertical;
+}

package/compiled_src/chatbox/OrderAttachments.js

@@ -18,12 +18,14 @@ 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);
       let $note = null;
       if (order.note) {
         $note = (0, _preact.h)("div", null, (0, _preact.h)("div", {
           class: "order_attachment__label"
         }, this.props.t('note')), (0, _preact.h)("div", {
-          class: "order_attachment__text_truncate"
+          class: "order_attachment__note",
+          title: order.note
         }, order.note));
       }
       let $products = null;
@@ -37,24 +39,26 @@ class ProductAttachments extends _common.Com {
           }, (0, _preact.h)("img", {
             class: "order_attachment__product_img",
             alt: '' + _index.default.get(product, 'id'),
-            src: _index.default.get(product, 'images.0', require('../../assets/img/default.jpg'))
+            src: _index.default.get(product, 'image', require('../../assets/img/default.jpg'))
           }), (0, _preact.h)("div", {
             style: "overflow: hidden !important;"
           }, (0, _preact.h)("div", {
-            class: "order_attachment__product_name"
-          }, product.name), (0, _preact.h)("div", {
+            class: "order_attachment__product_name",
+            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"
-          }, product.description || product.long_description), (0, _preact.h)("div", {
+          }, _index.default.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))));
         }));
       }
       let $total = (0, _preact.h)("div", {
         class: "order_attachment__footer"
-      }, (0, _preact.h)("div", null, this.props.t('total')), ' ', (0, _preact.h)("div", null, (0, _preact.h)("b", null, _index.default.formatCurrency(order.total))));
-      let addr = _index.default.get(order, 'shipping.address', {});
-      let fulladdr = [addr.street, addr.ward, addr.district, addr.region, addr.country].filter(a => a).join(', ');
-      let address = fulladdr;
+      }, (0, _preact.h)("div", {
+        class: "d-flex align-items-center justify-content-between"
+      }, (0, _preact.h)("div", null, this.props.t('total')), ' ', (0, _preact.h)("div", null, (0, _preact.h)("b", {
+        class: "order_attachment__total"
+      }, _index.default.formatCurrency(order.total)))));
       let phoneattr = _index.default.find(_index.default.get(order, 'user.attributes', []), attr => attr.key === 'phones') || {
         key: 'phones',
         text: ''
@@ -63,24 +67,101 @@ class ProductAttachments extends _common.Com {
       phone = phone || _index.default.trim(phoneattr.text);
       if (phone) phone = this.props.t('phn') + ': ' + phone;
       let $shipto = null;
-      if (address || phone) {
+      if (_index.default.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", {
-          class: "order_attachment__text_truncate"
-        }, address), (0, _preact.h)("div", {
+        }, this.props.t('ship_to')), (0, _preact.h)("div", null, _index.default.displayOrderShippingAddress(order)), (0, _preact.h)("div", {
           class: "order_attachment__text_truncate"
         }, phone));
       }
+      let $beforeTax = null;
+      if (order._discount_before_tax) {
+        $beforeTax = (0, _preact.h)("div", {
+          class: "order_attachment__footer"
+        }, (0, _preact.h)("div", {
+          class: "d-flex align-items-center justify-content-between"
+        }, (0, _preact.h)("div", {
+          class: "order_attachment__label no_margin"
+        }, this.props.t('subtotal_before_tax')), ' ', (0, _preact.h)("div", null, _index.default.formatCurrency(order._order_value))), (0, _preact.h)("div", {
+          class: "d-flex align-items-center justify-content-between"
+        }, (0, _preact.h)("div", {
+          class: "order_attachment__label no_margin"
+        }, this.props.t('discount_before_tax')), ' ', (0, _preact.h)("div", null, "-", _index.default.formatCurrency(order._discount_before_tax))));
+      }
+      let $subtotal = (0, _preact.h)("div", {
+        class: "d-flex align-items-center justify-content-between"
+      }, (0, _preact.h)("div", {
+        class: "order_attachment__label no_margin"
+      }, this.props.t('subtotal')), ' ', (0, _preact.h)("div", {
+        style: ""
+      }, _index.default.formatCurrency(order.subtotal)));
+      let $tax = null;
+      if (order.total_tax) {
+        let taxname = '';
+        if (_index.default.size(order._taxM) === 1) {
+          let tax = _index.default.get(order._taxM, '0.tax', {});
+          if (tax.name && tax.percentage) taxname = `(${tax.name} ${Math.round(tax.percentage || 0) / 100}%)`;
+        }
+        $tax = (0, _preact.h)("div", {
+          class: "d-flex align-items-center justify-content-between"
+        }, (0, _preact.h)("div", {
+          class: "order_attachment__label no_margin"
+        }, this.props.t('tax'), " ", taxname), (0, _preact.h)("div", {
+          style: ""
+        }, _index.default.formatCurrency(order.total_tax)));
+      }
+      let $discount = null;
+      if (order.discount_type === 'percentage' && order.discount_percentage) {
+        $discount = (0, _preact.h)("div", {
+          class: "d-flex align-items-center justify-content-between"
+        }, (0, _preact.h)("div", {
+          class: "order_attachment__label no_margin"
+        }, this.props.t('discount_after_tax'), " (", Math.round(order.discount_percentage / 100), "%)"), ' ', (0, _preact.h)("div", {
+          style: ""
+        }, "-", _index.default.formatCurrency(order._computed_discount)));
+      }
+      if (order.discount_type === 'amount' && order.discount_amount) {
+        $discount = (0, _preact.h)("div", {
+          class: "d-flex align-items-center justify-content-between"
+        }, (0, _preact.h)("div", {
+          class: "order_attachment__label no_margin"
+        }, this.props.t('discount_after_tax')), ' ', (0, _preact.h)("div", {
+          class: "no-shrink"
+        }, "-", _index.default.formatCurrency(order._computed_discount)));
+      }
+      let $shipping = null;
+      if (_index.default.get(order, 'shipping.nominal_fee')) {
+        $shipping = (0, _preact.h)("div", {
+          class: "d-flex align-items-center justify-content-between"
+        }, (0, _preact.h)("div", {
+          class: "order_attachment__label no_margin"
+        }, this.props.t('shipping_fee')), ' ', (0, _preact.h)("div", {
+          style: ""
+        }, _index.default.formatCurrency(_index.default.get(order, 'shipping.nominal_fee', 0))));
+      }
+      let $adjustment = null;
+      if (order.adjustment) {
+        $adjustment = (0, _preact.h)("div", {
+          class: "d-flex align-items-center justify-content-between"
+        }, (0, _preact.h)("div", {
+          class: "order_attachment__label no_margin"
+        }, order.adjustment_description), ' ', (0, _preact.h)("div", {
+          class: "no-shrink"
+        }, _index.default.formatCurrency(order.adjustment)));
+      }
+      $subtotal = (0, _preact.h)("div", {
+        class: "order_attachment__footer"
+      }, $subtotal, $tax, $shipping, $discount, $adjustment);
+      if (!$shipping && !$adjustment && !$discount && !$tax) {
+        $subtotal = null;
+      }
       return (0, _preact.h)("div", {
         class: `order_attachment order_attachment__${byType}`
       }, (0, _preact.h)("div", {
         class: "order_attachment__header"
       }, this.props.t('order'), (0, _preact.h)("span", {
         class: "order_attachment__text_muted order_attachment__text_sm"
-      }, "#", order.id)), $products, $shipto, (0, _preact.h)("div", null, (0, _preact.h)("div", {
-        class: "order_attachment__label"
-      }, this.props.t('payment')), (0, _preact.h)("div", null, "COD")), $note, $total);
+      }, _index.default.getOrderDisplayName(order))), $products, $shipto, $note, $beforeTax, $subtotal, $total);
     });
     return $orders;
   }

package/compiled_src/store/store.js

@@ -118,7 +118,10 @@ class Store {
       if (!_index.default.get(this.kv.match('user'), 'id')) return;
       if (_index.default.isUserBanned(this.kv.match('user'))) return;
       return this.api.sendPresence(this.device, this.browserVisibility === 'visible' && document.hasFocus(), this._currentViewingProduct.id, this._currentViewingProduct.source_id, this._currentViewingProduct.sku);
-    }, 1000));
+    }, 1000,
+    {
+      leading: false
+    }));
     _defineProperty(this, "now", () => _index.default.Date.now() + this.timeDiff);
     _defineProperty(this, "seenQueue", []);
     _defineProperty(this, "matchTrafficSource", () => this.kv.match('traffic_source'));

package/compiled_src/util/index.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var common = _interopRequireWildcard(require("./common.js"));
 var extractor = _interopRequireWildcard(require("./extractor.js"));
 var campaign = _interopRequireWildcard(require("./campaign.js"));
+var order = _interopRequireWildcard(require("./order.js"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
@@ -20,5 +21,6 @@ sb.set = op.set;
 sb.Pubsub = require('./pubsub.js').default;
 sb = Object.assign(sb, extractor);
 sb = Object.assign(sb, campaign);
+sb = Object.assign(sb, order);
 var _default = sb;
 exports.default = _default;

package/compiled_src/util/order.js

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calcOrderTotal = calcOrderTotal;
+exports.displayOrderShippingAddress = displayOrderShippingAddress;
+exports.getOrderDisplayName = getOrderDisplayName;
+exports.getProductPropName = getProductPropName;
+const op = require('./op.js');
+const common = require('./common');
+op.filter = common.filter;
+op.map = common.map;
+op.each = common.each;
+op.size = common.size;
+op.find = common.find;
+function getProductPropName(product) {
+  let seperator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ' - ';
+  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() {
+  let order = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.0.93",
+	"version": "4.0.95",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -19,7 +19,7 @@
 		"file-loader": "^6.2.0",
 		"less": "^4.1.3",
 		"less-loader": "^11.1.0",
-		"marked": "^4.2.2",
+		"marked": "^4.2.3",
 		"preact": "^10.11.3"
 	},
 	"devDependencies": {
@@ -31,11 +31,10 @@
 		"babel-loader": "^9.1.0",
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.5.0",
-		"prettier": "^2.7.1",
-		"puppeteer": "^19.2.2",
+		"puppeteer": "^19.3.0",
 		"webpack": "^5.75.0",
 		"webpack-bundle-analyzer": "^4.7.0",
-		"webpack-cli": "^4.10.0",
+		"webpack-cli": "^5.0.0",
 		"webpack-dev-server": "^4.11.1"
 	}
 }

package/src/chatbox/OrderAttachments.js

@@ -15,12 +15,15 @@ export default class ProductAttachments extends Com {
 		if (orders.length === 0) return null
 
 		let $orders = sb.map(orders, (order, index) => {
+			sb.calcOrderTotal(order)
 			let $note = null
 			if (order.note) {
 				$note = (
 					<div>
 						<div class='order_attachment__label'>{this.props.t('note')}</div>
-						<div class='order_attachment__text_truncate'>{order.note}</div>
+						<div class='order_attachment__note' title={order.note}>
+							{order.note}
+						</div>
 					</div>
 				)
 			}
@@ -38,11 +41,16 @@ export default class ProductAttachments extends Com {
 									<img
 										class='order_attachment__product_img'
 										alt={'' + sb.get(product, 'id')}
-										src={sb.get(product, 'images.0', require('../../assets/img/default.jpg'))}
+										src={sb.get(product, 'image', 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_name'
+											title={this.props.t.i18n(product.i18n_name) || product.name}
+										>
+											{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'>
 											{this.props.t('qty')} {item.quantity}&nbsp;·&nbsp;{sb.formatCurrency(product.price)}
 										</div>
@@ -56,17 +64,15 @@ export default class ProductAttachments extends Com {
 
 			let $total = (
 				<div class='order_attachment__footer'>
-					<div>{this.props.t('total')}</div>{' '}
-					<div>
-						<b>{sb.formatCurrency(order.total)}</b>
+					<div class='d-flex align-items-center justify-content-between'>
+						<div>{this.props.t('total')}</div>{' '}
+						<div>
+							<b class='order_attachment__total'>{sb.formatCurrency(order.total)}</b>
+						</div>
 					</div>
 				</div>
 			)
 
-			let addr = sb.get(order, 'shipping.address', {})
-			let fulladdr = [addr.street, addr.ward, addr.district, addr.region, addr.country].filter((a) => a).join(', ')
-			let address = fulladdr
-
 			let phoneattr = sb.find(sb.get(order, 'user.attributes', []), (attr) => attr.key === 'phones') || {
 				key: 'phones',
 				text: '',
@@ -76,29 +82,116 @@ export default class ProductAttachments extends Com {
 			if (phone) phone = this.props.t('phn') + ': ' + phone
 
 			let $shipto = null
-			if (address || phone) {
+			if (sb.displayOrderShippingAddress(order) || phone) {
 				$shipto = (
 					<div>
 						<div class='order_attachment__label'>{this.props.t('ship_to')}</div>
-						<div class='order_attachment__text_truncate'>{address}</div>
+						<div>{sb.displayOrderShippingAddress(order)}</div>
 						<div class='order_attachment__text_truncate'>{phone}</div>
 					</div>
 				)
 			}
 
+			let $beforeTax = null
+			if (order._discount_before_tax) {
+				$beforeTax = (
+					<div class='order_attachment__footer'>
+						<div class='d-flex align-items-center justify-content-between'>
+							<div class='order_attachment__label no_margin'>{this.props.t('subtotal_before_tax')}</div>{' '}
+							<div>{sb.formatCurrency(order._order_value)}</div>
+						</div>
+						<div class='d-flex align-items-center justify-content-between'>
+							<div class='order_attachment__label no_margin'>{this.props.t('discount_before_tax')}</div>{' '}
+							<div>-{sb.formatCurrency(order._discount_before_tax)}</div>
+						</div>
+					</div>
+				)
+			}
+
+			let $subtotal = (
+				<div class='d-flex align-items-center justify-content-between'>
+					<div class='order_attachment__label no_margin'>{this.props.t('subtotal')}</div>{' '}
+					<div style=''>{sb.formatCurrency(order.subtotal)}</div>
+				</div>
+			)
+			let $tax = null
+			if (order.total_tax) {
+				let taxname = ''
+				if (sb.size(order._taxM) === 1) {
+					let tax = sb.get(order._taxM, '0.tax', {})
+					if (tax.name && tax.percentage) taxname = `(${tax.name} ${Math.round(tax.percentage || 0) / 100}%)`
+				}
+				$tax = (
+					<div class='d-flex align-items-center justify-content-between'>
+						<div class='order_attachment__label no_margin'>
+							{this.props.t('tax')} {taxname}
+						</div>
+						<div style=''>{sb.formatCurrency(order.total_tax)}</div>
+					</div>
+				)
+			}
+			let $discount = null
+			if (order.discount_type === 'percentage' && order.discount_percentage) {
+				$discount = (
+					<div class='d-flex align-items-center justify-content-between'>
+						<div class='order_attachment__label no_margin'>
+							{this.props.t('discount_after_tax')} ({Math.round(order.discount_percentage / 100)}%)
+						</div>{' '}
+						<div style=''>-{sb.formatCurrency(order._computed_discount)}</div>
+					</div>
+				)
+			}
+			if (order.discount_type === 'amount' && order.discount_amount) {
+				$discount = (
+					<div class='d-flex align-items-center justify-content-between'>
+						<div class='order_attachment__label no_margin'>{this.props.t('discount_after_tax')}</div>{' '}
+						<div class='no-shrink'>-{sb.formatCurrency(order._computed_discount)}</div>
+					</div>
+				)
+			}
+			let $shipping = null
+			if (sb.get(order, 'shipping.nominal_fee')) {
+				$shipping = (
+					<div class='d-flex align-items-center justify-content-between'>
+						<div class='order_attachment__label no_margin'>{this.props.t('shipping_fee')}</div>{' '}
+						<div style=''>{sb.formatCurrency(sb.get(order, 'shipping.nominal_fee', 0))}</div>
+					</div>
+				)
+			}
+			let $adjustment = null
+			if (order.adjustment) {
+				$adjustment = (
+					<div class='d-flex align-items-center justify-content-between'>
+						<div class='order_attachment__label no_margin'>{order.adjustment_description}</div>{' '}
+						<div class='no-shrink'>{sb.formatCurrency(order.adjustment)}</div>
+					</div>
+				)
+			}
+
+			$subtotal = (
+				<div class='order_attachment__footer'>
+					{$subtotal}
+					{$tax}
+					{$shipping}
+					{$discount}
+					{$adjustment}
+				</div>
+			)
+			if (!$shipping && !$adjustment && !$discount && !$tax) {
+				$subtotal = null
+			}
+
 			return (
 				<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'>#{order.id}</span>
+						<span class='order_attachment__text_muted order_attachment__text_sm'>{sb.getOrderDisplayName(order)}</span>
 					</div>
 					{$products}
 					{$shipto}
-					<div>
-						<div class='order_attachment__label'>{this.props.t('payment')}</div>
-						<div>COD</div>
-					</div>
 					{$note}
+					{$beforeTax}
+					{$subtotal}
 					{$total}
 				</div>
 			)

package/src/store/store.js

@@ -317,18 +317,22 @@ export default class Store {
 	matchHasManuallyClosed = () => !!this.kv.match('hasManuallyClosed') // true if user has ever closed the widget
 	matchClosePreviewAt = () => this.kv.match('close_preview_at') || 0
 
-	sendPresence = sb.throttle(async () => {
-		await this.readyGate.entry()
-		if (!sb.get(this.kv.match('user'), 'id')) return // store not init
-		if (sb.isUserBanned(this.kv.match('user'))) return
-		return this.api.sendPresence(
-			this.device,
-			this.browserVisibility === 'visible' && document.hasFocus(),
-			this._currentViewingProduct.id,
-			this._currentViewingProduct.source_id,
-			this._currentViewingProduct.sku,
-		)
-	}, 1000)
+	sendPresence = sb.throttle(
+		async () => {
+			await this.readyGate.entry()
+			if (!sb.get(this.kv.match('user'), 'id')) return // store not init
+			if (sb.isUserBanned(this.kv.match('user'))) return
+			return this.api.sendPresence(
+				this.device,
+				this.browserVisibility === 'visible' && document.hasFocus(),
+				this._currentViewingProduct.id,
+				this._currentViewingProduct.source_id,
+				this._currentViewingProduct.sku,
+			)
+		},
+		1000, // dont send presence update too tight
+		{leading: false}, // dont send right after load. should send after content_view
+	)
 
 	now = () => sb.Date.now() + this.timeDiff // millisecond on server
 

package/src/util/index.js

@@ -32,4 +32,7 @@ sb = Object.assign(sb, extractor)
 import * as campaign from './campaign.js'
 sb = Object.assign(sb, campaign)
 
+import * as order from './order.js'
+sb = Object.assign(sb, order)
+
 export default sb

package/src/util/order.js

@@ -0,0 +1,120 @@
+const op = require('./op.js')
+const common = require('./common')
+op.filter = common.filter
+op.map = common.map
+op.each = common.each
+op.size = common.size
+op.find = common.find
+
+export 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)
+}
+
+export function getOrderDisplayName(order = {}) {
+	return order.number || order.id || ''
+}
+
+export 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
+}
+
+export 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
+}