@subiz/widget-v4 4.0.61 → 4.0.63

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"));
@@ -50,7 +52,9 @@ class Widget extends _common.Com {
     this.setState({
       creating: false,
       clickedJoin: false,
-      formData: {}
+      formData: {},
+      showOrder: false,
+      order_id: ''
     });
     this.props.store.onUpdate(this, _ => this.forceUpdate());
   }
@@ -66,6 +70,7 @@ class Widget extends _common.Com {
     }
 
     if (prevProp.cid !== this.props.cid) {
+      this.closeOrder();
       this.setState({
         clickedJoin: false
       });
@@ -84,7 +89,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 +641,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,9 +661,41 @@ 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);
   }
 
+  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;
+    }
+  };
+  closeOrder = e => {
+    this.setState({
+      showOrder: false,
+      order_id: ''
+    });
+    this.focusInput();
+  };
+
   async onStartConvoClick() {
     var convo = this.props.store.matchConvo(this.props.cid) || {};
     if (convo.state === 'ended') return this.props.onGo({
@@ -952,5 +989,5 @@ class FormMounter extends _common.Com {
 }
 
 function encode(key) {
-  return btoa(key).split('=').join('');
+  return encodeURIComponent(key);
 }

package/compiled_src/chatbox/spinner.js

@@ -23,7 +23,7 @@ class Spinner extends _common.Com {
     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.h)(LoaderIcon, {
         size: size + '',
         style: `stroke:${mainColor}`

package/compiled_src/chatbox/time.js

@@ -60,7 +60,9 @@ class Time extends _common.Com {
   }
 
   render() {
-    return (0, _preact.h)("span", null, this.state.t);
+    return (0, _preact.h)("span", {
+      style: this.props.style
+    }, this.state.t);
   }
 
 }

package/compiled_src/common.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Com = exports.Clickaway = void 0;
+exports.downloadLanguage = downloadLanguage;
+exports.langMessages = exports.getLocale = void 0;
 
 var _preact = require("preact");
 
@@ -64,4 +66,41 @@ class Clickaway extends Com {
 
 }
 
-exports.Clickaway = Clickaway;
+exports.Clickaway = Clickaway;
+
+const getLocale = (plugin, loc) => {
+  if (!loc) loc = '';
+
+  let found = _index.default.find(plugin.locales, l => l.toLowerCase().trim() === loc.toLowerCase().trim());
+
+  if (found) return found;
+  found = _index.default.find(plugin.locales, l => {
+    l = l.replace('-', '_').split('_')[0].trim().toLowerCase();
+    let compareloc = loc.replace('-', '_').split('_')[0].trim().toLowerCase();
+    return l == compareloc;
+  });
+  if (found) return found;
+  return plugin.locale || 'en-US';
+};
+
+exports.getLocale = getLocale;
+let langMessages = {};
+exports.langMessages = langMessages;
+let downloadLock = false;
+
+function downloadLanguage(store, locale, force) {
+  if (downloadLock) return new Promise(resolve => setTimeout(() => downloadLanguage(store, locale, force).then(resolve), 100));
+  downloadLock = true;
+  let messages;
+
+  if (locale === 'debug' || langMessages[locale] && !force) {
+    downloadLock = false;
+    return Promise.resolve();
+  }
+
+  return store.getLocaleContent(locale).then(res => {
+    downloadLock = false;
+    messages = _index.default.get(res, 'body.messages', []);
+    langMessages[locale] = messages;
+  });
+}

package/compiled_src/contact/contact.js

@@ -12,12 +12,8 @@ var _preact = require("preact");
 
 var _common = require("../common.js");
 
-var _jsApiLoader = require("@googlemaps/js-api-loader");
-
 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; }
@@ -25,15 +21,14 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 let CSS = (() => Promise.resolve().then(() => _interopRequireWildcard(require('./css.js'))))();
 
 class Contact extends _common.Com {
+  state = {
+    map: false,
+    map_loading: false,
+    map_initialized: false
+  };
+
   constructor(props) {
     super(props);
-
-    _defineProperty(this, "state", {
-      map: false,
-      map_loading: false,
-      map_initialized: false
-    });
-
     this.showMap = this.showMap.bind(this);
     this.hideMap = this.hideMap.bind(this);
   }
@@ -44,7 +39,7 @@ class Contact extends _common.Com {
       map_initialized: true,
       map_loading: true
     });
-    await new _jsApiLoader.Loader({
+    await new Loader({
       apiKey: 'YOUR_API_KEY',
       version: 'weekly'
     }).load();

package/compiled_src/lib.js

@@ -13,8 +13,6 @@ var _plugin = _interopRequireDefault(require("./plugin.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; }
-
 var $link = document.createElement('link');
 $link.href = 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap';
 $link.rel = 'stylesheet';
@@ -24,18 +22,6 @@ _index.default.preloadWebfonts(['Roboto'], [400, 500]);
 
 class Widget {
   constructor(ApiURL, FileURL, RealtimeURL, inmem, fake, agenttoken) {
-    _defineProperty(this, "version", () => '4.4');
-
-    _defineProperty(this, "setSetting", setting => this.store.setSetting({
-      account_setting: setting
-    }));
-
-    _defineProperty(this, "getSetting", _ => ({
-      account_setting: _index.default.cloneDeep(this.store.matchAccountSetting())
-    }));
-
-    _defineProperty(this, "getUser", () => _index.default.parseJSON(_index.default.stringify(this.store.matchUser())));
-
     this.domGate = new _index.default.Gate();
     this.store = new _store.default(ApiURL, FileURL, RealtimeURL, inmem, fake, agenttoken);
     window.sbz_store = this.store;
@@ -140,6 +126,15 @@ class Widget {
     this.pluginMgr.hideCurrentChatbox();
   }
 
+  version = () => '4.4';
+  setSetting = setting => this.store.setSetting({
+    account_setting: setting
+  });
+  getSetting = _ => ({
+    account_setting: _index.default.cloneDeep(this.store.matchAccountSetting())
+  });
+  getUser = () => _index.default.parseJSON(_index.default.stringify(this.store.matchUser()));
+
   async setLocale(locale) {
     await this.domGate.entry();
     return this.pluginMgr.setCurrentChatboxLocale(locale);

package/compiled_src/notif/notif.js

@@ -13,8 +13,6 @@ 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; }
@@ -22,21 +20,20 @@ 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/order/address_picker.js

@@ -0,0 +1,241 @@
+"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("../chatbox/spinner.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+class AddressPicker extends _common.Com {
+  state = {
+    show: false,
+    searchValue: '',
+    addresses: []
+  };
+  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();
+    }
+
+    if (e.key == 'Enter') {}
+  };
+  doSearch = _index.default.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({
+      addresses: _index.default.get(res, 'body.addresses', [])
+    });
+  }, 100);
+
+  componentDidMount() {
+    window.addEventListener('keydown', this.onKeydown);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('keydown', this.onKeydown);
+  }
+
+  onChangeSearchValue = e => {
+    this.setState({
+      searchValue: e.target.value
+    });
+    this.props.onChangeAddress(e.target.value);
+    this.doSearch();
+  };
+
+  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.props.initAddress || ''
+    });
+    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 = _index.default.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.h)("div", {
+        class: "dropdown_select__item",
+        onClick: _ => this.onSelect(addr),
+        key: i
+      }, (0, _preact.h)("div", null, (0, _preact.h)("b", null, label)), (0, _preact.h)("div", {
+        style: "opacity: 0.7 !important;"
+      }, desc));
+    });
+
+    let $filter = null;
+    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);
+  };
+
+  render() {
+    let $name = (0, _preact.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.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), this.renderDropdown()));
+  }
+
+}
+
+exports.default = AddressPicker;
+
+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;
+}

