@subiz/widget-v4 4.0.50 → 4.0.55

package/dist/17d7ef84382.605.js

@@ -0,0 +1,391 @@
+"use strict";
+(self["webpackChunk_subiz_widget_v4"] = self["webpackChunk_subiz_widget_v4"] || []).push([[605],{
+
+/***/ 2493:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "M": () => (/* binding */ Com),
+/* harmony export */   "u": () => (/* binding */ Clickaway)
+/* harmony export */ });
+/* harmony import */ var preact__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6400);
+/* harmony import */ var _util_index_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(819);
+
+
+class Com extends preact__WEBPACK_IMPORTED_MODULE_0__/* .Component */ .wA {
+  constructor(props) {
+    super(props);
+    this._isMounted = true;
+    setTimeout(() => {
+      if (this.componentWillUnmount) {
+        let old = this.componentWillUnmount.bind(this);
+
+        this.componentWillUnmount = () => {
+          old();
+          this._isMounted = false;
+        };
+      }
+    }, 10);
+  }
+
+}
+class Clickaway extends Com {
+  constructor(props) {
+    super(props);
+    this.setWrapperRef = this.setWrapperRef.bind(this);
+    this.onClick = this.onClick.bind(this);
+  }
+
+  componentDidMount() {
+    document.addEventListener('mousedown', this.onClick);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.onClick);
+  }
+
+  setWrapperRef(node) {
+    this.wrapperRef = node;
+  }
+
+  onClick(event) {
+    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
+      this.props.onClickaway && this.props.onClickaway();
+    }
+  }
+
+  render() {
+    return (0,preact__WEBPACK_IMPORTED_MODULE_0__.h)("div", {
+      ref: this.setWrapperRef
+    }, this.props.children);
+  }
+
+}
+
+/***/ }),
+
+/***/ 9605:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* binding */ Notif)
+/* harmony export */ });
+/* harmony import */ var _util_index_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(819);
+/* harmony import */ var preact__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6400);
+/* harmony import */ var _common_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2493);
+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; }
+
+
+
+
+
+let notifCSS = (() => __webpack_require__.e(/* import() */ 362).then(__webpack_require__.bind(__webpack_require__, 362)))();
+
+class Notif extends _common_js__WEBPACK_IMPORTED_MODULE_2__/* .Com */ .M {
+  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
+      } = await this.props.store.sendImpression(this.props.plugin.id);
+      this.impressionToken = _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].get */ .Z.get(impression, 'impression_token') || '';
+      let image = _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].get */ .Z.get(this.props, 'plugin.notification.background_url');
+      _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].preloadImg */ .Z.preloadImg(image, () => this.setState({
+        imageReady: true
+      }));
+    });
+  }
+
+  setOver(over) {
+    if (!over) this.mouse_leave = _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].Date.now */ .Z.Date.now();else this.mouse_leave = 0;
+  }
+
+  randomTimestampt() {
+    let random = Math.floor(Math.random() * 5);
+    if (random == 0) return this.props.t('just_now');
+    if (random == 1) return '1 ' + this.props.t('minute_ago');
+    if (random == 2) return '2 ' + this.props.t('minutes_ago');
+    if (random == 3) return '3 ' + this.props.t('minutes_ago');
+    return '4 ' + this.props.t('minutes_ago');
+  }
+
+  onClick(e) {
+    e.stopPropagation();
+    if (this.props.plugin._dont_follow) return;
+    this.props.store.sendConversion(this.props.plugin.id, null, this.impressionToken);
+    let url = _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].get */ .Z.get(this.props, 'plugin.notification.url');
+    if (!url) return;
+    if (!url.startsWith('http://') && !url.startsWith('https://')) url = '//' + url;
+    let new_tab = _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].get */ .Z.get(this.props, 'plugin.notification.new_tab', false);
+    if (new_tab) return window.open(url);
+    window.location.href = url;
+  }
+
+  onCloseButtonClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.setClose(true);
+  }
+
+  renderCloseButton() {
+    return (0,preact__WEBPACK_IMPORTED_MODULE_1__.h)("div", {
+      class: "btn_close",
+      onClick: e => this.onCloseButtonClick(e)
+    }, (0,preact__WEBPACK_IMPORTED_MODULE_1__.h)("svg", {
+      class: "btn_close__icon",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, (0,preact__WEBPACK_IMPORTED_MODULE_1__.h)("line", {
+      x1: "18",
+      y1: "6",
+      x2: "6",
+      y2: "18",
+      style: "stroke-width: 3 !important;"
+    }), (0,preact__WEBPACK_IMPORTED_MODULE_1__.h)("line", {
+      x1: "6",
+      y1: "6",
+      x2: "18",
+      y2: "18",
+      style: "stroke-width: 3 !important;"
+    })));
+  }
+
+  async waitForT() {
+    if (this.props.t) return;
+    await _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].sleep */ .Z.sleep(100);
+    return this.waitForT();
+  }
+
+  async setClose(close) {
+    await this.waitForT();
+    if (!this.props.t) return;
+
+    if (!close) {
+      clearTimeout(this.lastCloseTimeout);
+      this.setState({
+        closeAnimation: false
+      });
+      let timestamp = this.randomTimestampt();
+      let profiles = _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].get */ .Z.get(this.props, 'plugin.notification.profiles', []);
+      let user = profiles[Math.floor(Math.random() * _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].size */ .Z.size(profiles))];
+
+      if (user.avatar_url && user.avatar_url.startsWith('http')) {
+        await _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].preloadImg */ .Z.preloadImg(user.avatar_url);
+      }
+
+      _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].map */ .Z.map(_util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].get */ .Z.get(this.props.plugin, 'notification.custom_avatar_urls'), url => {
+        profiles.push({
+          type: 'person',
+          fullname: randomName(),
+          avatar_url: url,
+          email: randomEmail(),
+          address: randomAddress(),
+          phone: ramdomPhone(),
+          age: randomAge()
+        });
+      });
+      let i18n_messages = _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].get */ .Z.get(this.props, 'plugin.notification.i18n_message_quill_deltas', []);
+      let i18n_message = i18n_messages[Math.floor(Math.random() * _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].size */ .Z.size(i18n_messages))];
+      let fallbackmsgs = _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].get */ .Z.get(this.props, 'plugin.notification.message_quill_deltas', []);
+      let fallbackmessage = fallbackmsgs[Math.floor(Math.random() * _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].size */ .Z.size(fallbackmsgs))];
+      let i18n_title = _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].get */ .Z.get(this.props, 'plugin.notification.i18n_title_quill_delta');
+      return this.setState({
+        close: false,
+        last_show: _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].Date.now */ .Z.Date.now(),
+        timestamp: timestamp,
+        user: user,
+        title: this.props.t.i18n(i18n_title) || _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].get */ .Z.get(this.props, 'plugin.notification.title_quill_delta'),
+        message: this.props.t.i18n(i18n_message) || fallbackmessage
+      });
+    }
+
+    this.setState({
+      closeAnimation: true
+    });
+    this.mouse_leave = _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].Date.now */ .Z.Date.now();
+    this.lastCloseTimeout = setTimeout(() => this.setState({
+      close: true,
+      closeAnimation: false
+    }), 150);
+    if (this.props.plugin._dont_close) setTimeout(() => this.setState({
+      closeAnimation: false,
+      close: false
+    }), 1000);
+  }
+
+  async refreshCSS() {
+    let plugins = this.props.store.matchPlugin();
+    let found = _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].find */ .Z.find(plugins, plugin => plugin.id === this.props.plugin.id);
+    if (!found) return;
+    let css = (await notifCSS).default.default.toString();
+    _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].setCss */ .Z.setCss(this.props.plugin.id, this.$cssStyleDiv, css);
+    this.setClose(this.state.close);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+    _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].setCss */ .Z.setCss(this.props.plugin.id, this.$cssStyleDiv, '');
+  }
+
+  async componentDidMount() {
+    this.setState({
+      last_show: _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].Date.now */ .Z.Date.now()
+    });
+    this.$cssStyleDiv = document.getElementById('subiz-style-for-' + this.props.plugin.id);
+
+    if (!this.$cssStyleDiv) {
+      this.$cssStyleDiv = document.createElement('style');
+      document.head.appendChild(this.$cssStyleDiv);
+      this.$cssStyleDiv.type = 'text/css';
+      this.$cssStyleDiv.id = 'subiz-style-for-' + this.props.plugin.id;
+    }
+
+    this.props.store.onResetCSS(this, () => this.refreshCSS());
+    await this.refreshCSS();
+    this.interval = setInterval(() => {
+      if (this.props._destroy) return this.componentWillUnmount();
+      let mouseleave = this.mouse_leave;
+      if (mouseleave === 0) mouseleave = _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].Date.now */ .Z.Date.now();
+      if (_util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].Date.now */ .Z.Date.now() - mouseleave < 1000) return;
+
+      if (!this.state.close && !this.props.plugin._dont_close) {
+        if (_util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].Date.now */ .Z.Date.now() - this.state.last_show > 8000) return this.setClose(true);
+        return;
+      }
+
+      if (_util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].Date.now */ .Z.Date.now() - this.state.last_show > this.props.plugin.notification.interval_sec) {
+        return this.setClose(false);
+      }
+    }, 1000);
+    setTimeout(() => {
+      this.setState({
+        cssready: true
+      });
+      this.setClose(false);
+    }, 50);
+  }
+
+  renderTextFromQuillDelta(quilldelta, profile) {
+    let qd = _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].parseJSON */ .Z.parseJSON(quilldelta);
+    if (!qd || !qd.ops) return null;
+    return _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].map */ .Z.map(qd.ops, op => {
+      let out = null;
+      if (!op.insert) return null;
+      if (typeof op.insert == 'string') out = op.insert;
+
+      if (_util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].get */ .Z.get(op, 'insert.dynamicField')) {
+        let key = _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].get */ .Z.get(op, 'insert.dynamicField.key');
+        if (key === 'user.fullname') out = profile.fullname;
+        if (key === 'user.email') out = profile.email;
+        if (key === 'user.address') out = profile.address;
+        if (key === 'user.phone') out = profile.phone;
+      }
+
+      if (_util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].get */ .Z.get(op, 'attributes.bold')) out = (0,preact__WEBPACK_IMPORTED_MODULE_1__.h)("b", null, out);
+      if (_util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].get */ .Z.get(op, 'attributes.italic')) out = (0,preact__WEBPACK_IMPORTED_MODULE_1__.h)("b", null, out);
+      return out;
+    });
+  }
+
+  render() {
+    if (!this.props.t) return null;
+    if (!this.state.cssready) return null;
+    if (!this.state.imageReady) return null;
+    if (this.state.close) return null;
+    if (!this.state.message) return null;
+    let notif = _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].get */ .Z.get(this.props.plugin, 'notification', {});
+    if (!notif) return null;
+    let animation = '';
+    let pos = _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].get */ .Z.get(notif, 'position', 'bottom-left');
+    if (this.props.mobile) pos = _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].get */ .Z.get(notif, 'mobile_position', pos);
+    if (pos === 'top-left' || pos === 'top-right') animation = 'fadeInDown';else if (pos === 'top-center') animation = 'fadeInDownCenter';else if (pos === 'bottom-center') animation = 'fadeInUpCenter';else if (pos === 'bottom-right') {
+      animation = 'fadeInUpBig';
+    } else {
+      pos = 'bottom-left';
+      animation = 'fadeInUpBig';
+    }
+    let user = this.state.user || {};
+    let subtextStyle = notif.subtext_style || {};
+    if (subtextStyle.color === undefined) subtextStyle.color = _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].get */ .Z.get(notif, 'message_style.color', 'black');
+    let st = 'position: fixed !important; z-index: 1000000000 !important';
+    if (this.props.plugin._preview) st = 'position: absolute !important;';
+    if (this.state.closeAnimation) animation = 'fadeOut';
+    return (0,preact__WEBPACK_IMPORTED_MODULE_1__.h)("div", {
+      class: animation + ' notif' + ' notif__' + pos,
+      onClick: e => this.onClick(e),
+      onmouseover: e => this.setOver(true),
+      style: st,
+      onmouseleave: e => this.setOver(false)
+    }, (0,preact__WEBPACK_IMPORTED_MODULE_1__.h)("div", {
+      style: "position: relative !important; display: flex !important; align-items: center !important;"
+    }, (0,preact__WEBPACK_IMPORTED_MODULE_1__.h)("img", {
+      alt: "notification background",
+      class: "notif_bg",
+      src: notif.background_url,
+      style: _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].js2css */ .Z.js2css(notif.background_style)
+    }), this.renderCloseButton(), (0,preact__WEBPACK_IMPORTED_MODULE_1__.h)("div", {
+      class: "notif_avatar",
+      style: _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].js2css */ .Z.js2css(notif.avatar_style)
+    }, (0,preact__WEBPACK_IMPORTED_MODULE_1__.h)("img", {
+      alt: "notification avatar",
+      class: "notif_avatar__img",
+      src: user.avatar_url
+    })), (0,preact__WEBPACK_IMPORTED_MODULE_1__.h)("div", {
+      class: "notif_body"
+    }, (0,preact__WEBPACK_IMPORTED_MODULE_1__.h)("div", {
+      class: "notif_title",
+      style: _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].js2css */ .Z.js2css(notif.title_style)
+    }, this.renderTextFromQuillDelta(this.state.title, user)), (0,preact__WEBPACK_IMPORTED_MODULE_1__.h)("div", {
+      class: "notif_message",
+      style: _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].js2css */ .Z.js2css(notif.message_style)
+    }, this.renderTextFromQuillDelta(this.state.message, user)), (0,preact__WEBPACK_IMPORTED_MODULE_1__.h)("div", {
+      class: "notif_time",
+      style: _util_index_js__WEBPACK_IMPORTED_MODULE_0__/* ["default"].js2css */ .Z.js2css(notif.subtext_style)
+    }, this.state.timestamp))));
+  }
+
+}
+
+function randomName() {
+  let db = ['Kiều Thanh', 'Phương Anh', 'Lê Thùy Linh', 'Trang Nguyễn', 'Thanh Hoa', 'Hoài Đức', 'Huơng Giang'];
+  return db[Math.floor(Math.random() * db.length)];
+}
+
+function randomAge() {
+  return 15 + Math.floor(Math.random() * 20);
+}
+
+function ramdomPhone() {
+  return '+84' + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + 'xxxx';
+}
+
+function randomEmail() {
+  return randomName().split(' ').join('.').toLowerCase() + '@gmail.com';
+}
+
+function randomAddress() {
+  let db = ['Dịch Vọng Hậu, Cầu Giấy', 'Quận 1, TP Hồ Chí Minh', 'Ngõ 34 Tôn Thất Thuyết', '87 Phạm Hùng', 'Đống Đa, Hà Nội'];
+  return db[Math.floor(Math.random() * db.length)];
+}
+
+/***/ })
+
+}]);