@subiz/widget-v4 4.0.63 → 4.0.67

package/assets/less/chatbox.less

@@ -47,12 +47,17 @@
 @z-index-4: '@z_index_4';
 @z-index-5: '@z_index_5';
 
-
 // stop client css rule on all elements inside #subiz
 #sbz92 * {
 	all: unset !important;
 }
 
+.sbz_no_scroll {
+	overflow: hidden !important;
+	overflow-x: hidden !important;
+	overflow-y: hidden !important;
+}
+
 #sbz92 {
 	#makeImportant() !important;
 }

package/babel.config.js

@@ -1,7 +1,5 @@
 module.exports = {
-	plugins: [
-		['@babel/plugin-transform-react-jsx', { pragma: 'h' }],
-	],
+	plugins: [['@babel/plugin-transform-react-jsx', {pragma: 'h'}], '@babel/plugin-proposal-class-properties'],
 	comments: false,
-	presets: [['@babel/preset-env', { useBuiltIns: 'usage', corejs: 3, targets: '> 5%, not dead' }]],
+	presets: [['@babel/preset-env', {useBuiltIns: 'usage', corejs: 3, targets: '> 5%, not dead'}]],
 }

package/compiled_src/bot.js

@@ -7,6 +7,12 @@ exports.default = _default;
 
 var _index = _interopRequireDefault(require("./util/index.js"));
 
