@subiz/widget-v4 4.0.59 → 4.0.64

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
@@ -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/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/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/Widget.js

@@ -23,6 +23,8 @@ var _Typing = _interopRequireDefault(require("./Typing.js"));
 
 var _Rating = _interopRequireDefault(require("./Rating.js"));
 
+var _Order = _interopRequireDefault(require("./Order.js"));
+
 var _ListField = _interopRequireDefault(require("./ListField.js"));
 
 var _spinner = _interopRequireDefault(require("./spinner.js"));
@@ -35,6 +37,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; }
+
 var send = require('../../assets/img/send.svg');
 
 var checkedimg = require('../../assets/img/done_gray.svg');
@@ -46,11 +50,38 @@ const defaultAvatar = 'https://file-subiz.com/fiqoahedjbgwclpouoml-avatar_defaul
 class Widget extends _common.Com {
   constructor(props) {
     super(props);
+
+    _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;
+      }
+    });
+
+    _defineProperty(this, "closeOrder", e => {
+      this.setState({
+        showOrder: false,
+        order_id: ''
+      });
+      this.focusInput();
+    });
+
     this.userSent = {};
     this.setState({
       creating: false,
       clickedJoin: false,
-      formData: {}
+      formData: {},
+      showOrder: false,
+      order_id: ''
     });
     this.props.store.onUpdate(this, _ => this.forceUpdate());
   }
@@ -66,6 +97,7 @@ class Widget extends _common.Com {
     }
 
     if (prevProp.cid !== this.props.cid) {
+      this.closeOrder();
       this.setState({
         clickedJoin: false
       });
@@ -84,7 +116,6 @@ class Widget extends _common.Com {
   }
 
   render() {
-    let formRequired = this.isFormRequired();
     let showform = this.shouldShowForm();
     let form;
     let accountSetting = this.props.plugin.chatbox || {};
@@ -637,6 +668,7 @@ class Widget extends _common.Com {
       onClick: e => this.onContainerClick(e)
     }, (0, _preact.h)(_Events.default, {
       isShow: this.props.isShow,
+      onLink: this.onLink,
       store: this.props.store,
       onFormSubmit: e => this.onEventFormSubmit(e),
       ref: ref => this.events = ref,
@@ -656,6 +688,15 @@ class Widget extends _common.Com {
       onRate: e => this.onRate(e),
       cid: this.props.cid,
       t: this.props.t
+    }), (0, _preact.h)(_Order.default, {
+      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);
   }
 
@@ -952,5 +993,5 @@ class FormMounter extends _common.Com {
 }
 
 function encode(key) {
-  return btoa(key).split('=').join('');
+  return encodeURIComponent(key);
 }

package/compiled_src/chatbox/main.js

@@ -77,7 +77,8 @@ class Main extends _common.Com {
         view: this.props.store.matchLastview().view
       }));
     } else {
-      this.hideWidget();
+      restoreViewport();
+      if (!this.state.isShowWidget) this.hideWidget();
     }
   }