package/compiled_src/order/icon.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _index = _interopRequireDefault(require("../util/index.js"));
+
+var _time = _interopRequireDefault(require("../chatbox/time.js"));
+
+var common = _interopRequireWildcard(require("../common.js"));
+
+var _DropdownSelect = _interopRequireDefault(require("../chatbox/DropdownSelect.js"));
+
+var _preact = require("preact");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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; }
+
+let promiseMainCSS = (() => Promise.resolve().then(() => _interopRequireWildcard(require('../chatbox/css.js'))))();
+
+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);
+
+_index.default.preloadWebfonts(['Roboto'], [400, 500]);
+
+let defaultAvatar = require('../../assets/img/default_avatar.png');
+
+class Icon extends common.Com {
+  render() {
+    if (this.props.name == 'package') {
+      if (this.props.active) return (0, _preact.h)("img", {
+        style: "width: 18px !important;",
+        src: require('../../assets/img/package.svg')
+      });
+      return (0, _preact.h)("img", {
+        style: "width: 18px !important;",
+        src: require('../../assets/img/package_fade.svg')
+      });
+    }
+
+    if (this.props.name === 'shop') {
+      if (this.props.active) return (0, _preact.h)("img", {
+        style: "width: 18px !important;",
+        src: require('../../assets/img/shop.svg')
+      });
+      return (0, _preact.h)("img", {
+        style: "width: 18px !important;",
+        src: require('../../assets/img/shop_faded.svg')
+      });
+    }
+  }
+
+}
+
+exports.default = Icon;