@subiz/widget-v4 4.0.61 → 4.0.66

package/dist/{74.js → 132.js}

@@ -1,6 +1,6 @@
-(self["webpackChunk_subiz_widget_v4"] = self["webpackChunk_subiz_widget_v4"] || []).push([[74],{
+(self["webpackChunk_subiz_widget_v4"] = self["webpackChunk_subiz_widget_v4"] || []).push([[132],{
 
-/***/ 1074:
+/***/ 8132:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -22,7 +22,7 @@ var preact_module = __webpack_require__(6400);
 
 
 
-class Emoji extends common/* Com */.M {
+class Emoji extends common/* Com */.up {
   render() {
     var emojiCode = this.props.emojiCode;
     if (util/* default.size */.Z.size(emojiCode) < 3) return null;
@@ -44,7 +44,7 @@ let defaultAvatar = __webpack_require__(4761);
 
 
 
-class ChatButton extends common/* Com */.M {
+class ChatButton extends common/* Com */.up {
   constructor(props) {
     super(props);
     this.setState({
@@ -161,8 +161,9 @@ class ChatButton extends common/* Com */.M {
     let accountSetting = this.props.plugin.chatbox;
     if (new util/* default.Date */.Z.Date().getTime() - this.props.store.matchClosePreviewAt() < Ms30Mins) return;
     let greeting = util/* default.get */.Z.get(accountSetting, 'greeting', {});
+    let text = this.props.t.i18n(util/* default.get */.Z.get(greeting, 'greeting', {})) || greeting.message;
 
-    if (!greeting.message || !greeting.enabled) {
+    if (!text || !greeting.enabled) {
       this.setState({
         previewEvent: {}
       });
@@ -424,7 +425,7 @@ var logo = __webpack_require__(8430);
 
 
 
-class PoweredBy extends common/* Com */.M {
+class PoweredBy extends common/* Com */.up {
   constructor(props) {
     super(props);
   }
@@ -454,7 +455,7 @@ class PoweredBy extends common/* Com */.M {
 
 
 
-class AgentsAvatar extends common/* Com */.M {
+class AgentsAvatar extends common/* Com */.up {
   constructor(props) {
     super(props);
   }
@@ -587,7 +588,7 @@ class AgentsAvatar extends common/* Com */.M {
 
 
 
-class Header extends common/* Com */.M {
+class Header extends common/* Com */.up {
   constructor(props) {
     super(props);
   }
@@ -811,7 +812,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 
 
-class MessageInput extends common/* Com */.M {
+class MessageInput extends common/* Com */.up {
   constructor(props) {
     super(props);
 
@@ -1157,7 +1158,7 @@ function isSummited(form) {
 
 
 
-class ImageAttachment extends common/* Com */.M {
+class ImageAttachment extends common/* Com */.up {
   constructor(props) {
     super(props);
   }
@@ -1207,7 +1208,7 @@ class ImageAttachment extends common/* Com */.M {
 
 
 
-class AudioAttachments extends common/* Com */.M {
+class AudioAttachments extends common/* Com */.up {
   constructor(props) {
     super(props);
   }
@@ -1243,7 +1244,7 @@ class AudioAttachments extends common/* Com */.M {
 
 
 
-class FileAttachments extends common/* Com */.M {
+class FileAttachments extends common/* Com */.up {
   render() {
     var byType = util/* default.get */.Z.get(this.props.ev, 'by.type', 'agent');
     var attachments = util/* default.get */.Z.get(this.props.ev, 'data.message.attachments', []);
@@ -1281,7 +1282,7 @@ class FileAttachments extends common/* Com */.M {
 
 
 
-class Buttons extends common/* Com */.M {
+class Buttons extends common/* Com */.up {
   constructor(props) {
     super(props);
   }
@@ -1331,7 +1332,7 @@ class Buttons extends common/* Com */.M {
 
 
 
-class ButtonAttachments extends common/* Com */.M {
+class ButtonAttachments extends common/* Com */.up {
   constructor(props) {
     super(props);
   }
@@ -1356,7 +1357,7 @@ class ButtonAttachments extends common/* Com */.M {
 
 
 
-class QuickReplies extends common/* Com */.M {
+class QuickReplies extends common/* Com */.up {
   constructor(props) {
     super(props);
   }
@@ -1405,7 +1406,7 @@ class QuickReplies extends common/* Com */.M {
 
 
 
-class ListField extends common/* Com */.M {
+class ListField extends common/* Com */.up {
   constructor(props) {
     super(props);
     this.setState({
@@ -1461,7 +1462,7 @@ class ListField extends common/* Com */.M {
 
     return (0,preact_module.h)("div", {
       class: "form-control custom-select"
-    }, (0,preact_module.h)(common/* Clickaway */.u, {
+    }, (0,preact_module.h)(common/* Clickaway */.u$, {
       onClickaway: e => this.clickaway()
     }, (0,preact_module.h)("div", {
       class: "custom-select--wrap-selected",
@@ -1508,7 +1509,7 @@ class ListField extends common/* Com */.M {
 
 
 
-class FormAttachment extends common/* Com */.M {
+class FormAttachment extends common/* Com */.up {
   constructor(props) {
     super(props);
     this.props.store.onUpdate(this, _ => this.forceUpdate());
@@ -1821,7 +1822,7 @@ function encode(key) {
 
 
 
-class FormAttachments extends common/* Com */.M {
+class FormAttachments extends common/* Com */.up {
   constructor(props) {
     super(props);
   }
@@ -1866,7 +1867,7 @@ class FormAttachments extends common/* Com */.M {
 
 
 
-class FormSubmitAttachments extends common/* Com */.M {
+class FormSubmitAttachments extends common/* Com */.up {
   constructor(props) {
     super(props);
   }
@@ -1939,7 +1940,7 @@ function getFirstTouch(ev) {
 
 
 
-class GenericTemplateAttachments extends common/* Com */.M {
+class GenericTemplateAttachments extends common/* Com */.up {
   constructor(props) {
     super(props);
     this.state = {
@@ -2020,7 +2021,7 @@ class GenericTemplateAttachments extends common/* Com */.M {
 
 
 
-class ProductAttachments extends common/* Com */.M {
+class ProductAttachments extends common/* Com */.up {
   render() {
     let byType = util/* default.get */.Z.get(this.props.ev, 'by.type');
     if (byType === 'user') return null;
@@ -2031,17 +2032,53 @@ class ProductAttachments extends common/* Com */.M {
     let acc = this.props.store.matchAccount();
     let $products = util/* default.map */.Z.map(products, (att, index) => {
       let product = att.product;
-      let $detailbtn = null;
+      let $detailbtns = [];
       let url = product.url || product.mobile_url;
       if (this.props.store.isMobile()) url = product.mobile_url || product.url;
-      if (url) $detailbtn = (0,preact_module.h)("a", {
+      if (url && util/* default.size */.Z.size(product.buttons) == 0) $detailbtns.push((0,preact_module.h)("a", {
         class: "product_attachment__btn",
         href: url,
         target: "_blank"
       }, this.props.t('detail'), (0,preact_module.h)("img", {
         src: __webpack_require__(8453),
         class: "product_attachment__btn_external_link"
-      }));
+      })));
+      console.log("P", product);
+
+      if (util/* default.size */.Z.size(product.buttons) > 0) {
+        $detailbtns = $detailbtns.concat(util/* default.map */.Z.map(product.buttons, (button, index) => {
+          if (button.type === 'call_button') {
+            return (0,preact_module.h)("a", {
+              class: "product_attachment__btn",
+              href: 'tel:' + button.phone_number,
+              key: index,
+              title: button.title
+            }, button.title);
+          }
+
+          if (button.type === 'url_button') {
+            return (0,preact_module.h)("a", {
+              class: "product_attachment__btn",
+              href: button.url,
+              target: "_blank",
+              key: index,
+              title: button.title
+            }, button.title || this.props.t('detail'), ' ', (0,preact_module.h)("img", {
+              src: __webpack_require__(8453),
+              class: "product_attachment__btn_external_link"
+            }));
+          }
+
+          if (button.type === 'postback_button') {
+            return (0,preact_module.h)("a", {
+              class: "product_attachment__btn",
+              href: "javascript:;",
+              onClick: _ => this.props.onPostback(button)
+            }, button.title);
+          }
+        }));
+      }
+
       let $title = (0,preact_module.h)("a", {
         href: url,
         class: "product_attachment__title",
@@ -2070,7 +2107,7 @@ class ProductAttachments extends common/* Com */.M {
         src: this.props.store.replaceFileUrl(product.image)
       }))), $title, $subtitle, $price, (0,preact_module.h)("div", {
         class: "product_attachment__btns"
-      }, $detailbtn));
+      }, $detailbtns));
     });
     return $products;
   }
@@ -2080,7 +2117,7 @@ class ProductAttachments extends common/* Com */.M {
 
 
 
-class OrderAttachments_ProductAttachments extends common/* Com */.M {
+class OrderAttachments_ProductAttachments extends common/* Com */.up {
   render() {
     let byType = util/* default.get */.Z.get(this.props.ev, 'by.type');
     if (byType === 'user') return null;
@@ -2110,7 +2147,8 @@ class OrderAttachments_ProductAttachments extends common/* Com */.M {
             class: "order_attachment__product"
           }, (0,preact_module.h)("img", {
             class: "order_attachment__product_img",
-            src: (util/* default.get */.Z.get(product, 'images.0'), __webpack_require__(9270))
+            alt: '' + util/* default.get */.Z.get(product, 'id'),
+            src: util/* default.get */.Z.get(product, 'images.0', __webpack_require__(9270))
           }), (0,preact_module.h)("div", {
             style: "overflow: hidden !important;"
           }, (0,preact_module.h)("div", {
@@ -2166,7 +2204,7 @@ class OrderAttachments_ProductAttachments extends common/* Com */.M {
 
 
 
-class VideoAttachments extends common/* Com */.M {
+class VideoAttachments extends common/* Com */.up {
   constructor(props) {
     super(props);
   }
@@ -2203,7 +2241,7 @@ class VideoAttachments extends common/* Com */.M {
 ;// CONCATENATED MODULE: ./src/chatbox/ShadowDomRoot.js
 
 
-class ShadowDomRoot extends common/* Com */.M {
+class ShadowDomRoot extends common/* Com */.up {
   constructor(props) {
     super(props);
     this.ref = (0,preact_module/* createRef */.Vf)();
@@ -2266,7 +2304,7 @@ const loadMarked = () => __webpack_require__.e(/* import() */ 441).then(__webpac
 
 
 
-class TextMessage extends common/* Com */.M {
+class TextMessage extends common/* Com */.up {
   render() {
     var format = util/* default.get */.Z.get(this.props.ev, 'data.message.format', 'plaintext');
     if (format === 'markdown') return this.renderMarkdown();
@@ -2281,9 +2319,16 @@ class TextMessage extends common/* Com */.M {
       });
 
       if (tag.type === 'link') {
+        let url = tag.text || '';
+
+        if (!url.startsWith('//') && !url.startsWith('https://') && !url.startsWith('http://') && !url.startsWith('data:')) {
+          url = '//' + url;
+        }
+
         return (0,preact_module.h)("a", {
-          href: tag.text,
-          target: "_blank"
+          href: url,
+          target: "_blank",
+          onClick: e => this.props.onLink(e, url)
         }, tag.text);
       }
 
@@ -2339,7 +2384,7 @@ var g_pub = new util/* default.Pubsub */.Z.Pubsub();
 setInterval(() => g_pub.publish('time'), 20 * 1000);
 
 
-class Time extends common/* Com */.M {
+class Time extends common/* Com */.up {
   constructor(props) {
     super(props);
     this.setState({
@@ -2381,7 +2426,9 @@ class Time extends common/* Com */.M {
   }
 
   render() {
-    return (0,preact_module.h)("span", null, this.state.t);
+    return (0,preact_module.h)("span", {
+      style: this.props.style
+    }, this.state.t);
   }
 
 }
@@ -2475,7 +2522,7 @@ function getRateLang(rating) {
 
 
 
-class InfoMessage extends common/* Com */.M {
+class InfoMessage extends common/* Com */.up {
   render() {
     let ev = this.props.ev.ev;
     var $time = null;
@@ -2531,7 +2578,7 @@ class InfoMessage extends common/* Com */.M {
 
 
 
-class Event extends common/* Com */.M {
+class Event extends common/* Com */.up {
   constructor(props) {
     super(props);
     this.refForm = (0,preact_module/* createRef */.Vf)();
@@ -2653,7 +2700,8 @@ class Event extends common/* Com */.M {
         title: t
       }, $time, $sender, (0,preact_module.h)(TextMessage, {
         store: this.props.store,
-        ev: ev
+        ev: ev,
+        onLink: this.props.onLink
       }), (0,preact_module.h)(ImageAttachment, {
         store: this.props.store,
         ev: ev
@@ -2685,6 +2733,7 @@ class Event extends common/* Com */.M {
         onSelect: e => this.choosePostbackBtn(e)
       }), (0,preact_module.h)(ProductAttachments, {
         t: this.props.t,
+        onPostback: e => this.choosePostbackBtn(e),
         store: this.props.store,
         ev: ev
       }), (0,preact_module.h)(OrderAttachments_ProductAttachments, {
@@ -2740,7 +2789,8 @@ class Event extends common/* Com */.M {
     }, $dot, (0,preact_module.h)(TextMessage, {
       store: this.props.store,
       ev: ev,
-      refresh: this.state.refresh
+      refresh: this.state.refresh,
+      onLink: this.props.onLink
     }), (0,preact_module.h)(ImageAttachment, {
       store: this.props.store,
       ev: ev
@@ -2807,7 +2857,7 @@ const loadingimg = __webpack_require__(6484);
 
 
 
-class Spinner extends common/* Com */.M {
+class Spinner extends common/* Com */.up {
   render() {
     let mode = (this.props.mode + '').toLowerCase();
     let mainColor = mode === 'dark' ? '#000000dd' : mode === 'blue' ? 'rgba(52, 152, 220, .8)' : '#ffffffdd';
@@ -2819,7 +2869,7 @@ class Spinner extends common/* Com */.M {
     border-bottom-color: ${borderColor} !important;border-right-color: ${mainColor} !important;`;
 
     if (this.props.static) {
-      let style = `width: ${size}px;height: ${size}px;`;
+      let style = `width: ${size}px !important;height: ${size}px !important;`;
       if (size < 40) return (0,preact_module.h)(LoaderIcon, {
         size: size + '',
         style: `stroke:${mainColor}`
@@ -2859,7 +2909,7 @@ const convoemptyimg = __webpack_require__(6188);
 
 
 
-class Events extends common/* Com */.M {
+class Events extends common/* Com */.up {
   constructor(props) {
     super(props);
     this.props.store.onUpdate(this, _ => this.forceUpdate());
@@ -2904,6 +2954,7 @@ class Events extends common/* Com */.M {
     }));
     processEvents(convo, events);
     let $events = util/* default.map */.Z.map(events, ev => (0,preact_module.h)(Event, {
+      onLink: this.props.onLink,
       store: this.props.store,
       onFormSubmit: this.props.onFormSubmit,
       onSend: this.props.onSend,
@@ -3110,7 +3161,7 @@ function Events_isSummited(form) {
 
 
 
-class Typing extends common/* Com */.M {
+class Typing extends common/* Com */.up {
   constructor(props) {
     super(props);
   }
@@ -3136,6 +3187,8 @@ class Typing extends common/* Com */.M {
         return;
       }
 
+      let ag = this.props.store.matchAgent(ev.by.id);
+      if (ag.type == 'agent') return;
       if (util/* default.get */.Z.get(ev, 'type') !== 'conversation_typing') return;
       this.setState({
         ev: ev,
@@ -3148,7 +3201,7 @@ class Typing extends common/* Com */.M {
         this.setState({
           isShow: false
         });
-      }, 10000);
+      }, 5000);
     });
   }
 
@@ -3235,7 +3288,7 @@ const POPUP_HARD_MAX_HEIGHT = 500;
 const POPUP_MIN_HEIGHT = 0;
 
 
-class Rating extends common/* Com */.M {
+class Rating extends common/* Com */.up {
   constructor(props) {
     super(props);
 
@@ -3514,222 +3567,2207 @@ class Rating extends common/* Com */.M {
   }
 
 }
-;// CONCATENATED MODULE: ./src/chatbox/Widget.js
+;// CONCATENATED MODULE: ./src/chatbox/DropdownSelect.js
+function DropdownSelect_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; }
 
 
 
 
 
+class DropdownSelect extends common/* Com */.up {
+  constructor(props) {
+    super(props);
+
+    DropdownSelect_defineProperty(this, "state", {
+      show: false,
+      searchValue: ''
+    });
 
-var send = __webpack_require__(9737);
+    DropdownSelect_defineProperty(this, "filterRef", (0,preact_module/* createRef */.Vf)());
 
-var checkedimg = __webpack_require__(8909);
+    DropdownSelect_defineProperty(this, "overlayRef", (0,preact_module/* createRef */.Vf)());
 
-var empty = __webpack_require__(29);
+    DropdownSelect_defineProperty(this, "onTouchMove", e => {
+      if (e.target === this.overlayRef.current) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    });
 
+    DropdownSelect_defineProperty(this, "hideDropdown", () => {
+      this.setState({
+        show: false,
+        searchValue: ''
+      });
+    });
 
+    DropdownSelect_defineProperty(this, "onKeydown", e => {
+      if (e.key === 'Escape') {
+        if (!this.state.show) return;
+        if (this.state.searchValue) this.setState({
+          searchValue: ''
+        });else this.hideDropdown();
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    });
 
+    DropdownSelect_defineProperty(this, "hasSearch", () => {
+      if (this.props.has_search) return true;
+      return util/* default.size */.Z.size(this.props.items) >= 10;
+    });
 
+    DropdownSelect_defineProperty(this, "getFilteredOptions", () => {
+      let items = this.props.items;
 
+      if (this.state.searchValue && this.hasSearch()) {
+        items = util/* default.filter */.Z.filter(items, item => {
+          let optionName = util/* default.unicodeToAscii */.Z.unicodeToAscii(item.name).toLowerCase().replace(/ /g, '');
+          let optionDesc = util/* default.unicodeToAscii */.Z.unicodeToAscii(item.desc).toLowerCase().replace(/ /g, '');
+          let searchValue = util/* default.unicodeToAscii */.Z.unicodeToAscii(this.state.searchValue).toLowerCase().replace(/ /g, '');
+          return optionName.indexOf(searchValue) != -1 || optionDesc.indexOf(searchValue) != -1;
+        });
+      }
 
-const Widget_defaultAvatar = 'https://file-subiz.com/fiqoahedjbgwclpouoml-avatar_default_baa8a1d7.png';
+      return items;
+    });
 
+    DropdownSelect_defineProperty(this, "onChangeSearchValue", e => {
+      this.setState({
+        searchValue: e.target.value
+      });
+    });
 
+    DropdownSelect_defineProperty(this, "toogleDropdown", async () => {
+      await this.setState({
+        show: true,
+        searchValue: ''
+      });
+      this.focusFilter();
+    });
 
+    DropdownSelect_defineProperty(this, "onSelect", item => {
+      this.props.onSelect(item);
+      this.hideDropdown();
+    });
 
-class Widget extends common/* Com */.M {
-  constructor(props) {
-    super(props);
-    this.userSent = {};
-    this.setState({
-      creating: false,
-      clickedJoin: false,
-      formData: {}
+    DropdownSelect_defineProperty(this, "onBackgroundScroll", e => {
+      console.log('EEEEEEE', e);
+      alert('y');
     });
-    this.props.store.onUpdate(this, _ => this.forceUpdate());
+
+    document.addEventListener('touchmove', function (e) {});
   }
 
   componentDidMount() {
-    if (!this.props.store.isMobile()) this.focusInput();
+    window.addEventListener('keydown', this.onKeydown);
   }
 
-  componentDidUpdate(prevProp) {
-    if (prevProp.isShow !== this.props.isShow) {
-      if (this.props.isShow && !this.props.store.isMobile()) this.focusInput();
-      if (this.props.isShow && this.props.store.isMobile()) this.blur();
-    }
+  componentWillUnmount() {
+    window.removeEventListener('keydown', this.onKeydown);
+  }
 
-    if (prevProp.cid !== this.props.cid) {
-      this.setState({
-        clickedJoin: false
-      });
-      setTimeout(() => {
-        this.events && this.events.focus();
-        if (!this.props.store.isMobile()) this.focusInput();
-      }, 100);
-    }
+  renderEmpty() {
+    return (0,preact_module.h)("div", {
+      class: "dropdown_select_filter__empty"
+    }, (0,preact_module.h)("img", {
+      class: "dropdown_select_filter__empty_img",
+      src: __webpack_require__(6071)
+    }), (0,preact_module.h)("div", {
+      class: "muted",
+      style: "text-align: center !important;"
+    }, "Kh\xF4ng c\xF3 k\u1EBFt qu\u1EA3"));
+  }
 
-    this.updateFormDataFields();
+  renderLoading() {
+    return (0,preact_module.h)("div", {
+      class: "dropdown_select_filter__empty pt-3"
+    }, (0,preact_module.h)(Spinner, {
+      size: "40",
+      static: true
+    }), (0,preact_module.h)("div", {
+      class: "muted mt-2",
+      style: "text-align: center !important;"
+    }, "\u0110ang t\u1EA3i d\u1EEF li\u1EC7u"));
   }
 
-  shouldShowForm() {
-    let formRequired = this.isFormRequired();
-    return formRequired && !this.props.cid || formRequired && this.props.cid && this.state.clickedJoin;
+  focusFilter() {
+    if (!this.filterRef.current) return;
+    this.filterRef.current.focus();
+    setTimeout(() => {
+      if (!this.filterRef.current) return;
+      this.filterRef.current.focus();
+    }, 100);
   }
 
-  render() {
-    let formRequired = this.isFormRequired();
-    let showform = this.shouldShowForm();
-    let form;
-    let accountSetting = this.props.plugin.chatbox || {};
-    let acc = this.props.store.matchAccount() || {};
-    let submitLabel = this.props.t('prechat_form_btn');
-    if (util/* default.get */.Z.get(accountSetting, 'prechat_form.enabled')) form = accountSetting.prechat_form;
-    let offlineEnabled = util/* default.get */.Z.get(accountSetting, 'offline_form.enabled');
+  renderDropdown() {
+    if (!this.state.show) return null;
+    let items = this.getFilteredOptions();
+    let $items = util/* default.map */.Z.map(items, item => {
+      return (0,preact_module.h)("div", {
+        class: "dropdown_select__item",
+        onClick: _ => this.onSelect(item)
+      }, item.name);
+    });
+    let $filter = null;
 
-    if (this.isOffline(acc, accountSetting) && offlineEnabled) {
-      form = accountSetting.offline_form;
-      submitLabel = this.props.t('offline_form_btn');
+    if (this.hasSearch()) {
+      let $img = (0,preact_module.h)("img", {
+        class: "dropdown_select_filter__icon",
+        src: __webpack_require__(636)
+      });
+
+      if (this.props.loading) {
+        $img = (0,preact_module.h)("img", {
+          class: "dropdown_select_filter__icon",
+          src: __webpack_require__(5770)
+        });
+      }
+
+      $filter = (0,preact_module.h)("div", {
+        class: "dropdown_select_filter"
+      }, $img, (0,preact_module.h)("input", {
+        ref: this.filterRef,
+        value: this.state.searchValue,
+        onInput: this.onChangeSearchValue,
+        type: "text",
+        class: "dropdown_select_filter_input "
+      }));
     }
 
-    if (this.props.view === 'offline_form') {
-      showform = true;
-      form = accountSetting.offline_form;
-      submitLabel = this.props.t('offline_form_btn');
+    if ($items.length == 0) $items = this.renderEmpty();
+    if (this.props.loading) $items = this.renderLoading();
+    let style = `width: ${this.props.width || '150px'} !important;`;
+
+    if (this.props.full) {
+      style = ` top: 20px !important; left: 20px !important; right: 20px !important; width: unset !important; `;
+      return (0,preact_module.h)("div", {
+        class: "dropdown_select__overlay",
+        ref: this.overlayRef,
+        onClick: this.hideDropdown,
+        onTouchMove: this.onTouchMove
+      }, (0,preact_module.h)("div", {
+        class: "dropdown_select",
+        style: style,
+        onClick: e => {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      }, $filter, (0,preact_module.h)("div", {
+        class: "dropdown_select__items"
+      }, $items)));
     }
 
-    if (this.props.view === 'prechat_form') {
-      showform = true;
-      form = accountSetting.prechat_form;
-      submitLabel = this.props.t('prechat_form_btn');
+    return (0,preact_module.h)("div", {
+      class: "dropdown_select",
+      style: style
+    }, $filter, (0,preact_module.h)("div", {
+      class: "dropdown_select__items"
+    }, $items));
+  }
+
+  render() {
+    let $name = (0,preact_module.h)("div", {
+      class: "muted text-truncate",
+      style: "flex: 1 !important;"
+    }, "Ch\u1ECDn m\u1ED9t ph\u1EA7n t\u1EED");
+    if (util/* default.get */.Z.get(this.props, 'selected.name')) $name = (0,preact_module.h)("div", {
+      class: "text-truncate",
+      style: "flex: 1 !important;"
+    }, util/* default.get */.Z.get(this.props, 'selected.name'));
+    let style = 'position: relative !important;';
+
+    if (this.props.full) {
+      style = '';
     }
 
-    let $body = null;
-    if (this.props.view === 'list') $body = this.renderConvoList();else if (showform) $body = this.renderForm(form, submitLabel);else $body = this.renderChat();
-    let position = util/* default.get */.Z.get(accountSetting, 'desktop_button.position') || 'right';
-    if (this.props.store.isMobile()) position = util/* default.get */.Z.get(accountSetting, 'mobile_button.position', position);
-    let cls = 'widget-container widget-container--' + position;
-    if (!this.props.isShow) cls += ' widget-container--hide';
     return (0,preact_module.h)("div", {
-      class: cls
-    }, (0,preact_module.h)(Header, {
-      t: this.props.t,
-      plugin: this.props.plugin,
-      store: this.props.store,
-      cid: this.props.cid,
-      view: this.props.view,
-      onClose: this.props.onClose,
-      onGotoList: () => this.props.onGo({
-        view: 'list'
-      })
-    }), $body);
+      style: style
+    }, (0,preact_module.h)(common/* Clickaway */.u$, {
+      onClickaway: this.hideDropdown
+    }, (0,preact_module.h)("div", {
+      type: "text",
+      class: 'dropdown_select_input ' + this.props.extra_cls,
+      onClick: this.toogleDropdown
+    }, $name, "\xA0", (0,preact_module.h)("img", {
+      class: "dropdown_select__caret",
+      src: __webpack_require__(8712)
+    })), this.renderDropdown()));
   }
 
-  async submitPrechatForm(form) {
-    var hasError = false;
-    util/* default.map */.Z.map(this.state.formData, (field, key) => {
-      if (field.is_required && (field.value === undefined || field.value === '' || util/* default.size */.Z.size(field.value) === 0 && Array.isArray(field.value))) {
-        field.error = this.props.t('error_empty');
-        hasError = true;
-      } else field.error = '';
+}
+;// CONCATENATED MODULE: ./src/order/address_picker.js
+function address_picker_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; }
 
-      if (key.substr(5) === 'emails' && !util/* default.isEmail */.Z.isEmail(field.value) && field.is_required) {
-        field.error = this.props.t('error_email_invalid');
-        hasError = true;
-      }
 
-      if (key.substr(5) === 'phones' && !util/* default.isPhone */.Z.isPhone(field.value) && field.is_required) {
-        field.error = this.props.t('error_phone_invalid');
-        hasError = true;
-      }
+
+
+
+class AddressPicker extends common/* Com */.up {
+  constructor(props) {
+    super(props);
+
+    address_picker_defineProperty(this, "state", {
+      show: false,
+      searchValue: '',
+      addresses: []
     });
-    if (hasError) return this.forceUpdate();
-    let data = util/* default.cloneDeep */.Z.cloneDeep(this.state.formData);
-    let user = util/* default.cloneDeep */.Z.cloneDeep(this.props.store.matchUser());
-    util/* default.map */.Z.map(data, (field, key) => {
-      if (!key.startsWith('attr:')) return;
-      var attr = {
-        key: key.substr(5)
-      };
-      if (field.type === 'number') attr.number = parseInt(field.value);
-      if (field.type === 'datetime') attr.datetime = new util/* default.Date */.Z.Date(field.value).toISOString();
-      if (field.type === 'list') attr.list = field.value;
-      if (field.type === 'text' || field.type === 'boolean') attr[field.type] = field.value;
-      util/* default.setUserAttr */.Z.setUserAttr(user, attr);
+
+    address_picker_defineProperty(this, "filterRef", (0,preact_module/* createRef */.Vf)());
+
+    address_picker_defineProperty(this, "overlayRef", (0,preact_module/* createRef */.Vf)());
+
+    address_picker_defineProperty(this, "onTouchMove", e => {
+      if (e.target === this.overlayRef.current) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
     });
-    let firstmsg = util/* default.get */.Z.get(data, 'question.value');
-    let groupid = util/* default.get */.Z.get(data, 'group.value', '');
 
-    if (this.props.cid) {
-      this.props.store.setUser(user);
+    address_picker_defineProperty(this, "hideDropdown", () => {
       this.setState({
-        clickedJoin: false
-      });
-      await this.props.store.sendConvoEvent(this.props.cid, 'message_sent', {
-        message: {
-          text: firstmsg,
-          format: 'plaintext',
-          fields: [{
-            key: 'to_agent_group',
-            value: util/* default.stringify */.Z.stringify(groupid)
-          }]
-        }
+        show: false,
+        searchValue: ''
       });
-      if (form.end_conversation_after_submit) await this.props.store.endConvo(this.props.cid);
-      return;
-    }
-
-    this.setState({
-      creating: true
     });
-    let message = {
-      text: firstmsg,
-      format: 'plaintext'
-    };
-    let req = {
-      group_id: groupid,
-      message: firstmsg,
-      locale: this.props.t.locale(),
-      initial_by: user.id
-    };
-    this.setState({
-      creatingError: null
+
+    address_picker_defineProperty(this, "onKeydown", e => {
+      if (e.key === 'Escape') {
+        if (!this.state.show) return;
+        if (this.state.searchValue) this.setState({
+          searchValue: ''
+        });else this.hideDropdown();
+        e.preventDefault();
+        e.stopPropagation();
+      }
+
+      if (e.key == 'Enter') {}
     });
-    const {
-      error,
-      convo
-    } = await this.props.store.startConvo(req);
-    this.props.store.setUser(user);
 
-    if (error) {
+    address_picker_defineProperty(this, "doSearch", util/* default.throttle */.Z.throttle(async () => {
+      let requestId = Date.now();
+      this.requestId = requestId;
+      let res = await this.props.store.suggest_addresses(this.state.searchValue);
+      if (this.requestId !== requestId) return;
       this.setState({
-        creating: false,
-        creatingError: error
+        addresses: util/* default.get */.Z.get(res, 'body.addresses', [])
       });
-      return;
-    }
+    }, 100));
 
-    let newconvoid = convo.id;
-    this.userSent[newconvoid] = true;
-    this.props.onGo({
-      view: 'chat',
-      cid: newconvoid
+    address_picker_defineProperty(this, "onChangeSearchValue", e => {
+      this.setState({
+        searchValue: e.target.value
+      });
+      this.props.onChangeAddress(e.target.value);
+      this.doSearch();
     });
-    this.props.store.sendConvoEvent(newconvoid, 'message_sent', {
-      message
+
+    address_picker_defineProperty(this, "toogleDropdown", async () => {
+      await this.setState({
+        show: true,
+        searchValue: this.props.initAddress || ''
+      });
+      this.focusFilter();
     });
-    this.setState({
-      creating: false,
-      clickedJoin: false
+
+    address_picker_defineProperty(this, "onSelect", item => {
+      this.props.onSelect(item);
+      this.hideDropdown();
     });
-    if (!this.props.store.isMobile()) this.focusInput();
+
+    address_picker_defineProperty(this, "onBackgroundScroll", e => {
+      console.log('EEEEEEE', e);
+    });
+
+    document.addEventListener('touchmove', function (e) {});
   }
 
-  formMounted(form) {
-    let formData = this.fillForm(form);
-    formData['question'] = {
-      key: 'question',
-      is_required: true,
+  componentDidMount() {
+    window.addEventListener('keydown', this.onKeydown);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('keydown', this.onKeydown);
+  }
+
+  renderEmpty() {
+    return (0,preact_module.h)("div", {
+      class: "dropdown_select_filter__empty"
+    }, (0,preact_module.h)("img", {
+      class: "dropdown_select_filter__empty_img",
+      src: __webpack_require__(6071)
+    }), (0,preact_module.h)("div", {
+      class: "muted",
+      style: "text-align: center !important;"
+    }, "Kh\xF4ng c\xF3 k\u1EBFt qu\u1EA3"));
+  }
+
+  renderLoading() {
+    return (0,preact_module.h)("div", {
+      class: "dropdown_select_filter__empty pt-3"
+    }, (0,preact_module.h)(Spinner, {
+      size: "40",
+      static: true
+    }), (0,preact_module.h)("div", {
+      class: "muted mt-2",
+      style: "text-align: center !important;"
+    }, "\u0110ang t\u1EA3i d\u1EEF li\u1EC7u"));
+  }
+
+  focusFilter() {
+    if (!this.filterRef.current) return;
+    this.filterRef.current.focus();
+    setTimeout(() => {
+      if (!this.filterRef.current) return;
+      this.filterRef.current.focus();
+    }, 100);
+  }
+
+  renderDropdown() {
+    if (!this.state.show) return null;
+    let $items = util/* default.map */.Z.map(this.state.addresses, (addr, i) => {
+      let label = [((addr.address || '') + ' ' + normalize(addr.street)).trim()].join(', ');
+      let desc = [normalize(addr.ward), normalize(addr.district), normalize(addr.province)].join(', ');
+      return (0,preact_module.h)("div", {
+        class: "dropdown_select__item",
+        onClick: _ => this.onSelect(addr),
+        key: i
+      }, (0,preact_module.h)("div", null, (0,preact_module.h)("b", null, label)), (0,preact_module.h)("div", {
+        style: "opacity: 0.7 !important;"
+      }, desc));
+    });
+    let $filter = null;
+    let $img = (0,preact_module.h)("img", {
+      class: "dropdown_select_filter__icon",
+      src: __webpack_require__(636)
+    });
+
+    if (this.props.loading) {
+      $img = (0,preact_module.h)("img", {
+        class: "dropdown_select_filter__icon",
+        src: __webpack_require__(5770)
+      });
+    }
+
+    $filter = (0,preact_module.h)("div", {
+      class: "dropdown_select_filter"
+    }, $img, (0,preact_module.h)("input", {
+      ref: this.filterRef,
+      value: this.state.searchValue,
+      onInput: this.onChangeSearchValue,
+      type: "text",
+      class: "dropdown_select_filter_input "
+    }));
+    if ($items.length == 0) $items = this.renderEmpty();
+    if (this.props.loading) $items = this.renderLoading();
+    let style = `width: ${this.props.width || '150px'} !important;`;
+
+    if (this.props.full) {
+      style = ` top: 20px !important; left: 20px !important; right: 20px !important; width: unset !important; `;
+      return (0,preact_module.h)("div", {
+        class: "dropdown_select__overlay",
+        ref: this.overlayRef,
+        onClick: this.hideDropdown,
+        onTouchMove: this.onTouchMove
+      }, (0,preact_module.h)("div", {
+        class: "dropdown_select",
+        style: style,
+        onClick: e => {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      }, $filter, (0,preact_module.h)("div", {
+        class: "dropdown_select__items"
+      }, $items)));
+    }
+
+    return (0,preact_module.h)("div", {
+      class: "dropdown_select",
+      style: style
+    }, $filter, (0,preact_module.h)("div", {
+      class: "dropdown_select__items"
+    }, $items));
+  }
+
+  render() {
+    let $name = (0,preact_module.h)("div", {
+      class: "text-truncate",
+      style: "flex: 1 !important;"
+    }, this.props.initAddress);
+    let style = 'position: relative !important;';
+
+    if (this.props.full) {
+      style = '';
+    }
+
+    return (0,preact_module.h)("div", {
+      style: style
+    }, (0,preact_module.h)(common/* Clickaway */.u$, {
+      onClickaway: this.hideDropdown
+    }, (0,preact_module.h)("div", {
+      type: "text",
+      class: 'dropdown_select_input ' + this.props.extra_cls,
+      onClick: this.toogleDropdown
+    }, $name), this.renderDropdown()));
+  }
+
+}
+
+function normalize(s) {
+  let ls = (s + '').toLowerCase();
+  if (ls.startsWith('tp ')) return s.substr(3);
+  if (ls.startsWith('thanh pho ')) return s.substr('thanh pho '.length);
+  if (ls.startsWith('thành phố ')) return s.substr('thành phố '.length);
+  if (ls.startsWith('tỉnh ')) return s.substr('tỉnh '.length);
+  if (ls.startsWith('huyện ')) return s.substr('huyện '.length);
+  if (ls.startsWith('tỉnh ')) return s.substr('tỉnh '.length);
+  if (ls.startsWith('xã ')) return s.substr('xã '.length);
+  if (ls.startsWith('thị trấn ')) return s.substr('thị trấn '.length);
+  if (ls.startsWith('thị xã ')) return s.substr('thị xã '.length);
+  if (ls.startsWith('đường ') && (s[7] < '0' || s[7] > '9')) return s.substr('đường '.length);
+  if (ls.startsWith('phường ') && (s[7] < '0' || s[7] > '9')) return s.substr('phường '.length);
+  if (ls.startsWith('quận ') && (s[7] < '0' || s[7] > '9')) return s.substr('quận '.length);
+  return s;
+}
+;// CONCATENATED MODULE: ./src/order/icon.js
+
+
+let promiseMainCSS = (() => __webpack_require__.e(/* import() */ 178).then(__webpack_require__.bind(__webpack_require__, 178)))();
+
+var $link = document.createElement('link');
+$link.href = 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap';
+$link.rel = 'stylesheet';
+document.head.append($link);
+util/* default.preloadWebfonts */.Z.preloadWebfonts(['Roboto'], [400, 500]);
+
+
+let icon_defaultAvatar = __webpack_require__(4761);
+
+
+
+
+class Icon extends common/* Com */.up {
+  render() {
+    if (this.props.name == 'package') {
+      if (this.props.active) return (0,preact_module.h)("img", {
+        style: "width: 18px !important;",
+        src: __webpack_require__(25)
+      });
+      return (0,preact_module.h)("img", {
+        style: "width: 18px !important;",
+        src: __webpack_require__(1216)
+      });
+    }
+
+    if (this.props.name === 'shop') {
+      if (this.props.active) return (0,preact_module.h)("img", {
+        style: "width: 18px !important;",
+        src: __webpack_require__(6180)
+      });
+      return (0,preact_module.h)("img", {
+        style: "width: 18px !important;",
+        src: __webpack_require__(750)
+      });
+    }
+  }
+
+}
+;// CONCATENATED MODULE: ./src/order/order.js
+function order_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 checkedimg = __webpack_require__(763);
+
+var ximg = __webpack_require__(2514);
+
+class order_Order extends common/* Com */.up {
+  constructor(props) {
+    super(props);
+
+    order_defineProperty(this, "state", {
+      loadProvince: true,
+      g_err: '',
+      fullname: '',
+      email: '',
+      phone: '',
+      loading: true,
+      order: {},
+      err: {},
+      selectedProvince: null,
+      selectedDistrict: null,
+      selectedWard: null,
+      street: '',
+      address: '',
+      sending: false,
+      step: ''
+    });
+
+    order_defineProperty(this, "renderMobileSuccess", order => {
+      return (0,preact_module.h)("div", {
+        class: "order",
+        style: "height: 100% !important"
+      }, (0,preact_module.h)("div", {
+        style: "display: flex !important; align-items: center !important; padding-top: 40px !important; padding-bottom: 20px !important; flex-direction: column !important; height: 100% !important"
+      }, (0,preact_module.h)("img", {
+        style: "width: 60px !important; height: 60px !important;",
+        width: "60",
+        height: "60",
+        src: checkedimg
+      }), (0,preact_module.h)("div", {
+        style: "margin-top: 20px !important; margin-bottom: 10px !important"
+      }, (0,preact_module.h)("b", {
+        style: "font-size: 18px !important;"
+      }, "\u0110\u01A1n h\xE0ng c\u1EE7a b\u1EA1n \u0111\xE3 \u0111\u01B0\u1EE3c ghi nh\u1EADn")), (0,preact_module.h)("div", {
+        class: "muted"
+      }, "T\xF4i s\u1EBD li\xEAn h\u1EC7 l\u1EA1i v\u1EDBi b\u1EA1n khi \u0111\u01A1n h\xE0ng \u0111\u01B0\u1EE3c x\u1EED l\xFD"), (0,preact_module.h)("div", {
+        style: "flex:1 !important"
+      }), (0,preact_module.h)("div", {
+        style: "margin-top: 20px !important; padding: 0px 20px 0 20px !important; width: 100% !important"
+      }, (0,preact_module.h)("div", {
+        class: "order_btn order__btn__light",
+        onClick: this.close
+      }, this.props.t('close')))));
+    });
+
+    order_defineProperty(this, "onSelectProvince", async item => {
+      this.setState({
+        selectedProvince: item,
+        err: {},
+        g_err: ''
+      });
+      this.setState({
+        loadDistrict: true
+      });
+      let out = await this.props.store.list_districts({
+        id: item.id
+      });
+      this.setState({
+        loadDistrict: false
+      });
+      if (!out.error) this.setState({
+        districts: util/* default.get */.Z.get(out, 'body.addresses')
+      });
+    });
+
+    order_defineProperty(this, "onSelectDistrict", async item => {
+      this.setState({
+        selectedDistrict: item,
+        err: {},
+        g_err: ''
+      });
+      this.setState({
+        loadWard: true
+      });
+      let out = await this.props.store.list_wards({
+        id: item.id
+      });
+      this.setState({
+        loadWard: false
+      });
+      if (!out.error) this.setState({
+        wards: util/* default.get */.Z.get(out, 'body.addresses')
+      });
+    });
+
+    order_defineProperty(this, "onSelectWard", item => this.setState({
+      selectedWard: item,
+      err: {},
+      g_err: ''
+    }));
+
+    order_defineProperty(this, "onChangeFullname", e => this.setState({
+      fullname: e.target.value,
+      err: {},
+      g_err: ''
+    }));
+
+    order_defineProperty(this, "onChangeAddress", e => this.setState({
+      address: e,
+      err: {},
+      g_err: ''
+    }));
+
+    order_defineProperty(this, "onSelectAddress", addr => {
+      if (!addr) return;
+      this.setState({
+        address: [util/* default.trim */.Z.trim(addr.address), util/* default.trim */.Z.trim(addr.street)].join(' ').trim(),
+        street: addr.street,
+        err: {},
+        g_err: ''
+      });
+      this.onSelectWard({
+        id: addr.ward_id,
+        name: addr.ward
+      });
+      this.onSelectDistrict({
+        id: addr.district_id,
+        name: addr.district
+      });
+      this.onSelectProvince({
+        id: addr.province_id,
+        name: addr.province
+      });
+    });
+
+    order_defineProperty(this, "onChangeEmail", e => this.setState({
+      email: e.target.value,
+      err: {},
+      g_err: ''
+    }));
+
+    order_defineProperty(this, "onChangePhone", e => this.setState({
+      phone: e.target.value,
+      err: {},
+      g_err: ''
+    }));
+
+    order_defineProperty(this, "onChangePaymentMethod", id => this.setState({
+      pm: id
+    }));
+
+    order_defineProperty(this, "onChangeQuantity", (item, text) => {
+      let qty = parseInt(text) || 1;
+      item.quantity = qty;
+      this.forceUpdate();
+    });
+
+    order_defineProperty(this, "confirm", async () => {
+      this.setState({
+        g_err: ''
+      });
+      let err = {};
+
+      if (!this.state.shipping) {
+        this.setState({
+          g_err: 'Mời bạn chọn địa chỉ giao hàng trước khi xác nhận'
+        });
+      }
+
+      if (this.state.shipping === 'shop') {
+        if (!util/* default.isPhone */.Z.isPhone(this.state.phone)) {
+          err.phone = true;
+        }
+
+        if (!util/* default.trim */.Z.trim(this.state.fullname)) {
+          err.name = true;
+        }
+
+        if (!util/* default.trim */.Z.trim(this.state.email)) {
+          err.email = true;
+        }
+      } else if (this.state.shipping_address == 'new') {
+        if (!util/* default.isPhone */.Z.isPhone(this.state.phone)) {
+          err.phone = true;
+        }
+
+        if (!util/* default.trim */.Z.trim(this.state.fullname)) {
+          err.name = true;
+        }
+
+        if (!util/* default.trim */.Z.trim(this.state.address)) {
+          err.address = true;
+        }
+
+        if (util/* default.size */.Z.size(this.state.selectedWard) == 0) {
+          err.ward = true;
+        }
+
+        if (util/* default.size */.Z.size(this.state.selectedDistrict) == 0) {
+          err.district = true;
+        }
+
+        if (util/* default.size */.Z.size(this.state.selectedProvince) == 0) {
+          err.province = true;
+        }
+      }
+
+      if (util/* default.size */.Z.size(err) > 0) {
+        this.setState({
+          err,
+          g_err: this.props.t('input_shipping_info_err')
+        });
+        return;
+      }
+
+      let user = this.props.store.matchUser();
+      let ufullname = util/* default.getUserAttr */.Z.getUserAttr(user, 'fullname', 'text');
+      let uemail = util/* default.getUserAttr */.Z.getUserAttr(user, 'emails', 'text');
+      let uphone = util/* default.getUserAttr */.Z.getUserAttr(user, 'phones', 'text');
+      let order = util/* default.cloneDeep */.Z.cloneDeep(this.state.order);
+
+      if (this.state.shipping === 'shop') {
+        util/* default.set */.Z.set(order, 'shipping.pickup_at_shop', true);
+        util/* default.set */.Z.set(order, 'shipping.address.phone', this.state.phone);
+        util/* default.set */.Z.set(order, 'shipping.address.fullname', this.state.fullname);
+        util/* default.set */.Z.set(order, 'shipping.address.email', this.state.email);
+      } else {
+        if (this.state.shipping_address == 'new') {
+          let out = await this.props.store.createShippingAddress({
+            address: this.state.address,
+            country: 'Việt Nam',
+            fullname: this.state.fullname,
+            email: this.state.email,
+            phone: this.state.phone,
+            district: this.state.selectedDistrict.name,
+            district_id: this.state.selectedDistrict.id,
+            province: this.state.selectedProvince.name,
+            province_id: this.state.selectedProvince.id,
+            ward: this.state.selectedWard.name,
+            street: this.state.street,
+            ward_id: this.state.selectedWard.id
+          });
+          if (out.error) return this.setState({
+            g_err: this.props.t('update_failed')
+          });
+          util/* default.set */.Z.set(order, 'shipping.address', out.body);
+        } else {
+          let addresses = this.props.store.matchShippingAddresses();
+          let sa = util/* default.find */.Z.find(addresses, addr => addr.id === this.state.shipping_address);
+
+          if (!sa) {
+            return this.setState({
+              err,
+              g_err: this.props.t('input_shipping_info_err')
+            });
+          }
+
+          util/* default.set */.Z.set(order, 'shipping.address', sa);
+        }
+      }
+
+      let changeduser = false;
+
+      if (!ufullname && this.state.fullname) {
+        changeduser = true;
+        util/* default.setUserAttr */.Z.setUserAttr(user, {
+          key: 'fullname',
+          text: this.state.fullname
+        });
+      }
+
+      if (!uemail && this.state.email) {
+        changeduser = true;
+        util/* default.setUserAttr */.Z.setUserAttr(user, {
+          key: 'emails',
+          text: this.state.email
+        });
+      }
+
+      if (!uphone && this.state.phone) {
+        changeduser = true;
+        util/* default.setUserAttr */.Z.setUserAttr(user, {
+          key: 'phones',
+          text: this.state.phone
+        });
+      }
+
+      if (changeduser) this.props.store.setUser(user);
+      this.setState({
+        sending: true
+      });
+      order.user_confirmation = 'confirmed';
+      let out = await this.props.store.updateOrder(order);
+      this.setState({
+        sending: false
+      });
+
+      if (out.error) {
+        return this.setState({
+          g_err: this.props.t('update_failed')
+        });
+      }
+
+      this.setState({
+        step: 'success'
+      });
+      if (this.props.onResponse) this.props.onResponse('confirmed');
+    });
+
+    order_defineProperty(this, "onCancel", () => {
+      if (this.props.onResponse) this.props.onResponse('rejected');
+      this.close();
+    });
+
+    order_defineProperty(this, "close", () => {
+      if (this.props.cid && !this.state.order.user_confirmation) {
+        let order = util/* default.cloneDeep */.Z.cloneDeep(this.state.order);
+        order.user_confirmation = 'rejected';
+        this.props.store.updateOrder(order);
+      }
+
+      if (this.props.onClose) this.props.onClose();
+    });
+
+    this.load();
+  }
+
+  async load() {
+    if (!this.props.order_id) return;
+    let orderout = await this.props.store.fetchOrder(this.props.order_id);
+    this.setState({
+      loading: false
+    });
+
+    if (!orderout.error) {
+      this.setState({
+        order: orderout.body
+      });
+    } else {
+      this.setState({
+        error: orderout.error
+      });
+    }
+
+    let user = this.props.store.matchUser();
+    let attributes = util/* default.get */.Z.get(this.props.store.matchUser(), 'attributes', []);
+    let fullname = util/* default.get */.Z.get(util/* default.find */.Z.find(attributes, att => att.key === 'fullname'), 'text');
+    let email = util/* default.get */.Z.get(util/* default.find */.Z.find(attributes, att => att.key === 'emails'), 'text');
+    let phone = util/* default.get */.Z.get(util/* default.find */.Z.find(attributes, att => att.key === 'phones'), 'text');
+    this.setState({
+      fullname,
+      email,
+      phone
+    });
+    await this.props.store.fetchShippingAddresses();
+    let out = await this.props.store.list_provinces();
+    this.setState({
+      loadProvince: false
+    });
+    if (!out.error) this.setState({
+      provinces: util/* default.get */.Z.get(out, 'body.addresses')
+    });
+  }
+
+  isMobile() {
+    if (this.props.cid) return true;
+    if (this.props.isMobile) return true;
+    return this.props.store.isMobile();
+  }
+
+  onChangeShippingAddress(id) {
+    this.setState({
+      shipping_address: id,
+      err: {},
+      g_err: ''
+    });
+  }
+
+  onChangeShipping(id) {
+    this.setState({
+      shipping: id,
+      err: {},
+      g_err: ''
+    });
+  }
+
+  renderDesktopPaymentMethod(order) {
+    return null;
+    let editmode = false;
+
+    if (!order.status || order.status == 'new') {
+      editmode = !order.user_confirmation;
+    }
+
+    if (editmode) {
+      let pms = this.props.store.matchPaymentMethods();
+      let $pms = util/* default.map */.Z.map(pms, pm => {
+        let $name = pm.description;
+
+        if (pm.method == 'bank_transfer') {
+          $name = pm.description + ' ' + pm.bank_name + ' ' + pm.bank_branch;
+        }
+
+        let cls = 'order__card';
+        let $desc = null;
+
+        if (this.state.pm === pm.id) {
+          cls += ' order__card__active';
+          $desc = (0,preact_module.h)("div", {
+            class: "muted mt-1",
+            style: "margin-left: 26px !important;"
+          }, "Tr\u1EA3 ti\u1EC1n m\u1EB7t khi b\u1EA1n nh\u1EADn h\xE0ng");
+
+          if (pm.method == 'bank_transfer') {
+            $desc = (0,preact_module.h)("div", {
+              class: "muted mt-1",
+              style: "margin-left: 26px !important;"
+            }, (0,preact_module.h)("div", null, "STK: ", pm.bank_number), (0,preact_module.h)("div", null, "Ch\u1EE7 t\xE0i kho\u1EA3n: ", pm.bank_owner));
+          }
+        }
+
+        return (0,preact_module.h)("div", {
+          style: "width: 100% !important; margin-top: 10px !important;"
+        }, (0,preact_module.h)("div", {
+          class: "radio"
+        }, (0,preact_module.h)("input", {
+          type: "radio",
+          id: 'pm.' + pm.id,
+          onInput: e => this.onChangePaymentMethod(pm.id),
+          name: "pm",
+          checked: this.state.pm === pm.id
+        }), (0,preact_module.h)("label", {
+          class: "radio--label",
+          style: `margin-left: 4px !important; font-weight: ${this.state.pm === pm.id ? 500 : 400} !important;`,
+          for: 'pm.' + pm.id
+        }, $name), (0,preact_module.h)("div", {
+          class: "radio--check"
+        }, (0,preact_module.h)("div", {
+          class: "inside"
+        })), $desc));
+      });
+      let seccls = 'card_section';
+      if (this.isMobile()) seccls = 'order_section';
+      return (0,preact_module.h)(preact_module/* Fragment */.HY, null, (0,preact_module.h)("div", {
+        class: "order_section__line"
+      }), (0,preact_module.h)("div", {
+        class: seccls
+      }, (0,preact_module.h)("div", {
+        class: "order_label"
+      }, this.props.t('payment')), (0,preact_module.h)("div", {
+        class: "form",
+        style: "justify-content: space-between !important;"
+      }, $pms)));
+    }
+
+    let pm = order.payment_method || {
+      method: 'cod'
+    };
+    let $body = null;
+    if (pm.method === 'cash') $body = (0,preact_module.h)("div", null, this.props.t('pm_cash'));
+    if (pm.method === 'cod') $body = (0,preact_module.h)("div", null, this.props.t('pm_cod'));
+
+    if (pm.method === 'bank_transfer') {
+      let name = pm.bank_name;
+      if (pm.bank_branch) name += ' - ' + pm.bank_branch;
+      $body = (0,preact_module.h)("div", null, (0,preact_module.h)("div", null, "Ng\xE2n h\xE0ng: ", name), (0,preact_module.h)("div", {
+        class: "mt-1"
+      }, "Ch\u1EE7 t\xE0i kho\u1EA3n: ", pm.bank_owner), (0,preact_module.h)("div", {
+        class: "mt-1"
+      }, "S\u1ED1 t\xE0i kho\u1EA3n: ", pm.bank_number));
+    }
+
+    if (!$body) return null;
+    return (0,preact_module.h)(preact_module/* Fragment */.HY, null, (0,preact_module.h)("div", {
+      class: "order_label"
+    }, this.props.t('payment')), $body);
+  }
+
+  renderDesktopShipping(order) {
+    let editmode = false;
+
+    if (!order.status || order.status == 'new') {
+      editmode = !order.user_confirmation;
+    }
+
+    let user = this.props.store.matchUser();
+
+    if (editmode) {
+      let addresses = this.props.store.matchShippingAddresses();
+      let provinces = util/* default.map */.Z.map(this.state.provinces, province => ({
+        id: province.id,
+        name: province.province
+      }));
+      let districts = util/* default.map */.Z.map(this.state.districts, district => ({
+        id: district.id,
+        name: district.district
+      }));
+      let wards = util/* default.map */.Z.map(this.state.wards, ward => ({
+        id: ward.id,
+        name: ward.ward
+      }));
+      let cls = 'ship_card';
+      let $body = null;
+      let ship_icon_active = false;
+
+      if (this.state.shipping === 'ship') {
+        ship_icon_active = true;
+        let $preaddrs = util/* default.map */.Z.map(addresses, addr => {
+          let fulladdr = [addr.street, addr.ward, addr.district, addr.region, addr.country].filter(a => a).join(', ');
+          let $phone = null;
+
+          if (addr.phone) {
+            $phone = (0,preact_module.h)(preact_module/* Fragment */.HY, null, "\xA0\xB7\xA0", this.props.t('phn'), " ", addr.phone);
+          }
+
+          return (0,preact_module.h)("div", {
+            style: "margin-bottom: 15px !important"
+          }, (0,preact_module.h)("div", {
+            class: "radio d-flex "
+          }, (0,preact_module.h)("input", {
+            type: "radio",
+            id: 'shipping_addr.' + addr.id,
+            onInput: e => this.onChangeShippingAddress(addr.id),
+            name: "shipping_address",
+            checked: this.state.shipping_address === addr.id
+          }), (0,preact_module.h)("label", {
+            class: "radio--label",
+            for: 'shipping_addr.' + addr.id,
+            style: `font-weight: ${this.state.shipping_address === addr.id ? 500 : 400} !important`
+          }, addr.fullname, $phone, (0,preact_module.h)("div", {
+            class: "mt-1 muted"
+          }, "DC ", fulladdr)), (0,preact_module.h)("div", {
+            class: "radio--check"
+          }, (0,preact_module.h)("div", {
+            class: "inside"
+          }))));
+        });
+        $preaddrs.push((0,preact_module.h)("div", {
+          style: ""
+        }, (0,preact_module.h)("div", {
+          class: "radio d-flex "
+        }, (0,preact_module.h)("input", {
+          type: "radio",
+          id: 'shipping_addr.new',
+          onInput: e => this.onChangeShippingAddress('new'),
+          name: "shipping_address",
+          checked: this.state.shipping_address === 'new'
+        }), (0,preact_module.h)("label", {
+          class: "radio--label",
+          for: 'shipping_addr.new'
+        }, this.state.shipping_address === 'new' ? (0,preact_module.h)("b", null, "T\u1EDBi \u0111\u1ECBa ch\u1EC9 kh\xE1c") : 'Tới địa chỉ khác'), (0,preact_module.h)("div", {
+          class: "radio--check"
+        }, (0,preact_module.h)("div", {
+          class: "inside"
+        })))));
+        let $new = (0,preact_module.h)("div", {
+          style: "padding-left: 22px !important;"
+        }, (0,preact_module.h)("div", {
+          class: "d-flex"
+        }, (0,preact_module.h)("div", {
+          class: "mr-2",
+          style: "flex: 1 !important;"
+        }, (0,preact_module.h)("div", {
+          class: "order_form_label"
+        }, this.props.t('fullname')), (0,preact_module.h)("input", {
+          type: "text",
+          class: 'form-control ' + (this.state.err.name && 'err'),
+          onInput: this.onChangeFullname,
+          value: this.state.fullname
+        })), (0,preact_module.h)("div", {
+          class: "ml-2",
+          style: "flex: 1 !important;"
+        }, (0,preact_module.h)("div", {
+          class: "order_form_label"
+        }, this.props.t('phones')), (0,preact_module.h)("input", {
+          type: "text",
+          class: 'form-control ' + (this.state.err.phone && 'err'),
+          onInput: this.onChangePhone,
+          value: this.state.phone
+        }))), (0,preact_module.h)("div", {
+          class: "",
+          style: "width: 100% !important"
+        }, (0,preact_module.h)("div", {
+          class: "order_form_label"
+        }, this.props.t('address')), (0,preact_module.h)(AddressPicker, {
+          initAddress: this.state.address,
+          store: this.props.store,
+          width: "100%",
+          onChangeAddress: this.onChangeAddress,
+          full: this.isMobile(),
+          onSelect: this.onSelectAddress,
+          extra_cls: this.state.err.address && 'err'
+        })), (0,preact_module.h)("div", {
+          class: "d-flex",
+          style: "justify-content: space-between !important;"
+        }, (0,preact_module.h)("div", {
+          style: "flex: 1 !important; overflow:hidden !important; margin-right: 7px !important;"
+        }, (0,preact_module.h)("div", {
+          class: "order_form_label"
+        }, this.props.t('province')), (0,preact_module.h)(DropdownSelect, {
+          width: "194",
+          full: this.isMobile(),
+          has_search: true,
+          loading: this.state.loadProvince,
+          items: provinces,
+          selected: this.state.selectedProvince,
+          onSelect: this.onSelectProvince,
+          extra_cls: this.state.err.province && 'err'
+        })), (0,preact_module.h)("div", {
+          style: "flex: 1 !important; overflow:hidden !important; margin-left: 7px !important;"
+        }, (0,preact_module.h)("div", {
+          class: "order_form_label"
+        }, this.props.t('district')), (0,preact_module.h)(DropdownSelect, {
+          width: "194",
+          full: this.isMobile(),
+          selected: this.state.selectedDistrict,
+          has_search: true,
+          onSelect: this.onSelectDistrict,
+          loading: this.state.loadDistrict,
+          extra_cls: this.state.err.district && 'err',
+          items: districts
+        }))), (0,preact_module.h)("div", {
+          class: "d-flex",
+          style: "justify-content: space-between !important;"
+        }, (0,preact_module.h)("div", {
+          style: "flex: 1 !important; overflow:hidden !important; margin-right: 7px !important;"
+        }, (0,preact_module.h)("div", {
+          class: "order_form_label"
+        }, this.props.t('ward')), (0,preact_module.h)(DropdownSelect, {
+          width: "194",
+          selected: this.state.selectedWard,
+          full: this.isMobile(),
+          has_search: true,
+          onSelect: this.onSelectWard,
+          extra_cls: this.state.err.ward && 'err',
+          loading: this.state.loadWard,
+          items: wards
+        })), (0,preact_module.h)("div", {
+          style: "flex: 1 !important; margin-left: 7px !important;"
+        })));
+        cls += ' ship_card__active';
+
+        if (util/* default.size */.Z.size(addresses) == 0) {
+          $body = (0,preact_module.h)("div", null, (0,preact_module.h)("div", {
+            class: 'mt-3 mb-2 '
+          }, this.props.t('input_shipping_info')), $new);
+        } else {
+          if (this.state.shipping_address !== 'new') $new = null;
+          $body = (0,preact_module.h)("div", null, (0,preact_module.h)("div", {
+            class: "mt-3 mb-2",
+            style: "margin-bottom: 10px !important;"
+          }, "Vui l\xF2ng ch\u1ECDn \u0111\u1ECBa ch\u1EC9 giao h\xE0ng"), (0,preact_module.h)("div", {
+            class: "form"
+          }, $preaddrs), $new);
+        }
+      }
+
+      let shopcls = 'ship_card';
+      let shop_icon_active = false;
+
+      if (this.state.shipping === 'shop') {
+        shop_icon_active = true;
+        shopcls += ' ship_card__active';
+        $body = (0,preact_module.h)("div", null, (0,preact_module.h)("div", {
+          class: "d-flex"
+        }, (0,preact_module.h)("div", {
+          class: "mr-2",
+          style: "flex: 3 !important;"
+        }, (0,preact_module.h)("div", {
+          class: "order_form_label"
+        }, this.props.t('fullname')), (0,preact_module.h)("input", {
+          type: "text",
+          class: 'form-control ' + (this.state.err.name && 'err'),
+          onInput: this.onChangeFullname,
+          value: this.state.fullname
+        })), (0,preact_module.h)("div", {
+          class: "ml-2",
+          style: "flex: 2 !important;"
+        }, (0,preact_module.h)("div", {
+          class: "order_form_label"
+        }, this.props.t('phones')), (0,preact_module.h)("input", {
+          type: "text",
+          class: 'form-control ' + (this.state.err.phone && 'err'),
+          onInput: this.onChangePhone,
+          value: this.state.phone
+        }))), (0,preact_module.h)("div", null, (0,preact_module.h)("div", {
+          class: "order_form_label"
+        }, this.props.t('email')), (0,preact_module.h)("input", {
+          type: "text",
+          class: 'form-control ' + (this.state.err.email && 'err'),
+          onInput: this.onChangeEmail,
+          value: this.state.email
+        })));
+      }
+
+      let seccls = 'card_section';
+      if (this.isMobile()) seccls = 'order_section';
+      return (0,preact_module.h)(preact_module/* Fragment */.HY, null, (0,preact_module.h)("div", {
+        class: "order_section__line"
+      }), (0,preact_module.h)("div", {
+        class: seccls
+      }, (0,preact_module.h)("div", {
+        class: "order_label"
+      }, this.props.t('ship_to')), (0,preact_module.h)("div", {
+        class: "d-flex"
+      }, (0,preact_module.h)("div", {
+        class: shopcls + ' mr-3',
+        onClick: e => this.onChangeShipping('shop')
+      }, (0,preact_module.h)(Icon, {
+        name: "shop",
+        active: shop_icon_active
+      }), " ", (0,preact_module.h)("b", {
+        class: "ml-2"
+      }, "Nh\u1EADn h\xE0ng t\u1EA1i shop")), (0,preact_module.h)("div", {
+        class: cls,
+        onClick: e => this.onChangeShipping('ship')
+      }, (0,preact_module.h)(Icon, {
+        name: "package",
+        active: ship_icon_active
+      }), " ", (0,preact_module.h)("b", {
+        class: "ml-2"
+      }, "Giao h\xE0ng cho t\xF4i"))), $body));
+    }
+
+    let addr = util/* default.get */.Z.get(order, 'shipping.address') || {};
+    let fulladdr = [addr.address, addr.ward, addr.district, addr.region, addr.country].filter(a => a).join(', ');
+    let $phone = null;
+    if (addr.phone) $phone = (0,preact_module.h)("div", {
+      class: "mt-1 muted"
+    }, this.props.t('phn'), ":\xA0", addr.phone);
+
+    if (util/* default.get */.Z.get(order, 'shipping.pickup_at_shop')) {
+      fulladdr = 'Nhận hàng tại cửa hàng';
+    }
+
+    let $addr = fulladdr ? (0,preact_module.h)("div", null, fulladdr) : (0,preact_module.h)("i", {
+      class: "i muted"
+    }, "Ch\u01B0a c\xF3 \u0111\u1ECBa ch\u1EC9 giao h\xE0ng");
+    let seccls = 'card_section';
+    if (this.isMobile()) seccls = 'order_section';
+    return (0,preact_module.h)("div", {
+      class: seccls
+    }, (0,preact_module.h)("div", {
+      class: "order_label "
+    }, this.props.t('ship_to')), $addr, $phone);
+  }
+
+  renderDesktopSummary(order) {
+    let $deposit = null;
+
+    if (order.deposit > 0) {
+      $deposit = (0,preact_module.h)("span", {
+        class: "muted"
+      }, "(c\u1ECDc ", util/* default.formatCurrency */.Z.formatCurrency(order.deposit), ")");
+    }
+
+    let $discount = null;
+
+    if (order.total_discount > 0) {
+      $discount = (0,preact_module.h)("div", {
+        class: "order_summary_line"
+      }, (0,preact_module.h)("div", null, "Gi\u1EA3m gi\xE1"), (0,preact_module.h)("div", null, util/* default.formatCurrency */.Z.formatCurrency(order.total_discount)));
+    }
+
+    let $pay = null;
+
+    if ($deposit || order.payment_made) {
+      $pay = (0,preact_module.h)(preact_module/* Fragment */.HY, null, (0,preact_module.h)("div", {
+        class: "order_summary_line"
+      }, (0,preact_module.h)("div", null, "B\u1EA1n \u0111\xE3 tr\u1EA3"), (0,preact_module.h)("div", null, $deposit, " ", util/* default.formatCurrency */.Z.formatCurrency(order.payment_made))), (0,preact_module.h)("div", {
+        class: "order_summary_line"
+      }, (0,preact_module.h)("div", null, "B\u1EA1n ch\u01B0a tr\u1EA3"), (0,preact_module.h)("div", null, util/* default.formatCurrency */.Z.formatCurrency((order.total || 0) - (order.payment_made || 0)))));
+    }
+
+    let $tax = (0,preact_module.h)("div", {
+      class: "order_summary_line"
+    }, (0,preact_module.h)("div", null, "Ti\u1EC1n thu\u1EBF"), (0,preact_module.h)("div", null, util/* default.formatCurrency */.Z.formatCurrency(order.total_tax)));
+    let $ship = (0,preact_module.h)("div", {
+      class: "order_summary_line"
+    }, (0,preact_module.h)("div", null, "Ph\xED v\u1EADn chuy\u1EC3n"), (0,preact_module.h)("div", null, util/* default.get */.Z.get(order, 'shipping.fee', 0), " d"));
+    let editmode = false;
+
+    if (!order.status || order.status == 'new') {
+      editmode = !order.user_confirmation;
+    }
+
+    let $note = null;
+
+    if (editmode) {
+      $ship = null;
+      $tax = null;
+      $note = (0,preact_module.h)("div", {
+        class: "muted"
+      }, (0,preact_module.h)("img", {
+        class: "order_ship_icon",
+        src: __webpack_require__(9256)
+      }), "\xA0 Ch\u01B0a bao g\u1ED3m thu\u1EBF v\xE0 ph\xED v\u1EADn chuy\u1EC3n");
+    }
+
+    let seccls = '';
+    if (this.isMobile()) seccls = 'order_section';
+    return (0,preact_module.h)(preact_module/* Fragment */.HY, null, (0,preact_module.h)("div", {
+      class: "order_section__line"
+    }), (0,preact_module.h)("div", {
+      class: seccls
+    }, (0,preact_module.h)("div", {
+      class: "order_label"
+    }, "T\xF3m t\u1EAFt"), (0,preact_module.h)("div", {
+      class: "order_summary_line"
+    }, (0,preact_module.h)("div", null, "T\u1ED5ng ti\u1EC1n h\xE0ng"), (0,preact_module.h)("div", null, util/* default.formatCurrency */.Z.formatCurrency(order.subtotal))), $tax, $discount, $ship, $note, (0,preact_module.h)("div", {
+      class: "order_summary_line",
+      style: "margin-top: 10px !important; padding-top: 15px !important; border-top: 1px solid #eee !important"
+    }, (0,preact_module.h)("div", null, "B\u1EA1n ph\u1EA3i tr\u1EA3"), (0,preact_module.h)("div", {
+      class: "order__total"
+    }, util/* default.formatCurrency */.Z.formatCurrency(order.total))), $pay));
+  }
+
+  renderStatusBadge(order) {
+    let status = order.status || 'new';
+    return (0,preact_module.h)("div", {
+      style: "float: right !important;",
+      class: 'order_status order_status__' + status
+    }, status);
+  }
+
+  renderShippingInfo(order) {
+    if (order.status != 'new' || order.user_confirmation) {}
+
+    let shipping_provider = util/* default.get */.Z.get(order, 'shipping.shipping_provider');
+    if (!shipping_provider) return null;
+    let shipping_code = util/* default.get */.Z.get(order, 'shipping.shipping_code');
+    let $tracking_code = null;
+    if (shipping_code) $tracking_code = (0,preact_module.h)("div", {
+      class: "muted",
+      style: "margin-top: 3px !important"
+    }, "V\u1EADn \u0111\u01A1n\xA0", (0,preact_module.h)("a", {
+      class: "order_tracking_link",
+      target: "_blank",
+      href: 'https://giaohangtietkiem.vn/tra-cuu-van-don/' + shipping_code
+    }, shipping_code, "\xA0", (0,preact_module.h)("img", {
+      class: "order_tracking_link_icon",
+      src: __webpack_require__(8453)
+    })));
+
+    if (shipping_provider == 'ghtk') {
+      return (0,preact_module.h)("div", {
+        class: "order_section"
+      }, (0,preact_module.h)("div", {
+        class: "order_section_label"
+      }, "\u0110\u01A1n v\u1ECB v\u1EADn chuy\u1EC3n"), (0,preact_module.h)("div", {
+        class: "d-flex align-items-center"
+      }, (0,preact_module.h)("img", {
+        class: "order_shipping_provider_logo",
+        src: ShippingProvider.ghtk.logo
+      }), (0,preact_module.h)("div", null, ShippingProvider.ghtk.name, $tracking_code)));
+    }
+
+    return null;
+  }
+
+  renderDesktopShippingInfo(order) {
+    let shipping_provider = util/* default.get */.Z.get(order, 'shipping.shipping_provider');
+    if (!shipping_provider) return null;
+    let shipping_code = util/* default.get */.Z.get(order, 'shipping.shipping_code');
+    let $tracking_code = null;
+    if (shipping_code) $tracking_code = (0,preact_module.h)("div", {
+      class: "muted",
+      style: "margin-top: 3px !important"
+    }, "V\u1EADn \u0111\u01A1n\xA0", (0,preact_module.h)("a", {
+      class: "order_tracking_link",
+      target: "_blank",
+      href: 'https://giaohangtietkiem.vn/tra-cuu-van-don/' + shipping_code
+    }, shipping_code, "\xA0", (0,preact_module.h)("img", {
+      class: "order_tracking_link_icon",
+      src: __webpack_require__(8453)
+    })));
+
+    if (shipping_provider == 'ghtk') {
+      return (0,preact_module.h)(preact_module/* Fragment */.HY, null, (0,preact_module.h)("div", {
+        class: "order_label"
+      }, "\u0110\u01A1n v\u1ECB v\u1EADn chuy\u1EC3n"), (0,preact_module.h)("div", {
+        class: "d-flex align-items-center"
+      }, (0,preact_module.h)("img", {
+        class: "order_shipping_provider_logo",
+        src: ShippingProvider.ghtk.logo
+      }), (0,preact_module.h)("div", null, ShippingProvider.ghtk.name, $tracking_code)));
+    }
+
+    return null;
+  }
+
+  renderProducts(order) {
+    let $products = null;
+    $products = util/* default.map */.Z.map(order.items, item => {
+      if (!item || !item.product) return null;
+      let product = item.product;
+      return (0,preact_module.h)("div", {
+        class: "order_attachment__product"
+      }, (0,preact_module.h)("img", {
+        class: "order_attachment__product_img",
+        alt: '' + product.id,
+        src: util/* default.get */.Z.get(product, 'images.0') || __webpack_require__(9270)
+      }), (0,preact_module.h)("div", {
+        style: "overflow: hidden !important;"
+      }, (0,preact_module.h)("div", {
+        class: "order_attachment__product_name"
+      }, product.name), (0,preact_module.h)("div", {
+        class: "order_attachment__product_desc"
+      }, product.description || product.long_description), (0,preact_module.h)("div", {
+        class: "order_attachment__product_desc"
+      }, this.props.t('qty'), " ", item.quantity, "\xA0\xB7\xA0", util/* default.formatCurrency */.Z.formatCurrency(product.price))));
+    });
+    if (!this.isMobile()) return (0,preact_module.h)("div", null, (0,preact_module.h)("div", {
+      class: "order_label"
+    }, this.props.t('product')), $products);
+    return (0,preact_module.h)("div", {
+      class: "order_section"
+    }, (0,preact_module.h)("div", {
+      class: "order_section_label"
+    }, this.props.t('product')), $products);
+  }
+
+  renderDesktopProducts(order) {
+    let $products = null;
+    let editmode = false;
+
+    if (!order.status || order.status == 'new') {
+      editmode = !order.user_confirmation;
+    }
+
+    if (editmode) {
+      $products = util/* default.map */.Z.map(order.items, item => {
+        if (!item || !item.product) return null;
+        let product = item.product;
+        return (0,preact_module.h)("div", {
+          class: "order_attachment__product"
+        }, (0,preact_module.h)("img", {
+          class: "order_attachment__product_img",
+          alt: '' + product.id,
+          src: util/* default.get */.Z.get(product, 'images.0') || __webpack_require__(9270)
+        }), (0,preact_module.h)("div", {
+          style: "overflow: hidden !important; flex: 1 !important"
+        }, (0,preact_module.h)("div", {
+          class: "order_attachment__product_name"
+        }, product.name), (0,preact_module.h)("div", {
+          class: "order_attachment__product_desc"
+        }, product.description || product.long_description), (0,preact_module.h)("div", {
+          class: "order_attachment__product_desc"
+        }, util/* default.formatCurrency */.Z.formatCurrency(product.price))), (0,preact_module.h)("input", {
+          class: "form-control",
+          style: "text-align: center !important; font-weight: 400 !important; width: 50px !important",
+          value: item.quantity,
+          onInput: e => this.onChangeQuantity(item, e.target.value),
+          type: "text"
+        }), (0,preact_module.h)("div", {
+          style: "width: 80px !important; text-align: right !important; "
+        }, (0,preact_module.h)("b", null, util/* default.formatCurrency */.Z.formatCurrency(item.quantity * product.price))));
+      });
+    } else {
+      $products = util/* default.map */.Z.map(order.items, item => {
+        if (!item || !item.product) return null;
+        let product = item.product;
+        return (0,preact_module.h)("div", {
+          class: "order_attachment__product"
+        }, (0,preact_module.h)("img", {
+          class: "order_attachment__product_img",
+          alt: '' + product.id,
+          src: util/* default.get */.Z.get(product, 'images.0') || __webpack_require__(9270)
+        }), (0,preact_module.h)("div", {
+          style: "overflow: hidden !important; flex: 1 !important"
+        }, (0,preact_module.h)("div", {
+          class: "order_attachment__product_name"
+        }, product.name), (0,preact_module.h)("div", {
+          class: "order_attachment__product_desc"
+        }, product.description || product.long_description), (0,preact_module.h)("div", {
+          class: "order_attachment__product_desc"
+        }, util/* default.formatCurrency */.Z.formatCurrency(product.price))), (0,preact_module.h)("div", {
+          style: "text-align: center !important; font-weight: 400 !important; width: 50px !important"
+        }, item.quantity), (0,preact_module.h)("div", {
+          style: "width: 80px !important; text-align: right !important; "
+        }, (0,preact_module.h)("b", null, util/* default.formatCurrency */.Z.formatCurrency(item.total))));
+      });
+    }
+
+    return (0,preact_module.h)("div", {
+      class: "card_section"
+    }, (0,preact_module.h)("div", {
+      class: "desktop_order__heading"
+    }, this.renderStatusBadge(order), (0,preact_module.h)("b", {
+      style: "font-size: 18px !important;"
+    }, this.props.t('order'), " #", order.order_number || order.id), (0,preact_module.h)("div", {
+      class: "muted"
+    }, (0,preact_module.h)(Time, {
+      style: "font-size: 13px !important;",
+      time: order.issue_date || order.created
+    }))), (0,preact_module.h)("div", {
+      class: "order_label d-flex",
+      style: "margin-top: 20px !important;justify-content: space-between !important; align-items: flex-end !important;"
+    }, (0,preact_module.h)("div", {
+      style: "flex: 1 !important;"
+    }, this.props.t('product')), (0,preact_module.h)("div", {
+      style: "font-weight: 400 !important; text-align:center !important; width: 50px !important"
+    }, this.props.t('qty')), (0,preact_module.h)("div", {
+      style: "font-weight: 400 !important; text-align: right !important; width: 80px !important;"
+    }, this.props.t('total'))), $products);
+  }
+
+  renderMobile(order) {
+    if (this.state.step === 'success') return this.renderMobileSuccess(order);
+    let $error = null;
+
+    if (this.state.g_err) {
+      $error = (0,preact_module.h)("div", {
+        class: "mb-2 text__danger"
+      }, (0,preact_module.h)("img", {
+        style: "margin-top: -4px !important; height: 15px !important;",
+        src: ximg
+      }), "\xA0", (0,preact_module.h)("b", null, this.state.g_err));
+    }
+
+    let $status = (0,preact_module.h)("div", null, $error, (0,preact_module.h)("div", {
+      class: "btn-confirm-order",
+      style: "margin-top: 0 !important;",
+      onClick: this.confirm
+    }, this.props.t('confirm_order')));
+    let $close = (0,preact_module.h)("div", {
+      class: "order_btn order__btn__light mt-3",
+      onClick: this.onCancel
+    }, this.props.t('cancel_order'));
+
+    if (order.user_confirmation || order.status != 'new') {
+      $status = null;
+      if (this.props.cid) $close = (0,preact_module.h)("div", {
+        class: "order_btn order__btn__light mt-3",
+        onClick: this.close
+      }, this.props.t('close'));
+    }
+
+    return (0,preact_module.h)("div", {
+      class: "order",
+      style: "height: 100% !important"
+    }, (0,preact_module.h)("div", {
+      class: "order--content"
+    }, (0,preact_module.h)("div", {
+      class: "order--heading"
+    }, this.renderStatusBadge(order), (0,preact_module.h)("b", {
+      style: "font-size: 16px !important;"
+    }, this.props.t('order'), " #", order.order_number || order.id), (0,preact_module.h)("div", {
+      class: "muted"
+    }, (0,preact_module.h)(Time, {
+      style: "font-size: 13px !important;",
+      time: order.issue_date || order.created
+    }))), this.renderProducts(order), this.renderDesktopShipping(order), this.renderShippingInfo(order), this.renderDesktopPaymentMethod(order), this.renderDesktopSummary(order), (0,preact_module.h)("div", {
+      class: "order_section pb-3",
+      style: "padding-top: 0 !important;"
+    }, $status, $close)));
+  }
+
+  renderActions(order) {
+    let $actions = null;
+    let editmode = false;
+
+    if (!order.status || order.status == 'new') {
+      editmode = !order.user_confirmation;
+    }
+
+    if (this.state.step === 'success') return (0,preact_module.h)("div", {
+      class: "d-flex",
+      style: "align-items: center !important; justify-content: flex-end !important"
+    }, (0,preact_module.h)("div", null, "Ghi nh\u1EADn th\xE0nh c\xF4ng"), "\xA0", (0,preact_module.h)("img", {
+      style: "width: 16px !important; height: 16px !important;",
+      width: "16",
+      height: "16",
+      src: checkedimg
+    }));
+
+    if (editmode) {
+      let $error = null;
+
+      if (this.state.g_err) {
+        $error = (0,preact_module.h)("div", {
+          class: "mb-2 text__danger"
+        }, (0,preact_module.h)("img", {
+          style: "margin-top: -4px !important; height: 15px !important;",
+          src: ximg
+        }), "\xA0", (0,preact_module.h)("b", null, this.state.g_err));
+      }
+
+      $actions = (0,preact_module.h)("div", null, $error, (0,preact_module.h)("div", {
+        class: "btn-confirm-order",
+        onClick: this.confirm
+      }, this.props.t('confirm_order')), (0,preact_module.h)("div", {
+        class: "btn-cancel-order",
+        onClick: this.onCancel
+      }, this.props.t('cancel_order')));
+    }
+
+    return $actions;
+  }
+
+  renderDesktop(order) {
+    let acc = this.props.store.matchAccount();
+
+    var uri = acc.logo_url || __webpack_require__(9895);
+
+    return (0,preact_module.h)("div", {
+      class: "desktop order"
+    }, (0,preact_module.h)("div", {
+      class: "order_acc_header"
+    }, (0,preact_module.h)("img", {
+      class: "order_acc_logo",
+      src: uri
+    }), (0,preact_module.h)("div", {
+      class: "order_acc_name"
+    }, acc.name)), (0,preact_module.h)("div", {
+      class: "desktop_order__content"
+    }, (0,preact_module.h)("div", {
+      style: "flex: 1 !important; padding-right: 20px !important;"
+    }, this.renderDesktopProducts(order), this.renderDesktopShipping(order), this.renderDesktopShippingInfo(order), this.renderDesktopPaymentMethod(order), (0,preact_module.h)("div", {
+      class: "order__footer"
+    }, (0,preact_module.h)("a", {
+      target: "_blank",
+      href: "https://subiz.com.vn",
+      class: "order__footer_link"
+    }, "Cung c\u1EA5p b\u1EDFi ", (0,preact_module.h)("b", null, "Subiz")), (0,preact_module.h)("div", {
+      class: "order__footer_delimiter"
+    }), (0,preact_module.h)("a", {
+      target: "_blank",
+      href: "https://subiz.com.vn/vi/terms-of-service.html",
+      class: "order__footer_link"
+    }, "\u0110i\u1EC1u kho\u1EA3n"), (0,preact_module.h)("a", {
+      target: "_blank",
+      href: "https://subiz.com.vn/vi/privacy-policy.html",
+      class: "order__footer_link"
+    }, "Quy\u1EC1n ri\xEAng t\u01B0"))), (0,preact_module.h)("div", null, (0,preact_module.h)("div", {
+      class: "order_recap"
+    }, this.renderDesktopSummary(order), this.renderActions(order)))));
+  }
+
+  render() {
+    if (this.state.loading) return (0,preact_module.h)("div", {
+      class: "order_error"
+    }, (0,preact_module.h)(Spinner, {
+      class: "mt-4",
+      size: "60",
+      static: true
+    }));
+    if (this.state.error) return (0,preact_module.h)("div", {
+      class: "order_error"
+    }, (0,preact_module.h)("img", {
+      class: "mt-3",
+      src: __webpack_require__(6825)
+    }), (0,preact_module.h)("div", {
+      class: "mt-3"
+    }, this.props.t('order_load_error')));
+    let order = this.state.order;
+    if (this.isMobile()) return this.renderMobile(order);
+    return this.renderDesktop(order);
+  }
+
+}
+let ShippingProvider = {
+  ghtk: {
+    name: 'Giao hàng tiết kiệm',
+    logo: __webpack_require__(6890)
+  },
+  ghn: {
+    name: 'Giao hàng nhanh',
+    logo: __webpack_require__(1473)
+  }
+};
+;// CONCATENATED MODULE: ./src/chatbox/Order.js
+function Order_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; }
+
+
+
+
+const Order_POPUP_MAX_HEIGHT = 400;
+const Order_POPUP_HARD_MAX_HEIGHT = 500;
+const Order_POPUP_MIN_HEIGHT = 0;
+
+let Order_defaultAvatar = __webpack_require__(4761);
+
+
+
+
+class Order extends common/* Com */.up {
+  constructor(props) {
+    super(props);
+
+    Order_defineProperty(this, "state", {
+      hide: true,
+      ratingHeight: 0,
+      overlayOpacity: 0.3
+    });
+
+    Order_defineProperty(this, "onResponse", response => {
+      this.setState({
+        response
+      });
+    });
+
+    Order_defineProperty(this, "confirm", () => {
+      this.props.store.sendConvoEvent(this.props.cid, 'message_sent', {
+        message: {
+          format: 'plaintext',
+          text: 'confirm',
+          attachments: [{
+            type: 'postback',
+            postback: {
+              payload: JSON.stringify({
+                type: 'order_confirmation',
+                status: 'confirmed'
+              })
+            }
+          }]
+        }
+      });
+    });
+
+    Order_defineProperty(this, "close", async () => {
+      await util/* default.sleep */.Z.sleep(100);
+
+      if (this.state.response === 'confirmed') {
+        this.props.store.sendConvoEvent(this.props.cid, 'message_sent', {
+          message: {
+            format: 'plaintext',
+            text: this.props.t('confirm_order'),
+            attachments: [{
+              type: 'postback',
+              postback: {
+                payload: JSON.stringify({
+                  type: 'order_confirmation',
+                  status: 'confirmed'
+                })
+              }
+            }]
+          }
+        });
+      } else if (this.state.response === 'rejected') {
+        this.props.store.sendConvoEvent(this.props.cid, 'message_sent', {
+          message: {
+            format: 'plaintext',
+            text: this.props.t('cancel_order'),
+            attachments: [{
+              type: 'postback',
+              postback: {
+                payload: JSON.stringify({
+                  type: 'order_confirmation',
+                  status: 'cancelled'
+                })
+              }
+            }]
+          }
+        });
+      } else {}
+
+      this.setState({
+        response: ''
+      });
+      if (this.state.hide) return;
+      if (!this.refRating.current) return;
+      var popupStyle = this.refRating.current.currentStyle || window.getComputedStyle(this.refRating.current);
+      var h0 = parseFloat(popupStyle.height);
+      this.animation.play(20, h0, h => {
+        this.setState({
+          ratingHeight: h,
+          overlayOpacity: Math.min(1, (h - Order_POPUP_MIN_HEIGHT) / (Order_POPUP_HARD_MAX_HEIGHT - Order_POPUP_MIN_HEIGHT))
+        });
+
+        if (h < Order_POPUP_MIN_HEIGHT + 10) {
+          if (!this.state.hide) {
+            this.setState({
+              hide: true
+            });
+          }
+        }
+      });
+      this.props.onClose();
+    });
+
+    this.refRating = (0,preact_module/* createRef */.Vf)();
+    this.refHandle = (0,preact_module/* createRef */.Vf)();
+  }
+
+  componentDidMount() {
+    this.mouseUp = e => this.onMouseUp(e);
+
+    this.mouseMove = e => this.onMouseMove(e);
+
+    this.mouseDown = e => this.onMouseDown(e);
+
+    var $ratingHandle = this.refHandle.current;
+    $ratingHandle.addEventListener('mousedown', this.mouseDown, {
+      passive: true
+    });
+    $ratingHandle.addEventListener('touchstart', this.mouseDown, {
+      passive: true
+    });
+    window.addEventListener('mouseup', this.mouseUp, {
+      passive: true
+    });
+    window.addEventListener('touchend', this.mouseUp, {
+      passive: true
+    });
+    window.addEventListener('mousemove', this.mouseMove, {
+      passive: true
+    });
+    window.addEventListener('touchmove', this.mouseMove, {
+      passive: true
+    });
+    this.animation = new releaseAnimation({
+      maxY: Order_POPUP_MAX_HEIGHT,
+      minY: Order_POPUP_MIN_HEIGHT,
+      duration: 150
+    });
+    this.close();
+  }
+
+  componentWillUnmount() {
+    var $ratingHandle = this.refHandle.current;
+    $ratingHandle.removeEventListener('mousedown', this.mouseDown, 0);
+    $ratingHandle.removeEventListener('touchstart', this.mouseDown, 0);
+    window.removeEventListener('mouseup', this.mouseUp, 0);
+    window.removeEventListener('touchend', this.mouseUp, 0);
+    window.removeEventListener('mousemove', this.mouseMove, 0);
+    window.removeEventListener('touchmove', this.mouseMove, 0);
+  }
+
+  render() {
+    if (this._show != this.props.show) {
+      this._show = this.props.show;
+      setTimeout(() => {
+        if (!this._show) this.close();else this.open();
+      });
+    }
+
+    let cls = this.state.hide ? 'd-none' : '';
+    return (0,preact_module.h)("div", {
+      class: cls
+    }, (0,preact_module.h)("div", {
+      class: "extension--overlay",
+      style: `opacity: ${this.state.overlayOpacity * 0.5} !important;`
+    }), (0,preact_module.h)("div", {
+      class: "extension",
+      ref: this.refRating,
+      style: `height: ${this.state.ratingHeight}px !important;`
+    }, (0,preact_module.h)("div", {
+      class: "extension--close-btn",
+      onClick: this.close
+    }, this.props.t('close')), (0,preact_module.h)("div", {
+      class: "extension--handle",
+      ref: this.refHandle
+    }, (0,preact_module.h)("div", {
+      class: "extension--thumb"
+    })), (0,preact_module.h)("div", {
+      style: "overflow-x: hidden !important; overflow-y: scroll !important; height: 100% !important;"
+    }, (0,preact_module.h)(order_Order, {
+      key: this.props.order_id,
+      store: this.props.store,
+      onResponse: this.onResponse,
+      onClose: this.close,
+      t: this.props.t,
+      order_id: this.props.order_id,
+      cid: this.props.cid
+    }))));
+  }
+
+  open() {
+    if (!this.state.hide) return;
+    if (!this.props.order_id) return;
+    this.setState({
+      hide: false
+    });
+    if (!this.refRating.current) return;
+    var popupStyle = this.refRating.current.currentStyle || window.getComputedStyle(this.refRating.current);
+    var h0 = parseFloat(popupStyle.height);
+    this.animation.play(-20, h0, h => {
+      this.setState({
+        ratingHeight: h,
+        overlayOpacity: Math.min(1, (h - Order_POPUP_MIN_HEIGHT) / (Order_POPUP_HARD_MAX_HEIGHT - Order_POPUP_MIN_HEIGHT))
+      });
+    });
+  }
+
+  onMouseDown(e) {
+    this.mousePushed = true;
+    this.animation.stop();
+    e.preventDefault();
+    if (e.touches && e.touches[0]) e = e.touches[0];
+    this.mousePushedDy = e.pageY - window.pageYOffset - this.refRating.current.getBoundingClientRect().y;
+  }
+
+  onMouseUp(e) {
+    if (!this.mousePushed) return;
+    if (e.touches && e.touches[0]) e = e.touches[0];
+    this.mousePushed = false;
+    var popupStyle = this.refRating.current.currentStyle || window.getComputedStyle(this.refRating.current);
+    var h0 = parseFloat(popupStyle.height);
+    this.animation.play(this.mouseVelocity, h0, h => {
+      this.setState({
+        ratingHeight: h,
+        overlayOpacity: Math.min(1, (h - Order_POPUP_MIN_HEIGHT) / (Order_POPUP_HARD_MAX_HEIGHT - Order_POPUP_MIN_HEIGHT))
+      });
+
+      if (h < Order_POPUP_MIN_HEIGHT + 10) {
+        if (!this.state.hide) {
+          this.setState({
+            hide: true
+          });
+          this.props.onRate && this.props.onRate({
+            no_rating: true
+          });
+        }
+      }
+    });
+  }
+
+  onMouseMove(e) {
+    if (!this.mousePushed) return;
+    if (e.touches && e.touches[0]) e = e.touches[0];
+    var my = e.pageY;
+    this.mouseVelocity = my - this.lastMouseY;
+    this.lastMouseY = my;
+    my = my - this.mousePushedDy;
+    var K = 10000;
+    var height = this.refRating.current.getBoundingClientRect().bottom - my;
+
+    if (height > Order_POPUP_MAX_HEIGHT) {
+      var beta = K / (Order_POPUP_HARD_MAX_HEIGHT - Order_POPUP_MAX_HEIGHT) - Order_POPUP_MAX_HEIGHT;
+      height = Order_POPUP_HARD_MAX_HEIGHT - K / (height + beta);
+    }
+
+    this.setState({
+      ratingHeight: height,
+      overlayOpacity: Math.min(1, (height - Order_POPUP_MIN_HEIGHT) / (Order_POPUP_HARD_MAX_HEIGHT - Order_POPUP_MIN_HEIGHT))
+    });
+  }
+
+}
+;// CONCATENATED MODULE: ./src/chatbox/Widget.js
+function Widget_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 send = __webpack_require__(9737);
+
+var Widget_checkedimg = __webpack_require__(8909);
+
+var empty = __webpack_require__(29);
+
+
+
+
+
+
+
+const Widget_defaultAvatar = 'https://file-subiz.com/fiqoahedjbgwclpouoml-avatar_default_baa8a1d7.png';
+
+
+
+
+class Widget extends common/* Com */.up {
+  constructor(props) {
+    super(props);
+
+    Widget_defineProperty(this, "onLink", (e, url) => {
+      if (!url) return e.preventDefault();
+      let noschemeurl = url.replace(/(^\w+:|^)\/\//, '');
+
+      if (noschemeurl.startsWith('widget.subiz.com.vn/orders/')) {
+        let orderid = noschemeurl.substr('widget.subiz.com.vn/orders/'.length);
+        orderid = orderid.split('/')[0];
+        this.setState({
+          showOrder: true,
+          order_id: orderid
+        });
+        e.preventDefault();
+        return;
+      }
+    });
+
+    Widget_defineProperty(this, "closeOrder", e => {
+      this.setState({
+        showOrder: false,
+        order_id: ''
+      });
+      this.focusInput();
+    });
+
+    this.userSent = {};
+    this.setState({
+      creating: false,
+      clickedJoin: false,
+      formData: {},
+      showOrder: false,
+      order_id: ''
+    });
+    this.props.store.onUpdate(this, _ => this.forceUpdate());
+  }
+
+  componentDidMount() {
+    if (!this.props.store.isMobile()) this.focusInput();
+  }
+
+  componentDidUpdate(prevProp) {
+    if (prevProp.isShow !== this.props.isShow) {
+      if (this.props.isShow && !this.props.store.isMobile()) this.focusInput();
+      if (this.props.isShow && this.props.store.isMobile()) this.blur();
+    }
+
+    if (prevProp.cid !== this.props.cid) {
+      this.closeOrder();
+      this.setState({
+        clickedJoin: false
+      });
+      setTimeout(() => {
+        this.events && this.events.focus();
+        if (!this.props.store.isMobile()) this.focusInput();
+      }, 100);
+    }
+
+    this.updateFormDataFields();
+  }
+
+  shouldShowForm() {
+    let formRequired = this.isFormRequired();
+    return formRequired && !this.props.cid || formRequired && this.props.cid && this.state.clickedJoin;
+  }
+
+  render() {
+    let showform = this.shouldShowForm();
+    let form;
+    let accountSetting = this.props.plugin.chatbox || {};
+    let acc = this.props.store.matchAccount() || {};
+    let submitLabel = this.props.t('prechat_form_btn');
+    if (util/* default.get */.Z.get(accountSetting, 'prechat_form.enabled')) form = accountSetting.prechat_form;
+    let offlineEnabled = util/* default.get */.Z.get(accountSetting, 'offline_form.enabled');
+
+    if (this.isOffline(acc, accountSetting) && offlineEnabled) {
+      form = accountSetting.offline_form;
+      submitLabel = this.props.t('offline_form_btn');
+    }
+
+    if (this.props.view === 'offline_form') {
+      showform = true;
+      form = accountSetting.offline_form;
+      submitLabel = this.props.t('offline_form_btn');
+    }
+
+    if (this.props.view === 'prechat_form') {
+      showform = true;
+      form = accountSetting.prechat_form;
+      submitLabel = this.props.t('prechat_form_btn');
+    }
+
+    let $body = null;
+    if (this.props.view === 'list') $body = this.renderConvoList();else if (showform) $body = this.renderForm(form, submitLabel);else $body = this.renderChat();
+    let position = util/* default.get */.Z.get(accountSetting, 'desktop_button.position') || 'right';
+    if (this.props.store.isMobile()) position = util/* default.get */.Z.get(accountSetting, 'mobile_button.position', position);
+    let cls = 'widget-container widget-container--' + position;
+    if (!this.props.isShow) cls += ' widget-container--hide';
+    return (0,preact_module.h)("div", {
+      class: cls
+    }, (0,preact_module.h)(Header, {
+      t: this.props.t,
+      plugin: this.props.plugin,
+      store: this.props.store,
+      cid: this.props.cid,
+      view: this.props.view,
+      onClose: this.props.onClose,
+      onGotoList: () => this.props.onGo({
+        view: 'list'
+      })
+    }), $body);
+  }
+
+  async submitPrechatForm(form) {
+    var hasError = false;
+    util/* default.map */.Z.map(this.state.formData, (field, key) => {
+      if (field.is_required && (field.value === undefined || field.value === '' || util/* default.size */.Z.size(field.value) === 0 && Array.isArray(field.value))) {
+        field.error = this.props.t('error_empty');
+        hasError = true;
+      } else field.error = '';
+
+      if (key.substr(5) === 'emails' && !util/* default.isEmail */.Z.isEmail(field.value) && field.is_required) {
+        field.error = this.props.t('error_email_invalid');
+        hasError = true;
+      }
+
+      if (key.substr(5) === 'phones' && !util/* default.isPhone */.Z.isPhone(field.value) && field.is_required) {
+        field.error = this.props.t('error_phone_invalid');
+        hasError = true;
+      }
+    });
+    if (hasError) return this.forceUpdate();
+    let data = util/* default.cloneDeep */.Z.cloneDeep(this.state.formData);
+    let user = util/* default.cloneDeep */.Z.cloneDeep(this.props.store.matchUser());
+    util/* default.map */.Z.map(data, (field, key) => {
+      if (!key.startsWith('attr:')) return;
+      var attr = {
+        key: key.substr(5)
+      };
+      if (field.type === 'number') attr.number = parseInt(field.value);
+      if (field.type === 'datetime') attr.datetime = new util/* default.Date */.Z.Date(field.value).toISOString();
+      if (field.type === 'list') attr.list = field.value;
+      if (field.type === 'text' || field.type === 'boolean') attr[field.type] = field.value;
+      util/* default.setUserAttr */.Z.setUserAttr(user, attr);
+    });
+    let firstmsg = util/* default.get */.Z.get(data, 'question.value');
+    let groupid = util/* default.get */.Z.get(data, 'group.value', '');
+
+    if (this.props.cid) {
+      this.props.store.setUser(user);
+      this.setState({
+        clickedJoin: false
+      });
+      await this.props.store.sendConvoEvent(this.props.cid, 'message_sent', {
+        message: {
+          text: firstmsg,
+          format: 'plaintext',
+          fields: [{
+            key: 'to_agent_group',
+            value: util/* default.stringify */.Z.stringify(groupid)
+          }]
+        }
+      });
+      if (form.end_conversation_after_submit) await this.props.store.endConvo(this.props.cid);
+      return;
+    }
+
+    this.setState({
+      creating: true
+    });
+    let message = {
+      text: firstmsg,
+      format: 'plaintext'
+    };
+    let req = {
+      group_id: groupid,
+      message: firstmsg,
+      locale: this.props.t.locale(),
+      initial_by: user.id
+    };
+    this.setState({
+      creatingError: null
+    });
+    const {
+      error,
+      convo
+    } = await this.props.store.startConvo(req);
+    this.props.store.setUser(user);
+
+    if (error) {
+      this.setState({
+        creating: false,
+        creatingError: error
+      });
+      return;
+    }
+
+    let newconvoid = convo.id;
+    this.userSent[newconvoid] = true;
+    this.props.onGo({
+      view: 'chat',
+      cid: newconvoid
+    });
+    this.props.store.sendConvoEvent(newconvoid, 'message_sent', {
+      message
+    });
+    this.setState({
+      creating: false,
+      clickedJoin: false
+    });
+    if (!this.props.store.isMobile()) this.focusInput();
+  }
+
+  formMounted(form) {
+    let formData = this.fillForm(form);
+    formData['question'] = {
+      key: 'question',
+      is_required: true,
       label: this.props.t.i18n(util/* default.get */.Z.get(form, `i18n_question_label`, {})) || form.question_label,
       type: 'text'
     };
@@ -4102,6 +6140,7 @@ class Widget extends common/* Com */.M {
       onClick: e => this.onContainerClick(e)
     }, (0,preact_module.h)(Events, {
       isShow: this.props.isShow,
+      onLink: this.onLink,
       store: this.props.store,
       onFormSubmit: e => this.onEventFormSubmit(e),
       ref: ref => this.events = ref,
@@ -4121,6 +6160,15 @@ class Widget extends common/* Com */.M {
       onRate: e => this.onRate(e),
       cid: this.props.cid,
       t: this.props.t
+    }), (0,preact_module.h)(Order, {
+      forceView: this.props.view,
+      plugin: this.props.plugin,
+      show: this.state.showOrder,
+      order_id: this.state.order_id,
+      store: this.props.store,
+      onClose: this.closeOrder,
+      cid: this.props.cid,
+      t: this.props.t
     }), $input);
   }
 
@@ -4204,7 +6252,7 @@ class Widget extends common/* Com */.M {
       $unread = (0,preact_module.h)("img", {
         alt: "conversation ended",
         class: "convo-list--convo-completed",
-        src: checkedimg,
+        src: Widget_checkedimg,
         title: this.props.t('conversation_ended')
       });
     }
@@ -4383,7 +6431,7 @@ class Widget extends common/* Com */.M {
 
 }
 
-class FormMounter extends common/* Com */.M {
+class FormMounter extends common/* Com */.up {
   componentDidMount() {
     this.props.onMount(this.props.form);
   }
@@ -4391,7 +6439,7 @@ class FormMounter extends common/* Com */.M {
 }
 
 function Widget_encode(key) {
-  return btoa(key).split('=').join('');
+  return encodeURIComponent(key);
 }
 ;// CONCATENATED MODULE: ./src/chatbox/main.js
 
@@ -4400,9 +6448,9 @@ function Widget_encode(key) {
 
 
 
-let promiseMainCSS = (() => __webpack_require__.e(/* import() */ 178).then(__webpack_require__.bind(__webpack_require__, 178)))();
+let main_promiseMainCSS = (() => __webpack_require__.e(/* import() */ 178).then(__webpack_require__.bind(__webpack_require__, 178)))();
 
-class Main extends common/* Com */.M {
+class Main extends common/* Com */.up {
   constructor(props) {
     super(props);
     this.refButton = (0,preact_module/* createRef */.Vf)();
@@ -4412,7 +6460,7 @@ class Main extends common/* Com */.M {
     let plugins = this.props.store.matchPlugin();
     let found = util/* default.find */.Z.find(plugins, plugin => plugin.id === this.props.plugin.id);
     if (!found) return;
-    let css = (await promiseMainCSS).default.default.toString();
+    let css = (await main_promiseMainCSS).default.default.toString();
     var outcss = util/* default.replaceCssVariable */.Z.replaceCssVariable(css, this.props.plugin.chatbox);
     util/* default.setCss */.Z.setCss(this.props.plugin.id, this.$cssStyleDiv, outcss);
   }
@@ -4555,11 +6603,13 @@ class Main extends common/* Com */.M {
 }
 
 function restoreViewport() {
+  if (document.body && document.body.classList) document.body.classList.remove('sbz_no_scroll');
   let metatag = document.getElementById('subiz-meta-viewport');
   if (metatag) metatag.remove();
 }
 
 function modifyViewport() {
+  if (document.body && document.body.classList) document.body.classList.add('sbz_no_scroll');
   let metatag = document.createElement('meta');
   metatag.httpEquiv = 'X-UA-Compatible';
   metatag.name = 'viewport';
@@ -4570,74 +6620,17 @@ function modifyViewport() {
 
 /***/ }),
 
-/***/ 2493:
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "M": () => (/* binding */ Com),
-/* harmony export */   "u": () => (/* binding */ Clickaway)
-/* harmony export */ });
-/* harmony import */ var preact__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6400);
-/* harmony import */ var _util_index_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(819);
-
-
-class Com extends preact__WEBPACK_IMPORTED_MODULE_0__/* .Component */ .wA {
-  constructor(props) {
-    super(props);
-    this._isMounted = true;
-    setTimeout(() => {
-      if (this.componentWillUnmount) {
-        let old = this.componentWillUnmount.bind(this);
-
-        this.componentWillUnmount = () => {
-          old();
-          this._isMounted = false;
-        };
-      }
-    }, 10);
-  }
-
-}
-class Clickaway extends Com {
-  constructor(props) {
-    super(props);
-    this.setWrapperRef = this.setWrapperRef.bind(this);
-    this.onClick = this.onClick.bind(this);
-  }
-
-  componentDidMount() {
-    document.addEventListener('mousedown', this.onClick);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('mousedown', this.onClick);
-  }
-
-  setWrapperRef(node) {
-    this.wrapperRef = node;
-  }
-
-  onClick(event) {
-    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
-      this.props.onClickaway && this.props.onClickaway();
-    }
-  }
-
-  render() {
-    return (0,preact__WEBPACK_IMPORTED_MODULE_0__.h)("div", {
-      ref: this.setWrapperRef
-    }, this.props.children);
-  }
+/***/ 6755:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
-}
+module.exports = __webpack_require__.p + "assets/img/bubble_default.7d5e4ab.svg";
 
 /***/ }),
 
-/***/ 6755:
+/***/ 8712:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
-module.exports = __webpack_require__.p + "assets/img/bubble_default.7d5e4ab.svg";
+module.exports = __webpack_require__.p + "assets/img/caret.998eb8f.svg";
 
 /***/ }),
 
@@ -4669,6 +6662,13 @@ module.exports = __webpack_require__.p + "assets/img/done_gray.d7e8203.svg";
 
 /***/ }),
 
+/***/ 763:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = __webpack_require__.p + "assets/img/done_green.b817fd4.svg";
+
+/***/ }),
+
 /***/ 29:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
@@ -4676,6 +6676,13 @@ module.exports = __webpack_require__.p + "assets/img/empty.29bed2d.svg";
 
 /***/ }),
 
+/***/ 6825:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = __webpack_require__.p + "assets/img/empty_1.0b98af0.svg";
+
+/***/ }),
+
 /***/ 8453:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
@@ -4683,6 +6690,20 @@ module.exports = __webpack_require__.p + "assets/img/external-link.90577cc.svg";
 
 /***/ }),
 
+/***/ 1473:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = __webpack_require__.p + "assets/img/ghn.070f8e3.svg";
+
+/***/ }),
+
+/***/ 6890:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = __webpack_require__.p + "assets/img/ghtk.326eac1.svg";
+
+/***/ }),
+
 /***/ 9895:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
@@ -4690,6 +6711,20 @@ module.exports = __webpack_require__.p + "assets/img/image_default.be0698b.png";
 
 /***/ }),
 
+/***/ 9256:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = __webpack_require__.p + "assets/img/info.ebce7ea.svg";
+
+/***/ }),
+
+/***/ 5770:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = __webpack_require__.p + "assets/img/loader.37000a7.svg";
+
+/***/ }),
+
 /***/ 6484:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
@@ -4697,6 +6732,27 @@ module.exports = __webpack_require__.p + "assets/img/loading_static.8f403ae.svg"
 
 /***/ }),
 
+/***/ 6071:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = __webpack_require__.p + "assets/img/not_found_search.2ddb8d1.png";
+
+/***/ }),
+
+/***/ 25:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = __webpack_require__.p + "assets/img/package.8d37d0f.svg";
+
+/***/ }),
+
+/***/ 1216:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = __webpack_require__.p + "assets/img/package_fade.763c001.svg";
+
+/***/ }),
+
 /***/ 6535:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
@@ -4718,6 +6774,13 @@ module.exports = __webpack_require__.p + "assets/img/rating--poor.2938a25.svg";
 
 /***/ }),
 
+/***/ 636:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = __webpack_require__.p + "assets/img/search.f9705ff.svg";
+
+/***/ }),
+
 /***/ 9737:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
@@ -4725,11 +6788,32 @@ module.exports = __webpack_require__.p + "assets/img/send.6db52a9.svg";
 
 /***/ }),
 
+/***/ 6180:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = __webpack_require__.p + "assets/img/shop.f7dc7d8.svg";
+
+/***/ }),
+
+/***/ 750:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = __webpack_require__.p + "assets/img/shop_faded.df7845a.svg";
+
+/***/ }),
+
 /***/ 8430:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 module.exports = __webpack_require__.p + "assets/img/subiz-mono.877e9f5.svg";
 
+/***/ }),
+
+/***/ 2514:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = __webpack_require__.p + "assets/img/x.26fdfa3.svg";
+
 /***/ })
 
 }]);