@subiz/widget-v4 4.1.70 → 4.1.72

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/AgentsAvatar.js

@@ -3,142 +3,136 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = AgentsAvatar;
 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 AgentsAvatar extends _common.Com {
-  constructor(props) {
-    super(props);
+function AgentsAvatar(props) {
+  let accountSetting = props.plugin.chatbox;
+  let acc = props.store.matchAccount() || {};
+  var tooltippos = props.tooltipPos || 'bottom';
+  var mode = props.mode || 'primary';
+  if (accountSetting && accountSetting.hide_agent_profile) {
+    return (0, _preact.h)("div", {
+      class: `group-avatar group-avatar--${mode}`
+    }, (0, _preact.h)("div", {
+      class: "d-inline-block pos-relative",
+      "data-tooltip": acc.name,
+      "data-tooltip-position": tooltippos
+    }, (0, _preact.h)("img", {
+      width: 35,
+      height: 35,
+      alt: "agent avatar left",
+      class: "avatar group-avatar--agent-left",
+      src: props.store.replaceFileUrl(acc.logo_url) || require('../../assets/img/image_default.png')
+    })));
   }
-  render() {
-    let accountSetting = this.props.plugin.chatbox;
-    let acc = this.props.store.matchAccount() || {};
-    var tooltippos = this.props.tooltipPos || 'bottom';
-    var mode = this.props.mode || 'primary';
-    if (accountSetting && accountSetting.hide_agent_profile) {
-      return (0, _preact.h)("div", {
-        class: `group-avatar group-avatar--${mode}`
-      }, (0, _preact.h)("div", {
-        class: "d-inline-block pos-relative",
-        "data-tooltip": acc.name,
-        "data-tooltip-position": tooltippos
-      }, (0, _preact.h)("img", {
-        width: 35,
-        height: 35,
-        alt: "agent avatar left",
-        class: "avatar group-avatar--agent-left",
-        src: this.props.store.replaceFileUrl(acc.logo_url) || require('../../assets/img/image_default.png')
-      })));
-    }
-    let agentM = this.props.store.matchAgent('*');
-    var agents = _index.default.map(this.props.agent_ids, id => agentM[id]);
-    if (this.props.agent_ids === undefined || _index.default.size(this.props.agent_ids) === 0) {
-      var agids = _index.default.get(accountSetting, 'header.agent_ids', []);
-      agids = _index.default.filter(agids, id => !!agentM[id]);
-      if (agids.length !== 0) {
-        agents = _index.default.map(agids, id => agentM[id]);
-      } else {
-        agents = _index.default.filter(agentM, agent => agent.type === 'agent');
-      }
-    }
-    agents = _index.default.filter(agents, ag => !!ag);
-    if (agents.length === 0) {
-      return (0, _preact.h)("div", {
-        class: `group-avatar group-avatar--${mode}`
-      }, (0, _preact.h)("div", {
-        class: "d-inline-block pos-relative",
-        "data-tooltip": acc.name,
-        "data-tooltip-position": tooltippos
-      }, (0, _preact.h)("img", {
-        width: 35,
-        height: 35,
-        alt: "agent avatar left",
-        class: "avatar group-avatar--agent-left",
-        src: this.props.store.replaceFileUrl(acc.logo_url) || require('../../assets/img/image_default.png')
-      })));
-    }
-    if (agents.length === 1) {
-      var agent = agents[0];
-      var groupClass = mode === 'primary' ? 'group-avatar--agent-middle' : 'group-avatar--agent-left';
-      return (0, _preact.h)("div", {
-        class: `group-avatar group-avatar--${mode}`
-      }, (0, _preact.h)("div", {
-        class: "d-inline-block pos-relative",
-        "data-tooltip": agent.fullname || acc.name,
-        "data-tooltip-position": tooltippos
-      }, (0, _preact.h)("img", {
-        width: 35,
-        height: 35,
-        class: `avatar ${groupClass}`,
-        alt: "agent avatar",
-        src: this.props.store.replaceFileUrl(agent.avatar_url) || require('../../assets/img/default_avatar.png')
-      })));
-    }
-    if (agents.length === 2) {
-      let leftAgent = agents[0];
-      let rightAgent = agents[1];
-      return (0, _preact.h)("div", {
-        class: `group-avatar group-avatar--${mode}`
-      }, (0, _preact.h)("div", {
-        class: "d-inline-block pos-relative",
-        "data-tooltip": leftAgent.fullname || acc.name,
-        "data-tooltip-position": tooltippos
-      }, (0, _preact.h)("img", {
-        width: 35,
-        height: 35,
-        alt: "agent avatar left",
-        class: "avatar group-avatar--agent-left",
-        src: this.props.store.replaceFileUrl(leftAgent.avatar_url) || require('../../assets/img/default_avatar.png')
-      })), (0, _preact.h)("div", {
-        class: "d-inline-block pos-relative",
-        "data-tooltip": rightAgent.fullname || acc.name,
-        "data-tooltip-position": tooltippos
-      }, (0, _preact.h)("img", {
-        alt: "agent avatar right",
-        width: 35,
-        height: 35,
-        class: "avatar group-avatar--agent-right",
-        src: this.props.store.replaceFileUrl(rightAgent.avatar_url) || require('../../assets/img/default_avatar.png')
-      })));
+  let agentM = props.store.matchAgent('*');
+  var agents = _index.default.map(props.agent_ids, id => agentM[id]);
+  if (props.agent_ids === undefined || _index.default.size(props.agent_ids) === 0) {
+    var agids = _index.default.get(accountSetting, 'header.agent_ids', []);
+    agids = _index.default.filter(agids, id => !!agentM[id]);
+    if (agids.length !== 0) {
+      agents = _index.default.map(agids, id => agentM[id]);
+    } else {
+      agents = _index.default.filter(agentM, agent => agent.type === 'agent');
     }
-    let leftAgent = agents[0];
-    let middleAgent = agents[1];
-    let rightAgent = agents[2];
+  }
+  agents = _index.default.filter(agents, ag => !!ag);
+  if (agents.length === 0) {
     return (0, _preact.h)("div", {
       class: `group-avatar group-avatar--${mode}`
     }, (0, _preact.h)("div", {
       class: "d-inline-block pos-relative",
-      "data-tooltip": leftAgent.fullname || acc.name,
+      "data-tooltip": acc.name,
       "data-tooltip-position": tooltippos
     }, (0, _preact.h)("img", {
       width: 35,
       height: 35,
       alt: "agent avatar left",
       class: "avatar group-avatar--agent-left",
-      src: this.props.store.replaceFileUrl(leftAgent.avatar_url) || require('../../assets/img/default_avatar.png')
-    })), (0, _preact.h)("div", {
+      src: props.store.replaceFileUrl(acc.logo_url) || require('../../assets/img/image_default.png')
+    })));
+  }
+  if (agents.length === 1) {
+    var agent = agents[0];
+    var groupClass = mode === 'primary' ? 'group-avatar--agent-middle' : 'group-avatar--agent-left';
+    return (0, _preact.h)("div", {
+      class: `group-avatar group-avatar--${mode}`
+    }, (0, _preact.h)("div", {
+      class: "d-inline-block pos-relative",
+      "data-tooltip": agent.fullname || acc.name,
+      "data-tooltip-position": tooltippos
+    }, (0, _preact.h)("img", {
+      width: 35,
+      height: 35,
+      class: `avatar ${groupClass}`,
+      alt: "agent avatar",
+      src: props.store.replaceFileUrl(agent.avatar_url) || require('../../assets/img/default_avatar.png')
+    })));
+  }
+  if (agents.length === 2) {
+    let leftAgent = agents[0];
+    let rightAgent = agents[1];
+    return (0, _preact.h)("div", {
+      class: `group-avatar group-avatar--${mode}`
+    }, (0, _preact.h)("div", {
       class: "d-inline-block pos-relative",
-      "data-tooltip": middleAgent.fullname || acc.name,
+      "data-tooltip": leftAgent.fullname || acc.name,
       "data-tooltip-position": tooltippos
     }, (0, _preact.h)("img", {
-      alt: "agent avatar middle",
       width: 35,
       height: 35,
-      class: "avatar group-avatar--agent-middle",
-      src: this.props.store.replaceFileUrl(middleAgent.avatar_url) || require('../../assets/img/default_avatar.png')
+      alt: "agent avatar left",
+      class: "avatar group-avatar--agent-left",
+      src: props.store.replaceFileUrl(leftAgent.avatar_url) || require('../../assets/img/default_avatar.png')
     })), (0, _preact.h)("div", {
       class: "d-inline-block pos-relative",
       "data-tooltip": rightAgent.fullname || acc.name,
       "data-tooltip-position": tooltippos
     }, (0, _preact.h)("img", {
+      alt: "agent avatar right",
       width: 35,
       height: 35,
-      alt: "agent avatar right",
       class: "avatar group-avatar--agent-right",
-      src: this.props.store.replaceFileUrl(rightAgent.avatar_url) || require('../../assets/img/default_avatar.png')
+      src: props.store.replaceFileUrl(rightAgent.avatar_url) || require('../../assets/img/default_avatar.png')
     })));
   }
-}
-exports.default = AgentsAvatar;
+  let leftAgent = agents[0];
+  let middleAgent = agents[1];
+  let rightAgent = agents[2];
+  return (0, _preact.h)("div", {
+    class: `group-avatar group-avatar--${mode}`
+  }, (0, _preact.h)("div", {
+    class: "d-inline-block pos-relative",
+    "data-tooltip": leftAgent.fullname || acc.name,
+    "data-tooltip-position": tooltippos
+  }, (0, _preact.h)("img", {
+    width: 35,
+    height: 35,
+    alt: "agent avatar left",
+    class: "avatar group-avatar--agent-left",
+    src: props.store.replaceFileUrl(leftAgent.avatar_url) || require('../../assets/img/default_avatar.png')
+  })), (0, _preact.h)("div", {
+    class: "d-inline-block pos-relative",
+    "data-tooltip": middleAgent.fullname || acc.name,
+    "data-tooltip-position": tooltippos
+  }, (0, _preact.h)("img", {
+    alt: "agent avatar middle",
+    width: 35,
+    height: 35,
+    class: "avatar group-avatar--agent-middle",
+    src: props.store.replaceFileUrl(middleAgent.avatar_url) || require('../../assets/img/default_avatar.png')
+  })), (0, _preact.h)("div", {
+    class: "d-inline-block pos-relative",
+    "data-tooltip": rightAgent.fullname || acc.name,
+    "data-tooltip-position": tooltippos
+  }, (0, _preact.h)("img", {
+    width: 35,
+    height: 35,
+    alt: "agent avatar right",
+    class: "avatar group-avatar--agent-right",
+    src: props.store.replaceFileUrl(rightAgent.avatar_url) || require('../../assets/img/default_avatar.png')
+  })));
+}

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/ButtonAttachments.js

@@ -3,30 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = ButtonAttachments;
 var _Buttons = _interopRequireDefault(require("./Buttons.js"));
 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 ButtonAttachments extends _common.Com {
-  constructor(props) {
-    super(props);
-  }
-  render() {
-    let byType = _index.default.get(this.props.ev, 'by.type');
-    if (byType === 'user') return null;
-    let buttons = [];
-    let attachments = _index.default.get(this.props.ev, 'data.message.attachments', []);
-    _index.default.each(attachments, (att, i) => {
-      if (!att || _index.default.get(att, 'type') !== 'button') return;
-      _index.default.each(_index.default.get(att, 'buttons') || [], btn => buttons.push(btn));
-    });
-    return (0, _preact.h)(_Buttons.default, {
-      store: this.props.store,
-      buttons: buttons,
-      t: this.props.t
-    });
-  }
-}
-exports.default = ButtonAttachments;
+function ButtonAttachments(props) {
+  let byType = _index.default.get(props.ev, 'by.type');
+  if (byType === 'user') return null;
+  let buttons = [];
+  let attachments = _index.default.get(props.ev, 'data.message.attachments', []);
+  _index.default.each(attachments, (att, i) => {
+    if (!att || _index.default.get(att, 'type') !== 'button') return;
+    _index.default.each(_index.default.get(att, 'buttons') || [], btn => buttons.push(btn));
+  });
+  return (0, _preact.h)(_Buttons.default, {
+    store: props.store,
+    buttons: buttons,
+    t: props.t
+  });
+}

package/compiled_src/chatbox/Buttons.js

@@ -3,49 +3,42 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = Buttons;
 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 Buttons extends _common.Com {
-  constructor(props) {
-    super(props);
-  }
-  render() {
-    if (_index.default.size(this.props.buttons) === 0) return null;
-    var $buttons = _index.default.map(this.props.buttons, (button, index) => {
-      if (button.type === 'call_button') {
-        return (0, _preact.h)("a", {
-          class: "url-button-attachment",
-          href: 'tel:' + button.phone_number,
-          key: index,
-          title: button.title
-        }, this.props.t.i18n(button.i18n_title) || button.title);
-      }
-      if (button.type === 'url_button') {
-        return (0, _preact.h)("a", {
-          class: "url-button-attachment",
-          href: button.url,
-          target: "_blank",
-          key: index,
-          title: button.title
-        }, this.props.t.i18n(button.i18n_title) || button.title || button.url);
-      }
-      if (button.type === 'postback_button') {
-        return (0, _preact.h)("a", {
-          class: "url-button-attachment",
-          href: "javascript:;",
-          onClick: _ => this.props.onSelect(button)
-        }, this.props.t.i18n(button.i18n_title) || button.title);
-      }
-      if (button.type === 'widget_ask_desktop_notify_button') return null;
-      if (button.type === 'widget_ask_contact_info_button') return null;
-      return null;
-    });
-    return (0, _preact.h)("div", {
-      class: "button-attachments"
-    }, $buttons);
-  }
-}
-exports.default = Buttons;
+function Buttons(props) {
+  if (_index.default.size(props.buttons) === 0) return null;
+  var $buttons = _index.default.map(props.buttons, (button, index) => {
+    if (button.type === 'call_button') {
+      return (0, _preact.h)("a", {
+        class: "url-button-attachment",
+        href: 'tel:' + button.phone_number,
+        key: index,
+        title: button.title
+      }, props.t.i18n(button.i18n_title) || button.title);
+    }
+    if (button.type === 'url_button') {
+      return (0, _preact.h)("a", {
+        class: "url-button-attachment",
+        href: button.url,
+        target: "_blank",
+        key: index,
+        title: button.title
+      }, props.t.i18n(button.i18n_title) || button.title || button.url);
+    }
+    if (button.type === 'postback_button') {
+      return (0, _preact.h)("a", {
+        class: "url-button-attachment",
+        href: "javascript:;",
+        onClick: _ => props.onSelect(button)
+      }, props.t.i18n(button.i18n_title) || button.title);
+    }
+    if (button.type === 'widget_ask_desktop_notify_button') return null;
+    if (button.type === 'widget_ask_contact_info_button') return null;
+    return null;
+  });
+  return (0, _preact.h)("div", {
+    class: "button-attachments"
+  }, $buttons);
+}

package/compiled_src/chatbox/ChatButton.js

@@ -117,7 +117,11 @@ class ChatButton extends _common.Com {
     if (new _index.default.Date().getTime() - this.props.store.matchClosePreviewAt() < Ms30Mins) return;
     let greeting = _index.default.get(accountSetting, 'greeting', {});
     let text = this.props.t.i18n(_index.default.get(greeting, 'greeting', {})) || greeting.message;
-    if (!text || !greeting.enabled) {
+    let enabled = greeting.enabled;
+    if (this.props.store.isMobile()) {
+      enabled = enabled && !_index.default.get(greeting, 'mobile_disabled');
+    }
+    if (!text || !enabled) {
       this.setState({
         previewEvent: {}
       });

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