@subiz/widget-v4 4.0.46 → 4.0.51

package/assets/img/external-link.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>

package/assets/less/message.less

@@ -34,7 +34,7 @@
 
 .file-attachment--agent {
 	background-color: @primary-color;
-  width: fit-content;
+	width: fit-content;
 }
 
 .file-attachment--user {
@@ -46,7 +46,7 @@
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-  width: fit-content;
+	width: fit-content;
 }
 
 .file-attachment--agent .file-attachment--filename {
@@ -55,7 +55,7 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;
-  max-width: 200px;
+	max-width: 200px;
 }
 
 .file-attachment--user .file-attachment--filename {
@@ -64,7 +64,7 @@
 	text-overflow: ellipsis;
 	overflow: hidden;
 	white-space: nowrap;
-  max-width: 200px;
+	max-width: 200px;
 }
 
 .file-attachment--download {
@@ -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);
 	}
 }
 
@@ -392,7 +392,6 @@ a.message_error {
 	}
 }
 
-
 .message_quick_replies {
 	display: flex;
 	flex-wrap: wrap;
@@ -405,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;
@@ -447,9 +446,9 @@ a.message_error {
 	display: inline-block;
 	vertical-align: top;
 
-  &:last-child {
-    margin-right: 0;
-  }
+	&:last-child {
+		margin-right: 0;
+	}
 	.generic-attachment--element-img {
 		width: 100%;
 		height: 150px;
@@ -500,38 +499,207 @@ a.message_error {
 }
 
 .generic-attachment-navigator {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  cursor: pointer;
-  width: 20px;
-  font-size: 80px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  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);
-  }
-
-  &.generic-attachment-navigator--disabled {
-    display: none;
-  }
-
-  &.generic-attachment-navigator--left {
-    left: 2px;
-  }
-
-  &.generic-attachment-navigator--right {
-    right: 2px;
-  }
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	cursor: pointer;
+	width: 20px;
+	font-size: 80px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	.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));
+	}
+
+	&.generic-attachment-navigator--disabled {
+		display: none;
+	}
+
+	&.generic-attachment-navigator--left {
+		left: 2px;
+	}
+
+	&.generic-attachment-navigator--right {
+		right: 2px;
+	}
 }
 
 .generic-attachment-navigator-icon {
-  font-size: 80px;
+	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;
+
+	border: 1px solid #d8d8d8;
+	background: white;
+	border-radius: 7px;
+	overflow: hidden;
+	width: 200px;
+	display: inline-block;
+	vertical-align: top;
+	transition: all 0.1s;
+}
+
+.product_attachment.product_attachment__user {
+	margin-right: 50px;
+
+	align-self: flex-end;
+
+	margin-right: 0;
+	margin-left: 50px;
+	align-self: flex-start;
+}
+
+.product_attachment__img {
+	width: 200px;
+	height: 200px;
+	border-bottom: 1px solid #d8d8d8;
+	object-fit: cover;
+	display: block;
+}
+
+.product_attachment__price {
+	padding-left: 10px;
+}
+
+.product_attachment__btns {
+	margin-top: 5px;
+}
+.product_attachment__btn {
+	border-top: 1px solid #d8d8d8;
+	display: flex;
+	padding: 8px 10px;
+	align-items: center;
+	.color(@black);
+	justify-content: center;
+	cursor: pointer;
+	text-transform: capitalize;
+	&:last-child {
+		margin-right: 0;
+	}
+	&:hover {
+		.color(@primary-color);
+	}
+}
+
+a.product_attachment__title {
+	display: block;
+	padding: 8px 10px 0 10px;
+	font-weight: 500;
+	.color(@black);
+
+	word-break: break-all;
+}
+
+.product_attachment__subtitle {
+	padding: 5px 10px;
+	.color(#aaa);
+	padding-top: 0;
+}
+
+.product_attachment__btn_external_link {
+	width: 16px;
+	height: 16px;
+	margin-left: 5px;
+	margin-top: -2px;
 }

package/compiled_src/chatbox/ChatButton.js

@@ -91,20 +91,26 @@ class ChatButton extends _common.Com {
 
     if (hiddenButtonDesktop) return null;
     let cls = 'widget-layout widget-layout--' + position;
-    if (!this.props.isShow) cls += ' widget-layout--hidden';
+    let opacity = this.state.opacity;
+
+    if (!this.props.isShow) {
+      cls += ' widget-layout--hidden';
+      opacity = 0;
+    }
+
     return (0, _preact.h)("div", {
       class: cls,
-      style: 'opacity: ' + this.state.opacity + ' !important'
+      style: 'opacity: ' + opacity + ' !important'
     }, this.renderPreview(), this.renderButton());
   }
 
-  clearPreview() {
+  ClearPreview() {
     this.setState({
       previewEvent: {}
     });
   }
 
-  showGreeting() {
+  ShowGreeting() {
     let greeting = _index.default.get(this.props.plugin, 'chatbox.greeting', {});
 
     let agentM = this.props.store.matchAgent('*');
@@ -128,7 +134,7 @@ class ChatButton extends _common.Com {
     });
   }
 
-  hideGreeting() {
+  HideGreeting() {
     this.setState({
       previewEvent: {}
     });
@@ -147,7 +153,7 @@ class ChatButton extends _common.Com {
       return;
     }
 
-    this.showGreeting();
+    this.ShowGreeting();
   }
 
   onClick() {

package/compiled_src/chatbox/Event.js

@@ -21,6 +21,10 @@ var _FormSubmitAttachments = _interopRequireDefault(require("./FormSubmitAttachm
 
 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"));
@@ -153,11 +157,14 @@ class Event extends _common.Com {
       }));
     }
 
+    let t = new _index.default.Date(ev.created).toLocaleString();
+
     if (_index.default.get(ev, 'by.type') !== 'user') {
       let $sender = null;
       if (this.props.event.mode === 'lead') $sender = this.renderAgentAvatar(ev);
       return (0, _preact.h)("div", {
-        class: "convo-event agent-message"
+        class: "convo-event agent-message",
+        title: t
       }, $time, $sender, (0, _preact.h)(_TextMessage.default, {
         store: this.props.store,
         ev: ev
@@ -190,6 +197,14 @@ class Event extends _common.Com {
         store: this.props.store,
         ev: ev,
         onSelect: e => this.choosePostbackBtn(e)
+      }), (0, _preact.h)(_ProductAttachments.default, {
+        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,
@@ -232,7 +247,8 @@ class Event extends _common.Com {
     }
 
     return (0, _preact.h)("div", {
-      class: "convo-event user-message"
+      class: "convo-event user-message",
+      title: t
     }, $time, $sender, (0, _preact.h)("div", {
       class: "message-user__container"
     }, $dot, (0, _preact.h)(_TextMessage.default, {
@@ -259,6 +275,10 @@ class Event extends _common.Com {
       onSubmit: this.props.onFormSubmit,
       ref: this.refForm,
       ev: ev
+    }), (0, _preact.h)(_ProductAttachments.default, {
+      t: this.props.t,
+      store: this.props.store,
+      ev: ev
     }), (0, _preact.h)(_FormSubmitAttachments.default, {
       store: this.props.store,
       ev: ev

package/compiled_src/chatbox/MessageInput.js

@@ -17,8 +17,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var dayjs = require('dayjs');
-
 class MessageInput extends _common.Com {
   constructor(props) {
     super(props);
@@ -340,7 +338,14 @@ class MessageInput extends _common.Com {
 
   pasteImage(event) {
     if (!window.File || !window.FileReader || !window.FileList || !window.Blob) return;
-    const name = `Paste-image-${dayjs(new _index.default.Date()).format('YYYY-MM-DD-HH-mm-ss')}`;
+    let now = new _index.default.Date();
+    let year = now.getFullYear();
+    let month = now.getMonth() + 1;
+    let date = now.getDate();
+    let hour = now.getHours();
+    let min = now.getMinutes();
+    let sec = now.getSeconds();
+    const name = `Paste-image-${year}-${month}-${date}-${hour}-${min}-${sec}`;
     let blob = null;
     const copiedData = event.clipboardData.items[0];
 

package/compiled_src/chatbox/OrderAttachments.js

@@ -0,0 +1,113 @@
+"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 || {};
+          let price = this.props.store.getPrice(product, 'price', order.currency);
+          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"
+          }, this.props.t.i18n(product.name)), (0, _preact.h)("div", {
+            class: "order_attachment__product_desc"
+          }, this.props.t.i18n(product.short_description) || this.props.t.i18n(product.description)), (0, _preact.h)("div", {
+            class: "order_attachment__product_desc"
+          }, this.props.t('qty'), " ", item.quantity, "\xA0\xB7\xA0", _index.default.formatCurrency(price))));
+        }));
+      }
+
+      let {
+        total
+      } = this.props.store.getOrderTotal(order);
+      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(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

@@ -0,0 +1,79 @@
+"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 attachments = _index.default.get(this.props.ev, 'data.message.attachments', []);
+
+    let products = _index.default.filter(attachments, att => _index.default.get(att, 'type') === 'product' || _index.default.get(att, 'type') === 'product_preview');
+
+    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;
+      let $detailbtn = null;
+      let url = product.url || product.mobile_url;
+      if (this.props.store.isMobile()) url = product.mobile_url || product.url;
+      if (url) $detailbtn = (0, _preact.h)("a", {
+        class: "product_attachment__btn",
+        href: url,
+        target: "_blank"
+      }, this.props.t('detail'), (0, _preact.h)("img", {
+        src: require('../../assets/img/external-link.svg'),
+        class: "product_attachment__btn_external_link"
+      }));
+      let $title = (0, _preact.h)("a", {
+        href: url,
+        class: "product_attachment__title",
+        target: "_blank"
+      }, this.props.t.i18n(product.name));
+      let $subtitle = null;
+      let desc = this.props.t.i18n(product.short_description) || this.props.t.i18n(product.description);
+      if (desc) $subtitle = (0, _preact.h)("div", {
+        class: "product_attachment__subtitle"
+      }, desc);
+      let $price = null;
+
+      if (product.price) {
+        $price = (0, _preact.h)("div", {
+          class: "product_attachment__price"
+        }, 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]),
+        target: "_blank"
+      }, (0, _preact.h)("img", {
+        class: "product_attachment__img",
+        src: this.props.store.replaceFileUrl(product.images[0])
+      }))), $title, $subtitle, $price, (0, _preact.h)("div", {
+        class: "product_attachment__btns"
+      }, $detailbtn));
+    });
+
+    return $products;
+  }
+
+}
+
+exports.default = ProductAttachments;

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/chatbox/Widget.js

@@ -699,7 +699,20 @@ class Widget extends _common.Com {
   }
 
   renderConvoSummary(convo) {
-    var agents = this.agentsOfConvo(convo);
+    let agentM = this.props.store.matchAgent('*');
+
+    let ags = _index.default.filter(convo.members, m => {
+      return (m.type === 'agent' || m.type === 'bot') && m.membership === 'active';
+    });
+
+    let agentids = _index.default.map(ags, m => m.id);
+
+    agentids = agentids || _index.default.agentsOfConvo(convo)[0];
+
+    let agents = _index.default.map(agentids, id => agentM[id] || {
+      avatar_url: defaultAvatar,
+      fullname: 'Offline Agent'
+    });
 
     var name = _index.default.each(agents, ag => ag.fullname).join(', ');
 
@@ -720,11 +733,13 @@ class Widget extends _common.Com {
         message: _index.default.get(convo, 'last_message')
       }
     });
-    var time = new _index.default.Date(_index.default.getMs(convo.last_event.created) || _index.default.getMs(convo.created));
+
+    var time = _index.default.getMs(_index.default.get(convo, 'last_message_sent.created')) || _index.default.getMs(_index.default.get(convo, 'last_sent.created')) || _index.default.getMs(convo.created);
+
     var $tim = (0, _preact.h)(_time.default, {
       ago: true,
       time: time,
-      key: new _index.default.Date().getTime(),
+      key: time,
       short: true
     });
     let $unread = seen ? null : (0, _preact.h)("div", {