@subiz/widget-v4 4.0.61 → 4.0.66

package/compiled_src/chatbox/DropdownSelect.js

@@ -0,0 +1,248 @@
+"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 }; }
+
+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);
+
+    _defineProperty(this, "state", {
+      show: false,
+      searchValue: ''
+    });
+
+    _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: ''
+      });
+    });
+
+    _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, '');
+
+          let searchValue = _index.default.unicodeToAscii(this.state.searchValue).toLowerCase().replace(/ /g, '');
+
+          return optionName.indexOf(searchValue) != -1 || optionDesc.indexOf(searchValue) != -1;
+        });
+      }
+
+      return items;
+    });
+
+    _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();
+    });
+
+    _defineProperty(this, "onBackgroundScroll", e => {
+      console.log('EEEEEEE', e);
+      alert('y');
+    });
+
+    document.addEventListener('touchmove', function (e) {});
+  }
+
+  componentDidMount() {
+    window.addEventListener('keydown', this.onKeydown);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('keydown', this.onKeydown);
+  }
+
+  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"));
+  }
+
+  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 = 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));
+  }
+
+  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
@@ -199,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, {
@@ -254,7 +256,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/Order.js

@@ -0,0 +1,285 @@
+"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 }; }
+
+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;
+
+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)();
+  }
+
+  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
+    }))));
+  }
+
+  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))
+      });
+    });
+  }
+
+  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/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/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);
       }
 

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);
     });
   }