@subiz/widget-v4 4.0.61 → 4.0.66

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

@@ -184,11 +184,13 @@ class Main extends _common.Com {
 exports.default = Main;
 
 function restoreViewport() {
+  if (document.body && document.body.classList) document.body.classList.remove('sbz_no_scroll');
   let metatag = document.getElementById('subiz-meta-viewport');
   if (metatag) metatag.remove();
 }
 
 function modifyViewport() {
+  if (document.body && document.body.classList) document.body.classList.add('sbz_no_scroll');
   let metatag = document.createElement('meta');
   metatag.httpEquiv = 'X-UA-Compatible';
   metatag.name = 'viewport';

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,8 +12,6 @@ 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; }
@@ -44,7 +42,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/order/address_picker.js

@@ -0,0 +1,249 @@
+"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 }; }
+
+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 AddressPicker extends _common.Com {
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "state", {
+      show: false,
+      searchValue: '',
+      addresses: []
+    });
+
+    _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();
+      }
+
+      if (e.key == 'Enter') {}
+    });
+
+    _defineProperty(this, "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));
+
+    _defineProperty(this, "onChangeSearchValue", e => {
+      this.setState({
+        searchValue: e.target.value
+      });
+      this.props.onChangeAddress(e.target.value);
+      this.doSearch();
+    });
+
+    _defineProperty(this, "toogleDropdown", async () => {
+      await this.setState({
+        show: true,
+        searchValue: this.props.initAddress || ''
+      });
+      this.focusFilter();
+    });
+
+    _defineProperty(this, "onSelect", item => {
+      this.props.onSelect(item);
+      this.hideDropdown();
+    });
+
+    _defineProperty(this, "onBackgroundScroll", e => {
+      console.log('EEEEEEE', e);
+    });
+
+    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 = _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));
+  }
+
+  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;

package/compiled_src/order/index.js

@@ -0,0 +1,113 @@
+"use strict";
+
+var _store = _interopRequireDefault(require("../store/store.js"));
+
+var common = _interopRequireWildcard(require("../common.js"));
+
+var _index = _interopRequireDefault(require("../util/index.js"));
+
+var _preact = require("preact");
+
+var _order = _interopRequireDefault(require("./order.js"));
+
+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 config = require('../../config.js');
+
+function findChatbox(store) {
+  var pluginM = store.matchPlugin();
+
+  let chatboxs = _index.default.filter(pluginM, plugin => plugin.type === 'chatbox');
+
+  if (_index.default.size(chatboxs) === 0) {
+    console.error('no chatbox found.');
+    return;
+  }
+
+  return chatboxs[0];
+}
+
+function getUrlParameter(name) {
+  name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
+  var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
+  var results = regex.exec(location.search);
+  return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
+}
+
+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]);
+
+async function load() {
+  let store = new _store.default(config.ApiURL, config.FileURL, config.RealtimeURL, true);
+  let signkey = getUrlParameter('x-signed-key');
+  let {
+    body,
+    error
+  } = await store.lookupOrder(signkey);
+  let order = body;
+
+  let accid = _index.default.get(order, 'ctx.credential.account_id');
+
+  let user_id = _index.default.get(order, 'ctx.credential.issuer');
+
+  let mask = accid + '@' + user_id;
+  await store.init(accid, mask);
+  window.store = store;
+
+  let t = key => {
+    if (_locale === 'debug') return `{{${key}}}`;
+
+    let messages = _index.default.get(common.langMessages, _locale, []);
+
+    let message = _index.default.find(messages, message => message.key === key);
+
+    return _index.default.get(message, 'message', key);
+  };
+
+  let acc = store.matchAccount();
+  let plugin = findChatbox(store);
+  let css = (await promiseMainCSS).default.default.toString();
+
+  var outcss = _index.default.replaceCssVariable(css, plugin.chatbox);
+
+  let $cssStyleDiv = document.createElement('style');
+  document.head.appendChild($cssStyleDiv);
+  $cssStyleDiv.type = 'text/css';
+  $cssStyleDiv.id = 'subiz-style-for-order';
+
+  _index.default.setCss('order', $cssStyleDiv, outcss);
+
+  let _locale = plugin.locale || acc.locale || 'vi-VN';
+
+  t.i18n = i18nText => {
+    if (!i18nText) return '';
+    let fallbackLocale = plugin.locale || acc.locale || 'vi-VN';
+    fallbackLocale = fallbackLocale.replace('-', '_');
+
+    let locale = _locale.replace('-', '_');
+
+    return i18nText[locale] || i18nText[fallbackLocale];
+  };
+
+  t.locale = () => _locale;
+
+  common.downloadLanguage(store, _locale).then(() => {
+    (0, _preact.render)((0, _preact.h)(_order.default, {
+      store: store,
+      t: t,
+      order_id: order.id
+    }), document.getElementById('order'));
+  });
+}
+
+load();