+var common = _interopRequireWildcard(require("./common.js"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _default(store) {
@@ -24,7 +30,7 @@ function _default(store) {
         error
       } = await store.startConvo({
         initial_by: bot.id,
-        locale: _index.default.detectLang(),
+        locale: common.getLocale(bot, _index.default.detectLang()),
         state: 'active',
         members: [{
           type: 'bot',

package/compiled_src/call/call.js

@@ -13,6 +13,8 @@ var _common = require("../common.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -20,20 +22,21 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 let notifCSS = (() => Promise.resolve().then(() => _interopRequireWildcard(require('./css.js'))))();
 
 class Notif extends _common.Com {
-  state = {
-    close: true,
-    cssready: false,
-    closeAnimation: true,
-    imageReady: false,
-    user: {},
-    timestamp: '',
-    message: '',
-    title: '',
-    last_show: 0
-  };
-
   constructor(props) {
     super(props);
+
+    _defineProperty(this, "state", {
+      close: true,
+      cssready: false,
+      closeAnimation: true,
+      imageReady: false,
+      user: {},
+      timestamp: '',
+      message: '',
+      title: '',
+      last_show: 0
+    });
+
     setTimeout(async () => {
       let {
         body: impression

package/compiled_src/chatbox/ChatButton.js

@@ -146,7 +146,9 @@ class ChatButton extends _common.Com {
 
     let greeting = _index.default.get(accountSetting, 'greeting', {});
 
-    if (!greeting.message || !greeting.enabled) {
+    let text = this.props.t.i18n(_index.default.get(greeting, 'greeting', {})) || greeting.message;
+
+    if (!text || !greeting.enabled) {
       this.setState({
         previewEvent: {}
       });

package/compiled_src/chatbox/DropdownSelect.js

@@ -15,62 +15,95 @@ var _spinner = _interopRequireDefault(require("./spinner.js"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-class DropdownSelect extends _common.Com {
-  state = {
-    show: false,
-    searchValue: ''
-  };
-  filterRef = (0, _preact.createRef)();
-  overlayRef = (0, _preact.createRef)();
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+class DropdownSelect extends _common.Com {
   constructor(props) {
     super(props);
-    document.addEventListener('touchmove', function (e) {});
-  }
 
-  onTouchMove = e => {
-    if (e.target === this.overlayRef.current) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  };
-  hideDropdown = () => {
-    this.setState({
+    _defineProperty(this, "state", {
       show: false,
       searchValue: ''
     });
-  };
-  onKeydown = e => {
-    if (e.key === 'Escape') {
-      if (!this.state.show) return;
-      if (this.state.searchValue) this.setState({
+
+    _defineProperty(this, "filterRef", (0, _preact.createRef)());
+
+    _defineProperty(this, "overlayRef", (0, _preact.createRef)());
+
+    _defineProperty(this, "onTouchMove", e => {
+      if (e.target === this.overlayRef.current) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    });
+
+    _defineProperty(this, "hideDropdown", () => {
+      this.setState({
+        show: false,
         searchValue: ''
-      });else this.hideDropdown();
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  };
-  hasSearch = () => {
-    if (this.props.has_search) return true;
-    return _index.default.size(this.props.items) >= 10;
-  };
-  getFilteredOptions = () => {
-    let items = this.props.items;
+      });
+    });
+
+    _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();
+      }
+    });
+
+    _defineProperty(this, "hasSearch", () => {
+      if (this.props.has_search) return true;
+      return _index.default.size(this.props.items) >= 10;
+    });
+
+    _defineProperty(this, "getFilteredOptions", () => {
+      let items = this.props.items;
+
+      if (this.state.searchValue && this.hasSearch()) {
+        items = _index.default.filter(items, item => {
+          let optionName = _index.default.unicodeToAscii(item.name).toLowerCase().replace(/ /g, '');
+
+          let optionDesc = _index.default.unicodeToAscii(item.desc).toLowerCase().replace(/ /g, '');
 
-    if (this.state.searchValue && this.hasSearch()) {
-      items = _index.default.filter(items, item => {
-        let optionName = _index.default.unicodeToAscii(item.name).toLowerCase().replace(/ /g, '');
+          let searchValue = _index.default.unicodeToAscii(this.state.searchValue).toLowerCase().replace(/ /g, '');
 
-        let optionDesc = _index.default.unicodeToAscii(item.desc).toLowerCase().replace(/ /g, '');
+          return optionName.indexOf(searchValue) != -1 || optionDesc.indexOf(searchValue) != -1;
+        });
+      }
 
-        let searchValue = _index.default.unicodeToAscii(this.state.searchValue).toLowerCase().replace(/ /g, '');
+      return items;
+    });
 
-        return optionName.indexOf(searchValue) != -1 || optionDesc.indexOf(searchValue) != -1;
+    _defineProperty(this, "onChangeSearchValue", e => {
+      this.setState({
+        searchValue: e.target.value
       });
-    }
+    });
+
+    _defineProperty(this, "toogleDropdown", async () => {
+      await this.setState({
+        show: true,
+        searchValue: ''
+      });
+      this.focusFilter();
+    });
+
+    _defineProperty(this, "onSelect", item => {
+      this.props.onSelect(item);
+      this.hideDropdown();
+    });
 
-    return items;
-  };
+    _defineProperty(this, "onBackgroundScroll", e => {
+      console.log('EEEEEEE', e);
+      alert('y');
+    });
+
+    document.addEventListener('touchmove', function (e) {});
+  }
 
   componentDidMount() {
     window.addEventListener('keydown', this.onKeydown);
@@ -80,12 +113,6 @@ class DropdownSelect extends _common.Com {
     window.removeEventListener('keydown', this.onKeydown);
   }
 
-  onChangeSearchValue = e => {
-    this.setState({
-      searchValue: e.target.value
-    });
-  };
-
   renderEmpty() {
     return (0, _preact.h)("div", {
       class: "dropdown_select_filter__empty"
@@ -110,14 +137,6 @@ class DropdownSelect extends _common.Com {
     }, "\u0110ang t\u1EA3i d\u1EEF li\u1EC7u"));
   }
 
-  toogleDropdown = async () => {
-    await this.setState({
-      show: true,
-      searchValue: ''
-    });
-    this.focusFilter();
-  };
-
   focusFilter() {
     if (!this.filterRef.current) return;
     this.filterRef.current.focus();
@@ -127,11 +146,6 @@ class DropdownSelect extends _common.Com {
     }, 100);
   }
 
-  onSelect = item => {
-    this.props.onSelect(item);
-    this.hideDropdown();
-  };
-
   renderDropdown() {
     if (!this.state.show) return null;
     let items = this.getFilteredOptions();
@@ -200,11 +214,6 @@ class DropdownSelect extends _common.Com {
     }, $items));
   }
 
-  onBackgroundScroll = e => {
-    console.log('EEEEEEE', e);
-    alert('y');
-  };
-
   render() {
     let $name = (0, _preact.h)("div", {
       class: "muted text-truncate",

package/compiled_src/chatbox/Event.js

@@ -200,6 +200,7 @@ class Event extends _common.Com {
         onSelect: e => this.choosePostbackBtn(e)
       }), (0, _preact.h)(_ProductAttachments.default, {
         t: this.props.t,
+        onPostback: e => this.choosePostbackBtn(e),
         store: this.props.store,
         ev: ev
       }), (0, _preact.h)(_OrderAttachments.default, {

package/compiled_src/chatbox/MessageInput.js

@@ -15,9 +15,16 @@ var _Emoji = _interopRequireDefault(require("./Emoji.js"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 class MessageInput extends _common.Com {
   constructor(props) {
     super(props);
+
+    _defineProperty(this, "onEnter", _index.default.throttle(function () {
+      this.submitMessage();
+    }, 50));
+
     this.refFileInput = (0, _preact.createRef)();
     this.refMessageInput = (0, _preact.createRef)();
     this.props.store.onUpdate(this, _ => this.forceUpdate());
@@ -262,10 +269,6 @@ class MessageInput extends _common.Com {
     input.focus();
   }
 
-  onEnter = _index.default.throttle(function () {
-    this.submitMessage();
-  }, 50);
-
   onKeydown(e) {
     if (e.keyCode === 13 && e.shiftKey === false) {
       this.onEnter();

package/compiled_src/chatbox/Order.js

@@ -19,6 +19,8 @@ var _order = _interopRequireDefault(require("../order/order.js"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 const POPUP_MAX_HEIGHT = 400;
 const POPUP_HARD_MAX_HEIGHT = 500;
 const POPUP_MIN_HEIGHT = 0;
@@ -28,16 +30,102 @@ let defaultAvatar = require('../../assets/img/default_avatar.png');
 class Order extends _common.Com {
   constructor(props) {
     super(props);
+
+    _defineProperty(this, "state", {
+      hide: true,
+      ratingHeight: 0,
+      overlayOpacity: 0.3
+    });
+
+    _defineProperty(this, "onResponse", response => {
+      this.setState({
+        response
+      });
+    });
+
+    _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'
+              })
+            }
+          }]
+        }
+      });
+    });
+
+    _defineProperty(this, "close", async () => {
+      await _index.default.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 - POPUP_MIN_HEIGHT) / (POPUP_HARD_MAX_HEIGHT - POPUP_MIN_HEIGHT))
+        });
+
+        if (h < POPUP_MIN_HEIGHT + 10) {
+          if (!this.state.hide) {
+            this.setState({
+              hide: true
+            });
+          }
+        }
+      });
+      this.props.onClose();
+    });
+
     this.refRating = (0, _preact.createRef)();
     this.refHandle = (0, _preact.createRef)();
   }
 
-  state = {
-    hide: true,
-    ratingHeight: 0,
-    overlayOpacity: 0.3
-  };
-
   componentDidMount() {
     this.mouseUp = e => this.onMouseUp(e);
 
@@ -121,12 +209,6 @@ class Order extends _common.Com {
     }))));
   }
 
-  onResponse = response => {
-    this.setState({
-      response
-    });
-  };
-
   open() {
     if (!this.state.hide) return;
     if (!this.props.order_id) return;
@@ -144,84 +226,6 @@ class Order extends _common.Com {
     });
   }
 
-  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'
-            })
-          }
-        }]
-      }
-    });
-  };
-  close = async () => {
-    await _index.default.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 - POPUP_MIN_HEIGHT) / (POPUP_HARD_MAX_HEIGHT - POPUP_MIN_HEIGHT))
-      });
-
-      if (h < POPUP_MIN_HEIGHT + 10) {
-        if (!this.state.hide) {
-          this.setState({
-            hide: true
-          });
-        }
-      }
-    });
-    this.props.onClose();
-  };
-
   onMouseDown(e) {
     this.mousePushed = true;
     this.animation.stop();

package/compiled_src/chatbox/ProductAttachments.js

@@ -29,17 +29,53 @@ class ProductAttachments extends _common.Com {
 
     let $products = _index.default.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.h)("a", {
+      if (url && _index.default.size(product.buttons) == 0) $detailbtns.push((0, _preact.h)("a", {
         class: "product_attachment__btn",
         href: url,
         target: "_blank"
       }, this.props.t('detail'), (0, _preact.h)("img", {
         src: require('../../assets/img/external-link.svg'),
         class: "product_attachment__btn_external_link"
-      }));
+      })));
+      console.log("P", product);
+
+      if (_index.default.size(product.buttons) > 0) {
+        $detailbtns = $detailbtns.concat(_index.default.map(product.buttons, (button, index) => {
+          if (button.type === 'call_button') {
+            return (0, _preact.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.h)("a", {
+              class: "product_attachment__btn",
+              href: button.url,
+              target: "_blank",
+              key: index,
+              title: button.title
+            }, button.title || this.props.t('detail'), ' ', (0, _preact.h)("img", {
+              src: require('../../assets/img/external-link.svg'),
+              class: "product_attachment__btn_external_link"
+            }));
+          }
+
+          if (button.type === 'postback_button') {
+            return (0, _preact.h)("a", {
+              class: "product_attachment__btn",
+              href: "javascript:;",
+              onClick: _ => this.props.onPostback(button)
+            }, button.title);
+          }
+        }));
+      }
+
       let $title = (0, _preact.h)("a", {
         href: url,
         class: "product_attachment__title",
@@ -68,7 +104,7 @@ class ProductAttachments extends _common.Com {
         src: this.props.store.replaceFileUrl(product.image)
       }))), $title, $subtitle, $price, (0, _preact.h)("div", {
         class: "product_attachment__btns"
-      }, $detailbtn));
+      }, $detailbtns));
     });
 
     return $products;

