@subiz/widget-v4 4.0.58 → 4.0.63

package/compiled_src/chatbox/DropdownSelect.js

@@ -0,0 +1,239 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _index = _interopRequireDefault(require("../util/index.js"));
+
+var _common = require("../common.js");
+
+var _preact = require("preact");
+
+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)();
+
+  constructor(props) {
+    super(props);
+    document.addEventListener('touchmove', function (e) {});
+  }
+
+  onTouchMove = e => {
+    if (e.target === this.overlayRef.current) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+  hideDropdown = () => {
+    this.setState({
+      show: false,
+      searchValue: ''
+    });
+  };
+  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();
+    }
+  };
+  hasSearch = () => {
+    if (this.props.has_search) return true;
+    return _index.default.size(this.props.items) >= 10;
+  };
+  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, '');
+
+        let searchValue = _index.default.unicodeToAscii(this.state.searchValue).toLowerCase().replace(/ /g, '');
+
+        return optionName.indexOf(searchValue) != -1 || optionDesc.indexOf(searchValue) != -1;
+      });
+    }
+
+    return items;
+  };
+
+  componentDidMount() {
+    window.addEventListener('keydown', this.onKeydown);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('keydown', this.onKeydown);
+  }
+
+  onChangeSearchValue = e => {
+    this.setState({
+      searchValue: e.target.value
+    });
+  };
+
+  renderEmpty() {
+    return (0, _preact.h)("div", {
+      class: "dropdown_select_filter__empty"
+    }, (0, _preact.h)("img", {
+      class: "dropdown_select_filter__empty_img",
+      src: require('../../assets/img/not_found_search.png')
+    }), (0, _preact.h)("div", {
+      class: "muted",
+      style: "text-align: center !important;"
+    }, "Kh\xF4ng c\xF3 k\u1EBFt qu\u1EA3"));
+  }
+
+  renderLoading() {
+    return (0, _preact.h)("div", {
+      class: "dropdown_select_filter__empty pt-3"
+    }, (0, _preact.h)(_spinner.default, {
+      size: "40",
+      static: true
+    }), (0, _preact.h)("div", {
+      class: "muted mt-2",
+      style: "text-align: center !important;"
+    }, "\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();
+    setTimeout(() => {
+      if (!this.filterRef.current) return;
+      this.filterRef.current.focus();
+    }, 100);
+  }
+
+  onSelect = item => {
+    this.props.onSelect(item);
+    this.hideDropdown();
+  };
+
+  renderDropdown() {
+    if (!this.state.show) return null;
+    let items = this.getFilteredOptions();
+
+    let $items = _index.default.map(items, item => {
+      return (0, _preact.h)("div", {
+        class: "dropdown_select__item",
+        onClick: _ => this.onSelect(item)
+      }, item.name);
+    });
+
+    let $filter = null;
+
+    if (this.hasSearch()) {
+      let $img = (0, _preact.h)("img", {
+        class: "dropdown_select_filter__icon",
+        src: require('../../assets/img/search.svg')
+      });
+
+      if (this.props.loading) {
+        $img = (0, _preact.h)("img", {
+          class: "dropdown_select_filter__icon",
+          src: require('../../assets/img/loader.svg')
+        });
+      }
+
+      $filter = (0, _preact.h)("div", {
+        class: "dropdown_select_filter"
+      }, $img, (0, _preact.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.h)("div", {
+        class: "dropdown_select__overlay",
+        ref: this.overlayRef,
+        onClick: this.hideDropdown,
+        onTouchMove: this.onTouchMove
+      }, (0, _preact.h)("div", {
+        class: "dropdown_select",
+        style: style,
+        onClick: e => {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      }, $filter, (0, _preact.h)("div", {
+        class: "dropdown_select__items"
+      }, $items)));
+    }
+
+    return (0, _preact.h)("div", {
+      class: "dropdown_select",
+      style: style
+    }, $filter, (0, _preact.h)("div", {
+      class: "dropdown_select__items"
+    }, $items));
+  }
+
+  onBackgroundScroll = e => {
+    console.log('EEEEEEE', e);
+    alert('y');
+  };
+
+  render() {
+    let $name = (0, _preact.h)("div", {
+      class: "muted text-truncate",
+      style: "flex: 1 !important;"
+    }, "Ch\u1ECDn m\u1ED9t ph\u1EA7n t\u1EED");
+    if (_index.default.get(this.props, 'selected.name')) $name = (0, _preact.h)("div", {
+      class: "text-truncate",
+      style: "flex: 1 !important;"
+    }, _index.default.get(this.props, 'selected.name'));
+    let style = 'position: relative !important;';
+
+    if (this.props.full) {
+      style = '';
+    }
+
+    return (0, _preact.h)("div", {
+      style: style
+    }, (0, _preact.h)(_common.Clickaway, {
+      onClickaway: this.hideDropdown
+    }, (0, _preact.h)("div", {
+      type: "text",
+      class: 'dropdown_select_input ' + this.props.extra_cls,
+      onClick: this.toogleDropdown
+    }, $name, "\xA0", (0, _preact.h)("img", {
+      class: "dropdown_select__caret",
+      src: require('../../assets/img/caret.svg')
+    })), this.renderDropdown()));
+  }
+
+}
+
+exports.default = DropdownSelect;

package/compiled_src/chatbox/Event.js

@@ -167,7 +167,8 @@ class Event extends _common.Com {
         title: t
       }, $time, $sender, (0, _preact.h)(_TextMessage.default, {
         store: this.props.store,
-        ev: ev
+        ev: ev,
+        onLink: this.props.onLink
       }), (0, _preact.h)(_ImageAttachments.default, {
         store: this.props.store,
         ev: ev
@@ -254,7 +255,8 @@ class Event extends _common.Com {
     }, $dot, (0, _preact.h)(_TextMessage.default, {
       store: this.props.store,
       ev: ev,
-      refresh: this.state.refresh
+      refresh: this.state.refresh,
+      onLink: this.props.onLink
     }), (0, _preact.h)(_ImageAttachments.default, {
       store: this.props.store,
       ev: ev

package/compiled_src/chatbox/Events.js

@@ -68,6 +68,7 @@ class Events extends _common.Com {
     processEvents(convo, events);
 
     let $events = _index.default.map(events, ev => (0, _preact.h)(_Event.default, {
+      onLink: this.props.onLink,
       store: this.props.store,
       onFormSubmit: this.props.onFormSubmit,
       onSend: this.props.onSend,

package/compiled_src/chatbox/MessageInput.js

@@ -15,16 +15,9 @@ 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());
@@ -269,6 +262,10 @@ 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

@@ -0,0 +1,281 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _index = _interopRequireDefault(require("../util/index.js"));
+
+var _releaseAnimation = _interopRequireDefault(require("./releaseAnimation.js"));
+
+var _time = _interopRequireDefault(require("./time.js"));
+
+var _common = require("../common.js");
+
+var _preact = require("preact");
+
+var _order = _interopRequireDefault(require("../order/order.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const POPUP_MAX_HEIGHT = 400;
+const POPUP_HARD_MAX_HEIGHT = 500;
+const POPUP_MIN_HEIGHT = 0;
+
+let defaultAvatar = require('../../assets/img/default_avatar.png');
+
+class Order extends _common.Com {
+  constructor(props) {
+    super(props);
+    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);
+
+    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.default({
+      maxY: POPUP_MAX_HEIGHT,
+      minY: 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.h)("div", {
+      class: cls
+    }, (0, _preact.h)("div", {
+      class: "extension--overlay",
+      style: `opacity: ${this.state.overlayOpacity * 0.5} !important;`
+    }), (0, _preact.h)("div", {
+      class: "extension",
+      ref: this.refRating,
+      style: `height: ${this.state.ratingHeight}px !important;`
+    }, (0, _preact.h)("div", {
+      class: "extension--close-btn",
+      onClick: this.close
+    }, this.props.t('close')), (0, _preact.h)("div", {
+      class: "extension--handle",
+      ref: this.refHandle
+    }, (0, _preact.h)("div", {
+      class: "extension--thumb"
+    })), (0, _preact.h)("div", {
+      style: "overflow-x: hidden !important; overflow-y: scroll !important; height: 100% !important;"
+    }, (0, _preact.h)(_order.default, {
+      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
+    }))));
+  }
+
+  onResponse = response => {
+    this.setState({
+      response
+    });
+  };
+
+  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 - POPUP_MIN_HEIGHT) / (POPUP_HARD_MAX_HEIGHT - POPUP_MIN_HEIGHT))
+      });
+    });
+  }
+
+  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();
+    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 - 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.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 > POPUP_MAX_HEIGHT) {
+      var beta = K / (POPUP_HARD_MAX_HEIGHT - POPUP_MAX_HEIGHT) - POPUP_MAX_HEIGHT;
+      height = POPUP_HARD_MAX_HEIGHT - K / (height + beta);
+    }
+
+    this.setState({
+      ratingHeight: height,
+      overlayOpacity: Math.min(1, (height - POPUP_MIN_HEIGHT) / (POPUP_HARD_MAX_HEIGHT - POPUP_MIN_HEIGHT))
+    });
+  }
+
+}
+
+exports.default = Order;

package/compiled_src/chatbox/OrderAttachments.js

@@ -48,7 +48,8 @@ class ProductAttachments extends _common.Com {
             class: "order_attachment__product"
           }, (0, _preact.h)("img", {
             class: "order_attachment__product_img",
-            src: (_index.default.get(product, 'images.0'), require('../../assets/img/default.jpg'))
+            alt: '' + _index.default.get(product, 'id'),
+            src: _index.default.get(product, 'images.0', require('../../assets/img/default.jpg'))
           }), (0, _preact.h)("div", {
             style: "overflow: hidden !important;"
           }, (0, _preact.h)("div", {

package/compiled_src/chatbox/Rating.js

@@ -15,8 +15,6 @@ 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;
@@ -24,19 +22,18 @@ 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/TextMessage.js

@@ -60,9 +60,16 @@ class TextMessage extends _common.Com {
       });
 
       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.h)("a", {
-          href: tag.text,
-          target: "_blank"
+          href: url,
+          target: "_blank",
+          onClick: e => this.props.onLink(e, url)
         }, tag.text);
       }