@subiz/widget-v4 4.0.49 → 4.0.53

package/assets/less/message.less

@@ -148,13 +148,13 @@
 }
 
 a.message_error {
-	color: @red;
+	.color(@red);
 	display: block;
 	text-align: end;
 	font-size: 13px;
 	margin-bottom: 10px;
 	&:hover {
-		color: @red;
+		.color(@red);
 	}
 }
 
@@ -404,7 +404,7 @@ a.message_error {
 	border: 1px solid @primary-color;
 	margin-right: 10px;
 	margin-top: 10px;
-	color: @primary-color;
+	.color(@primary-color);
 	border-radius: 5px;
 	user-select: none;
 	overflow: hidden;
@@ -508,14 +508,14 @@ a.message_error {
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	color: rgba(255, 255, 255, 0.85);
+	.color(rgba(255, 255, 255, 0.85));
 	text-shadow: 0 10px 25px rgba(0, 0, 0, 0.75);
 	z-index: 999;
 	user-select: none;
 
 	&:hover {
 		text-shadow: 0 10px 20px rgba(0, 0, 0, 0.75);
-		color: rgba(255, 255, 255, 1);
+		.color(rgba(255, 255, 255, 1));
 	}
 
 	&.generic-attachment-navigator--disabled {
@@ -535,6 +535,98 @@ a.message_error {
 	font-size: 80px;
 }
 
+.order_attachment__product_img {
+	width: 40px;
+	height: 40px;
+	margin-right: 10px;
+	border-radius: 5px;
+	flex-shrink: 0;
+	display: block;
+	object-fit: contain;
+	background: whitesmoke;
+}
+
+.order_attachment__product_name {
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	.color(black);
+}
+
+.order_attachment__header {
+	padding-bottom: 5px;
+	border-bottom: 1px solid #ccc;
+	margin-bottom: 5px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.order_attachment__product_desc {
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	.color(#999);
+	font-size: 13px;
+}
+
+.order_attachment__product {
+	display: flex;
+	align-items: center;
+	margin-top: 5px;
+	margin-bottom: 5;
+}
+
+.order_attachment__text_sm {
+	font-size: 13px;
+}
+
+.order_attachment__text_muted {
+	.color(@text-muted);
+}
+
+.order_attachment__text_truncate {
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+.order_attachment {
+	margin-top: 10px;
+	.color(black);
+	border: 1px solid #aaa;
+	background: white;
+	border-radius: 8px;
+	width: 220px;
+	overflow-y: auto;
+	overflow-x: hidden;
+	padding: 10px;
+}
+.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__label {
+	font-size: 13px;
+	.color(#777);
+	margin-top: 10px;
+}
+
+.order_attachment.order_attachment__user {
+	margin-right: 50px;
+
+	align-self: flex-end;
+
+	margin-right: 0;
+	margin-left: 50px;
+	align-self: flex-start;
+}
+
 .product_attachment {
 	margin-top: 10px;
 
@@ -567,7 +659,6 @@ a.message_error {
 }
 
 .product_attachment__price {
-	color: #aaa;
 	padding-left: 10px;
 }
 
@@ -579,7 +670,7 @@ a.message_error {
 	display: flex;
 	padding: 8px 10px;
 	align-items: center;
-	color: @black;
+	.color(@black);
 	justify-content: center;
 	cursor: pointer;
 	text-transform: capitalize;
@@ -587,7 +678,7 @@ a.message_error {
 		margin-right: 0;
 	}
 	&:hover {
-		color: @primary-color;
+		.color(@primary-color);
 	}
 }
 
@@ -595,14 +686,14 @@ a.product_attachment__title {
 	display: block;
 	padding: 8px 10px 0 10px;
 	font-weight: 500;
-	color: @black;
+	.color(@black);
 
 	word-break: break-all;
 }
 
 .product_attachment__subtitle {
 	padding: 5px 10px;
-	color: #ddd;
+	.color(#aaa);
 	padding-top: 0;
 }
 

package/compiled_src/chatbox/Event.js

@@ -23,6 +23,8 @@ var _GenericTemplateAttachments = _interopRequireDefault(require("./GenericTempl
 
 var _ProductAttachments = _interopRequireDefault(require("./ProductAttachments.js"));
 
+var _OrderAttachments = _interopRequireDefault(require("./OrderAttachments.js"));
+
 var _VideoAttachments = _interopRequireDefault(require("./VideoAttachments.js"));
 
 var _TextMessage = _interopRequireDefault(require("./TextMessage.js"));
@@ -199,6 +201,10 @@ class Event extends _common.Com {
         t: this.props.t,
         store: this.props.store,
         ev: ev
+      }), (0, _preact.h)(_OrderAttachments.default, {
+        t: this.props.t,
+        store: this.props.store,
+        ev: ev
       }), (0, _preact.h)(_QuickReplies.default, {
         store: this.props.store,
         ev: ev,

package/compiled_src/chatbox/OrderAttachments.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+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 ProductAttachments extends _common.Com {
+  render() {
+    let byType = _index.default.get(this.props.ev, 'by.type');
+
+    if (byType === 'user') return null;
+    let acc = this.props.store.matchAccount();
+
+    var attachments = _index.default.get(this.props.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 null;
+
+    let $orders = _index.default.map(orders, (order, index) => {
+      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"
+        }, order.note));
+      }
+
+      let $products = null;
+
+      if (_index.default.size(order.items) > 0) {
+        $products = (0, _preact.h)("div", null, (0, _preact.h)("div", {
+          class: "order_attachment__label"
+        }, this.props.t('product')), _index.default.map(order.items, item => {
+          let product = item.product || {};
+          return (0, _preact.h)("div", {
+            class: "order_attachment__product"
+          }, (0, _preact.h)("img", {
+            class: "order_attachment__product_img",
+            src: (_index.default.get(product, 'images.0'), 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_desc"
+          }, product.description || product.long_description), (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;
+      let phoneattr = _index.default.find(_index.default.get(order, 'user.attributes', []), attr => attr.key === 'phones') || {
+        key: 'phones',
+        text: ''
+      };
+
+      let phone = _index.default.get(order, 'shipping.address.phone', '').trim();
+
+      phone = phone || _index.default.trim(phoneattr.text);
+      if (phone) phone = this.props.t('phn') + ': ' + phone;
+      let $shipto = null;
+
+      if (address || 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", {
+          class: "order_attachment__text_truncate"
+        }, phone));
+      }
+
+      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);
+    });
+
+    return $orders;
+  }
+
+}
+
+exports.default = ProductAttachments;

package/compiled_src/chatbox/ProductAttachments.js

@@ -25,6 +25,7 @@ class ProductAttachments extends _common.Com {
 
     products = products.filter(product => product.product && product.product.name);
     if (products.length === 0) return null;
+    let acc = this.props.store.matchAccount();
 
     let $products = _index.default.map(products, (att, index) => {
       let product = att.product;
@@ -43,27 +44,28 @@ class ProductAttachments extends _common.Com {
         href: url,
         class: "product_attachment__title",
         target: "_blank"
-      }, this.props.t.i18n(product.name));
+      }, product.name);
       let $subtitle = null;
-      if (product.short_description) $subtitle = (0, _preact.h)("div", {
+      let desc = product.description || product.long_description;
+      if (desc) $subtitle = (0, _preact.h)("div", {
         class: "product_attachment__subtitle"
-      }, product.short_description);
+      }, desc);
       let $price = null;
 
-      if (product.sale_price) {
+      if (product.price) {
         $price = (0, _preact.h)("div", {
           class: "product_attachment__price"
-        }, product.sale_price, " VND");
+        }, product.currency || _index.default.get(acc, 'currency', ''), " ", _index.default.formatCurrency(product.price));
       }
 
       return (0, _preact.h)("div", {
         class: 'product_attachment product_attachment__' + byType
       }, (0, _preact.h)("div", null, (0, _preact.h)("a", {
-        href: this.props.store.replaceFileUrl(product.images[0]),
+        href: this.props.store.replaceFileUrl(product.image),
         target: "_blank"
       }, (0, _preact.h)("img", {
         class: "product_attachment__img",
-        src: this.props.store.replaceFileUrl(product.images[0])
+        src: this.props.store.replaceFileUrl(product.image)
       }))), $title, $subtitle, $price, (0, _preact.h)("div", {
         class: "product_attachment__btns"
       }, $detailbtn));

package/compiled_src/chatbox/TextMessage.js

@@ -31,7 +31,7 @@ let marked = (obj, text) => {
 const loadMarked = () => Promise.resolve().then(() => _interopRequireWildcard(require('marked')));
 
 (async () => {
-  let markedf = (await loadMarked()).default;
+  let markedf = (await loadMarked()).marked;
 
   marked = (obj, text) => markedf(text);
 

package/compiled_src/plugin.js

@@ -407,10 +407,16 @@ function downloadLanguage(store, locale, force) {
 }
 
 const getLocale = (plugin, loc) => {
-  let found = _index.default.find(plugin.locales, l => l === loc);
+  if (!loc) loc = '';
 
-  if (found) return loc;
-  found = _index.default.find(plugin.locales, l => (l || '').toLowerCase().includes(loc.toLowerCase()));
+  let found = _index.default.find(plugin.locales, l => l.toLowerCase().trim() === loc.toLowerCase().trim());
+
+  if (found) return found;
+  found = _index.default.find(plugin.locales, l => {
+    l = l.replace('-', '_').split('_')[0].trim().toLowerCase();
+    let compareloc = loc.replace('-', '_').split('_')[0].trim().toLowerCase();
+    return l == compareloc;
+  });
   if (found) return found;
   return plugin.locale || 'en-US';
 };

package/compiled_src/store/api.js

@@ -157,6 +157,7 @@ class _default {
       data: {
         product: {
           url: pageUrl,
+          name: pageTitle,
           title: pageTitle
         }
       }

package/compiled_src/util/common.js

@@ -15,6 +15,7 @@ exports.diffYear = diffYear;
 exports.each = each;
 exports.filter = filter;
 exports.find = find;
+exports.formatCurrency = formatCurrency;
 exports.getAgentDisplayName = getAgentDisplayName;
 exports.getDayName = getDayName;
 exports.getIntegrationId = getIntegrationId;
@@ -167,7 +168,11 @@ function isObject(item) {
   return item && typeof item === 'object' && !Array.isArray(item);
 }
 
-function merge(target, ...sources) {
+function merge(target) {
+  for (var _len = arguments.length, sources = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    sources[_key - 1] = arguments[_key];
+  }
+
   if (!sources.length) return target;
   const source = sources.shift();
 
@@ -1125,6 +1130,12 @@ var sleep = ms => new Promise(res => setTimeout(res, ms));
 
 exports.sleep = sleep;
 
+function formatCurrency(val) {
+  if (!val) return 0;
+  val = Math.round(val);
+  return val.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
+}
+
 function replaceFileUrl(src) {
   let fileurl = 'https://vcdn.subiz-cdn.com/file/';
   if (!src) return '';

package/compiled_src/util/pubsub.js

@@ -17,9 +17,12 @@ class Pubsub {
 
   publish(topic, payload, payload2, payload3) {
     this.listeners[topic] = filter(this.listeners[topic], sub => sub.obj._isMounted);
-    map(this.listeners[topic], ({
-      cb
-    }) => cb(payload, payload2, payload3));
+    map(this.listeners[topic], _ref => {
+      let {
+        cb
+      } = _ref;
+      return cb(payload, payload2, payload3);
+    });
   }
 
   on2(obj, topic, cb) {

package/dist/HASH

@@ -1 +1 @@
-17cbc08f0e6
+17d750396cd

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.0.49",
+	"version": "4.0.53",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -9,7 +9,7 @@
 		"lib": "rm -rf compiled_src && npx babel --out-dir=compiled_src src"
 	},
 	"dependencies": {
-		"@babel/core": "^7.15.8",
+		"@babel/core": "^7.16.0",
 		"@googlemaps/js-api-loader": "^1.11.4",
 		"@subiz/ajax": "^3.0.12",
 		"@subiz/flow": "^1.0.9",
@@ -17,25 +17,24 @@
 		"@subiz/wsclient": "^3.1.7",
 		"babel-loader": "^8.2.3",
 		"cookie_js": "1.4.2",
-		"core-js": "^3.19.0",
+		"core-js": "^3.19.2",
 		"css-loader": "^5.2.6",
 		"file-loader": "^6.2.0",
 		"less": "^4.1.2",
 		"less-loader": "^10.2.0",
-		"marked": "^3.0.8",
-		"preact": "^10.5.15"
+		"marked": "^4.0.5",
+		"preact": "^10.6.0"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.15.7",
-		"@babel/plugin-proposal-class-properties": "^7.14.5",
-		"@babel/plugin-transform-react-jsx": "^7.14.9",
-		"@babel/preset-env": "^7.15.8",
+		"@babel/cli": "^7.16.0",
+		"@babel/plugin-proposal-class-properties": "^7.16.0",
+		"@babel/plugin-transform-react-jsx": "^7.16.0",
+		"@babel/preset-env": "^7.16.4",
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.5.0",
-		"prettier": "^2.4.1",
-		"webpack": "^5.60.0",
+		"webpack": "^5.64.4",
 		"webpack-bundle-analyzer": "^4.5.0",
 		"webpack-cli": "^4.9.1",
-		"webpack-dev-server": "^4.3.1"
+		"webpack-dev-server": "^4.6.0"
 	}
 }

package/src/chatbox/Event.js

@@ -7,6 +7,7 @@ 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'
 //import FormSubmitAttachment from './formSubmitAttachment.js'
 import VideoAttachments from './VideoAttachments.js'
 import TextMessage from './TextMessage.js'
@@ -140,6 +141,7 @@ export default class Event extends Com {
 					<FormSubmitAttachments store={this.props.store} ev={ev} t={this.props.t} />
 					<GenericTemplateAttachments store={this.props.store} ev={ev} onSelect={(e) => this.choosePostbackBtn(e)} />
 					<ProductAttachments t={this.props.t} store={this.props.store} ev={ev} />
+					<OrderAttachments t={this.props.t} store={this.props.store} ev={ev} />
 					<QuickReplies store={this.props.store} ev={ev} onSelect={(e) => this.chooseQuickReply(e)} />
 				</div>
 			)

package/src/chatbox/OrderAttachments.js

@@ -0,0 +1,107 @@
+import sb from '../util/index.js'
+import {Com} from '../common.js'
+import {h, createRef, Fragment} from 'preact'
+
+export default class ProductAttachments extends Com {
+	render() {
+		let byType = sb.get(this.props.ev, 'by.type')
+		if (byType === 'user') return null
+		// filter out all generic
+
+		let acc = this.props.store.matchAccount()
+		var attachments = sb.get(this.props.ev, 'data.message.attachments', [])
+		let orders = sb.filter(attachments, (att) => att.type === 'order' && att.order).map((att) => att.order)
+
+		if (orders.length === 0) return null
+
+		let $orders = sb.map(orders, (order, index) => {
+			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>
+				)
+			}
+
+			let $products = null
+			if (sb.size(order.items) > 0) {
+				$products = (
+					<div>
+						<div class='order_attachment__label'>{this.props.t('product')}</div>
+						{sb.map(order.items, (item) => {
+							let product = item.product || {}
+
+							return (
+								<div class='order_attachment__product'>
+									<img
+										class='order_attachment__product_img'
+										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>
+							)
+						})}
+					</div>
+				)
+			}
+
+			let $total = (
+				<div class='order_attachment__footer'>
+					<div>{this.props.t('total')}</div>{' '}
+					<div>
+						<b>{sb.formatCurrency(order.total)}</b>
+					</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: '',
+			}
+			let phone = sb.get(order, 'shipping.address.phone', '').trim()
+			phone = phone || sb.trim(phoneattr.text)
+			if (phone) phone = this.props.t('phn') + ': ' + phone
+
+			let $shipto = null
+			if (address || phone) {
+				$shipto = (
+					<div>
+						<div class='order_attachment__label'>{this.props.t('ship_to')}</div>
+						<div class='order_attachment__text_truncate'>{address}</div>
+						<div class='order_attachment__text_truncate'>{phone}</div>
+					</div>
+				)
+			}
+
+			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>
+					</div>
+					{$products}
+					{$shipto}
+					<div>
+						<div class='order_attachment__label'>{this.props.t('payment')}</div>
+						<div>COD</div>
+					</div>
+					{$note}
+					{$total}
+				</div>
+			)
+		})
+		return $orders
+	}
+}

package/src/chatbox/ProductAttachments.js

@@ -16,6 +16,9 @@ export default class ProductAttachments extends Com {
 		products = products.filter((product) => product.product && product.product.name)
 
 		if (products.length === 0) return null
+
+		let acc = this.props.store.matchAccount()
+
 		let $products = sb.map(products, (att, index) => {
 			let product = att.product
 
@@ -32,23 +35,26 @@ export default class ProductAttachments extends Com {
 
 			let $title = (
 				<a href={url} class='product_attachment__title' target='_blank'>
-					{this.props.t.i18n(product.name)}
+					{product.name}
 				</a>
 			)
 			let $subtitle = null
-			if (product.short_description)
-				$subtitle = <div class='product_attachment__subtitle'>{product.short_description}</div>
+			let desc = product.description || product.long_description
+			if (desc) $subtitle = <div class='product_attachment__subtitle'>{desc}</div>
 
 			let $price = null
-			if (product.sale_price) {
-				$price = <div class='product_attachment__price'>{product.sale_price} VND</div>
+			if (product.price) {
+				$price = (
+					<div class='product_attachment__price'>
+						{product.currency || sb.get(acc, 'currency', '')} {sb.formatCurrency(product.price)}
+					</div>
+				)
 			}
-
 			return (
 				<div class={'product_attachment product_attachment__' + byType}>
 					<div>
-						<a href={this.props.store.replaceFileUrl(product.images[0])} target='_blank'>
-							<img class='product_attachment__img' src={this.props.store.replaceFileUrl(product.images[0])} />
+						<a href={this.props.store.replaceFileUrl(product.image)} target='_blank'>
+							<img class='product_attachment__img' src={this.props.store.replaceFileUrl(product.image)} />
 						</a>
 					</div>
 					{$title}