package/compiled_src/chatbox/Rating.js

@@ -15,6 +15,8 @@ var _preact = require("preact");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 const POPUP_MAX_HEIGHT = 400;
 const POPUP_HARD_MAX_HEIGHT = 500;
 const POPUP_MIN_HEIGHT = 0;
@@ -22,18 +24,19 @@ const POPUP_MIN_HEIGHT = 0;
 class Rating extends _common.Com {
   constructor(props) {
     super(props);
+
+    _defineProperty(this, "state", {
+      hide: true,
+      ratingHeight: 0,
+      overlayOpacity: 0.3,
+      comment: ''
+    });
+
     this.refComment = (0, _preact.createRef)();
     this.refRating = (0, _preact.createRef)();
     this.refHandle = (0, _preact.createRef)();
   }
 
-  state = {
-    hide: true,
-    ratingHeight: 0,
-    overlayOpacity: 0.3,
-    comment: ''
-  };
-
   componentDidMount() {
     this.props.store.onUpdate(this, () => {
       if (this.shoudDisplay()) this.open();

package/compiled_src/chatbox/Typing.js

@@ -41,6 +41,8 @@ class Typing extends _common.Com {
         return;
       }
 
+      let ag = this.props.store.matchAgent(ev.by.id);
+      if (ag.type == 'agent') return;
       if (_index.default.get(ev, 'type') !== 'conversation_typing') return;
       this.setState({
         ev: ev,
@@ -53,7 +55,7 @@ class Typing extends _common.Com {
         this.setState({
           isShow: false
         });
-      }, 10000);
+      }, 5000);
     });
   }