@subiz/widget-v4 4.0.87 → 4.0.89

package/assets/less/chatbox.less

@@ -97,6 +97,8 @@ body div#sbz92 {
 	}
 
 	img {
+		overflow: hidden;
+		flex-shrink: 0;
 		background-repeat: no-repeat;
 		background-position: center;
 		background-size: 100% 100%;

package/compiled_src/chatbox/Event.js

@@ -128,7 +128,7 @@ class Event extends _common.Com {
 
     var uri = acc.logo_url || require('../../assets/img/image_default.png');
 
-    if (true || _index.default.get(this.props, 'chatbox.hide_agent_profile')) {
+    if (_index.default.get(this.props, 'chatbox.hide_agent_profile')) {
       return (0, _preact.h)("div", {
         class: "message-sender"
       }, (0, _preact.h)("img", {

package/compiled_src/chatbox/Widget.js

@@ -54,6 +54,14 @@ class Widget extends _common.Com {
     _defineProperty(this, "msgInput", (0, _preact.createRef)());
 
     _defineProperty(this, "sendMessage", async message => {
+      let hasPostback = _index.default.find(message.attachments, att => att.type === 'postback');
+
+      if (this.isFormRequired() && hasPostback) {
+        this.onStartConvoClick();
+        this.fillQuickReplyToQuestion(message);
+        return;
+      }
+
       let text = message.text;
 
       if (!this.props.cid) {
@@ -115,7 +123,8 @@ class Widget extends _common.Com {
       clickedJoin: false,
       formData: {},
       showOrder: false,
-      order_id: ''
+      order_id: '',
+      quickReplyMessage: ''
     });
     this.props.store.onUpdate(this, _ => this.forceUpdate());
   }
@@ -133,7 +142,8 @@ class Widget extends _common.Com {
     if (prevProp.cid !== this.props.cid) {
       this.closeOrder();
       this.setState({
-        clickedJoin: false
+        clickedJoin: false,
+        quickReplyMessage: ''
       });
       setTimeout(() => {
         this.events && this.events.focus();
@@ -145,6 +155,15 @@ class Widget extends _common.Com {
   }
 
   shouldShowForm() {
+    let form;
+    let accountSetting = this.props.plugin.chatbox || {};
+    let acc = this.props.store.matchAccount() || {};
+    if (_index.default.get(accountSetting, 'prechat_form.enabled')) form = accountSetting.prechat_form;
+
+    let offlineEnabled = _index.default.get(accountSetting, 'offline_form.enabled');
+
+    if (this.isOffline(acc, accountSetting) && offlineEnabled) form = accountSetting.offline_form;
+    if (!this.hasSentMessage(this.props.cid) && form && (_index.default.size(form.groups) || form.group_required)) return true;
     let formRequired = this.isFormRequired();
     return formRequired && !this.props.cid || formRequired && this.props.cid && this.state.clickedJoin;
   }
@@ -263,6 +282,9 @@ class Widget extends _common.Com {
           }]
         }
       });
+      this.setState({
+        quickReplyMessage: ''
+      });
       if (form.end_conversation_after_submit) await this.props.store.endConvo(this.props.cid);
       return;
     }
@@ -308,7 +330,8 @@ class Widget extends _common.Com {
     });
     this.setState({
       creating: false,
-      clickedJoin: false
+      clickedJoin: false,
+      quickReplyMessage: ''
     });
     if (!this.props.store.isMobile()) this.focusInput();
   }
@@ -319,7 +342,8 @@ class Widget extends _common.Com {
       key: 'question',
       is_required: true,
       label: this.props.t.i18n(_index.default.get(form, `i18n_question_label`, {})) || form.question_label,
-      type: 'text'
+      type: 'text',
+      value: this.state.quickReplyMessage
     };
     this.setState({
       formData
@@ -381,6 +405,7 @@ class Widget extends _common.Com {
     if (_index.default.size(this.state.formData) === 0) return null;
 
     let $fields = _index.default.map(this.state.formData, (field, key) => {
+      if (this.state.quickReplyMessage && key === 'question') return null;
       let $field = null;
       var errclass = field.error ? 'input--error' : '';
 
@@ -648,6 +673,19 @@ class Widget extends _common.Com {
     this.focusInput();
   }
 
+  fillQuickReplyToQuestion(message) {
+    let formData = this.state.formData;
+
+    if (formData) {
+      _index.default.set(formData, 'question.value', message.text);
+    }
+
+    this.setState({
+      formData,
+      quickReplyMessage: message.text
+    });
+  }
+
   createPostback(postback) {
     this.props.store.createPostback(this.props.cid, postback);
   }
@@ -718,7 +756,8 @@ class Widget extends _common.Com {
       cid: ''
     });
     this.setState({
-      clickedJoin: true
+      clickedJoin: true,
+      quickReplyMessage: ''
     });
   }
 
@@ -745,7 +784,6 @@ class Widget extends _common.Com {
     let formData = this.fillForm(form);
     let convo = this.props.store.matchConvo(this.props.cid) || {};
     if (convo.state === 'ended') return true;
-    if (this.userHasSent(this.props.cid)) return false;
     if (convo.state && convo.state !== 'pending') delete formData.group;
     return !!_index.default.find(formData, field => field.value == null || field.value === '');
   }
@@ -868,6 +906,17 @@ class Widget extends _common.Com {
     return joined;
   }
 
+  hasSentMessage(cid) {
+    let convo = this.props.store.matchConvo(cid) || {};
+
+    let joined = _index.default.find(convo.members, mem => {
+      if (mem.type === 'bot') return true;
+      return mem.last_sent;
+    });
+
+    return joined;
+  }
+
   isOffline(acc, accSetting) {
     let enableWhen = _index.default.get(accSetting, 'offline_form.enable_when');
 

package/compiled_src/util/common.js

@@ -894,7 +894,7 @@ function checkRunConditions(freq, conds, lastrun, store) {
 
       case 'source':
         if (size(cond.sources) > 0) {
-          let source = store.matchTrafficSource();
+          let source = store.matchTrafficSource() || 'direct';
           if (!find(cond.sources, src => norm(src) === norm(source))) return false;
         }
 

package/dist/132.js

@@ -225,6 +225,13 @@ class ChatButton extends common/* Com */.up {
       position = util/* default.get */.Z.get(accountSetting, 'mobile_button.position') || position;
     }
 
+    if (accountSetting && accountSetting.hide_agent_profile) {
+      agent = Object.assign({}, account, {
+        avatar_url: account.logo_url || __webpack_require__(9895),
+        fullname: account.name || this.props.t('agent')
+      });
+    }
+
     let cls = 'widget-preview widget-preview--' + position;
     if (!this.state.displayPreview) cls += ' widget-preview--hidden';
     var tags = this.renderMessagePreview(this.state.previewEvent, this.props.t('sent_you_a_message'));
@@ -458,6 +465,26 @@ class AgentsAvatar extends common/* Com */.up {
 
   render() {
     let accountSetting = this.props.plugin.chatbox;
+    let acc = this.props.store.matchAccount();
+    var tooltippos = this.props.tooltipPos || 'bottom';
+    var mode = this.props.mode || 'primary';
+
+    if (accountSetting && accountSetting.hide_agent_profile) {
+      return (0,preact_module.h)("div", {
+        class: `group-avatar group-avatar--${mode}`
+      }, (0,preact_module.h)("div", {
+        class: "d-inline-block pos-relative",
+        "data-tooltip": acc.name,
+        "data-tooltip-position": tooltippos
+      }, (0,preact_module.h)("img", {
+        width: 35,
+        height: 35,
+        alt: "agent avatar left",
+        class: "avatar group-avatar--agent-left",
+        src: this.props.store.replaceFileUrl(acc.logo_url) || __webpack_require__(9895)
+      })));
+    }
+
     let agentM = this.props.store.matchAgent('*');
     var agents = util/* default.map */.Z.map(this.props.agent_ids, id => agentM[id]);
 
@@ -473,9 +500,6 @@ class AgentsAvatar extends common/* Com */.up {
     }
 
     agents = util/* default.filter */.Z.filter(agents, ag => !!ag);
-    let acc = this.props.store.matchAccount();
-    var tooltippos = this.props.tooltipPos || 'bottom';
-    var mode = this.props.mode || 'primary';
 
     if (agents.length === 0) {
       return (0,preact_module.h)("div", {
@@ -836,6 +860,12 @@ class MessageInput extends common/* Com */.up {
     }, 5);
   }
 
+  blur() {
+    const $input = this.refMessageInput.current;
+    if (!$input) return;
+    $input.blur();
+  }
+
   render() {
     var buttons = (0,preact_module.h)("div", {
       class: "d-flex flex-row align-self-end"
@@ -2726,6 +2756,18 @@ class Event extends common/* Com */.up {
 
     var uri = acc.logo_url || __webpack_require__(9895);
 
+    if (util/* default.get */.Z.get(this.props, 'chatbox.hide_agent_profile')) {
+      return (0,preact_module.h)("div", {
+        class: "message-sender"
+      }, (0,preact_module.h)("img", {
+        alt: "sender",
+        class: "message-sender-avatar",
+        src: this.props.store.replaceFileUrl(uri)
+      }), (0,preact_module.h)("p", {
+        class: "message-sender-name"
+      }, acc.name));
+    }
+
     let agentM = this.props.store.matchAgent('*');
 
     if (byid !== 'system' || bytype !== 'dummy') {
@@ -3022,6 +3064,7 @@ class Events extends common/* Com */.up {
     }));
     processEvents(convo, events);
     let $events = util/* default.map */.Z.map(events, ev => (0,preact_module.h)(Event, {
+      chatbox: this.props.chatbox,
       onLink: this.props.onLink,
       store: this.props.store,
       onFormSubmit: this.props.onFormSubmit,
@@ -5622,6 +5665,48 @@ class Widget extends common/* Com */.up {
   constructor(props) {
     super(props);
 
+    Widget_defineProperty(this, "msgInput", (0,preact_module/* createRef */.Vf)());
+
+    Widget_defineProperty(this, "sendMessage", async message => {
+      let hasPostback = util/* default.find */.Z.find(message.attachments, att => att.type === 'postback');
+
+      if (this.isFormRequired() && hasPostback) {
+        this.onStartConvoClick();
+        this.fillQuickReplyToQuestion(message);
+        return;
+      }
+
+      let text = message.text;
+
+      if (!this.props.cid) {
+        this.creating = true;
+        const {
+          convo,
+          error
+        } = await this.props.store.startConvo({
+          locale: this.props.t.locale(),
+          message: text,
+          initial_by: this.props.store.matchUser().id
+        });
+
+        if (error) {}
+
+        this.creating = false;
+        this.props.store.sendConvoEvent(convo.id, 'message_sent', {
+          message
+        });
+        this.props.onGo({
+          view: 'chat',
+          cid: convo.id
+        });
+        return;
+      }
+
+      this.props.store.sendConvoEvent(this.props.cid, 'message_sent', {
+        message
+      });
+    });
+
     Widget_defineProperty(this, "onLink", (e, url) => {
       if (!url) return e.preventDefault();
       let noschemeurl = url.replace(/(^\w+:|^)\/\//, '');
@@ -5652,7 +5737,8 @@ class Widget extends common/* Com */.up {
       clickedJoin: false,
       formData: {},
       showOrder: false,
-      order_id: ''
+      order_id: '',
+      quickReplyMessage: ''
     });
     this.props.store.onUpdate(this, _ => this.forceUpdate());
   }
@@ -5670,7 +5756,8 @@ class Widget extends common/* Com */.up {
     if (prevProp.cid !== this.props.cid) {
       this.closeOrder();
       this.setState({
-        clickedJoin: false
+        clickedJoin: false,
+        quickReplyMessage: ''
       });
       setTimeout(() => {
         this.events && this.events.focus();
@@ -5682,6 +5769,13 @@ class Widget extends common/* Com */.up {
   }
 
   shouldShowForm() {
+    let form;
+    let accountSetting = this.props.plugin.chatbox || {};
+    let acc = this.props.store.matchAccount() || {};
+    if (util/* default.get */.Z.get(accountSetting, 'prechat_form.enabled')) form = accountSetting.prechat_form;
+    let offlineEnabled = util/* default.get */.Z.get(accountSetting, 'offline_form.enabled');
+    if (this.isOffline(acc, accountSetting) && offlineEnabled) form = accountSetting.offline_form;
+    if (!this.hasSentMessage(this.props.cid) && form && (util/* default.size */.Z.size(form.groups) || form.group_required)) return true;
     let formRequired = this.isFormRequired();
     return formRequired && !this.props.cid || formRequired && this.props.cid && this.state.clickedJoin;
   }
@@ -5789,6 +5883,9 @@ class Widget extends common/* Com */.up {
           }]
         }
       });
+      this.setState({
+        quickReplyMessage: ''
+      });
       if (form.end_conversation_after_submit) await this.props.store.endConvo(this.props.cid);
       return;
     }
@@ -5834,7 +5931,8 @@ class Widget extends common/* Com */.up {
     });
     this.setState({
       creating: false,
-      clickedJoin: false
+      clickedJoin: false,
+      quickReplyMessage: ''
     });
     if (!this.props.store.isMobile()) this.focusInput();
   }
@@ -5845,7 +5943,8 @@ class Widget extends common/* Com */.up {
       key: 'question',
       is_required: true,
       label: this.props.t.i18n(util/* default.get */.Z.get(form, `i18n_question_label`, {})) || form.question_label,
-      type: 'text'
+      type: 'text',
+      value: this.state.quickReplyMessage
     };
     this.setState({
       formData
@@ -5898,6 +5997,7 @@ class Widget extends common/* Com */.up {
   renderFields() {
     if (util/* default.size */.Z.size(this.state.formData) === 0) return null;
     let $fields = util/* default.map */.Z.map(this.state.formData, (field, key) => {
+      if (this.state.quickReplyMessage && key === 'question') return null;
       let $field = null;
       var errclass = field.error ? 'input--error' : '';
 
@@ -6114,7 +6214,7 @@ class Widget extends common/* Com */.up {
 
   blur() {
     if (this.props.store.isPreview) return;
-    var $input = this.msgInput;
+    var $input = this.msgInput.current;
     if (!$input) return;
     setTimeout(() => $input && $input.blur());
     setTimeout(() => $input && $input.blur(), 300);
@@ -6138,7 +6238,7 @@ class Widget extends common/* Com */.up {
       return;
     }
 
-    var $input = this.msgInput;
+    var $input = this.msgInput.current;
     if (!$input) return;
     setTimeout(() => $input.focus());
     setTimeout(() => $input.focus(), 300);
@@ -6154,35 +6254,16 @@ class Widget extends common/* Com */.up {
     this.focusInput();
   }
 
-  async sendMessage(message) {
-    let text = message.text;
-
-    if (!this.props.cid) {
-      this.creating = true;
-      const {
-        convo,
-        error
-      } = await this.props.store.startConvo({
-        locale: this.props.t.locale(),
-        message: text,
-        initial_by: this.props.store.matchUser().id
-      });
-
-      if (error) {}
+  fillQuickReplyToQuestion(message) {
+    let formData = this.state.formData;
 
-      this.creating = false;
-      this.props.store.sendConvoEvent(convo.id, 'message_sent', {
-        message
-      });
-      this.props.onGo({
-        view: 'chat',
-        cid: convo.id
-      });
-      return;
+    if (formData) {
+      util/* default.set */.Z.set(formData, 'question.value', message.text);
     }
 
-    this.props.store.sendConvoEvent(this.props.cid, 'message_sent', {
-      message
+    this.setState({
+      formData,
+      quickReplyMessage: message.text
     });
   }
 
@@ -6193,9 +6274,9 @@ class Widget extends common/* Com */.up {
   renderChat() {
     let $input = (0,preact_module.h)(MessageInput, {
       store: this.props.store,
-      ref: ref => this.msgInput = ref,
+      ref: this.msgInput,
       cid: this.props.cid,
-      onSend: e => this.sendMessage(e),
+      onSend: this.sendMessage,
       t: this.props.t
     });
     let convo = this.props.store.matchConvo(this.props.cid) || {};
@@ -6218,6 +6299,7 @@ class Widget extends common/* Com */.up {
       isShow: this.props.isShow,
       onLink: this.onLink,
       store: this.props.store,
+      chatbox: this.props.plugin.chatbox || {},
       onFormSubmit: e => this.onEventFormSubmit(e),
       ref: ref => this.events = ref,
       cid: this.props.cid,
@@ -6255,7 +6337,8 @@ class Widget extends common/* Com */.up {
       cid: ''
     });
     this.setState({
-      clickedJoin: true
+      clickedJoin: true,
+      quickReplyMessage: ''
     });
   }
 
@@ -6280,12 +6363,12 @@ class Widget extends common/* Com */.up {
     let formData = this.fillForm(form);
     let convo = this.props.store.matchConvo(this.props.cid) || {};
     if (convo.state === 'ended') return true;
-    if (this.userHasSent(this.props.cid)) return false;
     if (convo.state && convo.state !== 'pending') delete formData.group;
     return !!util/* default.find */.Z.find(formData, field => field.value == null || field.value === '');
   }
 
   renderConvoSummary(convo) {
+    let accountSetting = this.props.plugin.chatbox || {};
     let agentM = this.props.store.matchAgent('*');
     let ags = util/* default.filter */.Z.filter(convo.members, m => {
       return (m.type === 'agent' || m.type === 'bot') && m.membership === 'active';
@@ -6297,7 +6380,7 @@ class Widget extends common/* Com */.up {
       fullname: 'Offline Agent'
     });
     var name = util/* default.each */.Z.each(agents, ag => ag.fullname).join(', ');
-    if (!name) name = this.props.store.matchAccount().name;
+    if (accountSetting.hide_agent_profile || !name) name = this.props.store.matchAccount().name;
     if (!name) name = this.props.t('agent');
     var $you = null;
 
@@ -6384,6 +6467,15 @@ class Widget extends common/* Com */.up {
     return joined;
   }
 
+  hasSentMessage(cid) {
+    let convo = this.props.store.matchConvo(cid) || {};
+    let joined = util/* default.find */.Z.find(convo.members, mem => {
+      if (mem.type === 'bot') return true;
+      return mem.last_sent;
+    });
+    return joined;
+  }
+
   isOffline(acc, accSetting) {
     let enableWhen = util/* default.get */.Z.get(accSetting, 'offline_form.enable_when');
     let isonline = true;
@@ -6639,6 +6731,14 @@ class Main extends common/* Com */.up {
     }
 
     p = p || {};
+
+    if (!p.view && !p.cid) {
+      let convoM = this.props.store.matchConvo('*');
+      let redconvo = util/* default.find */.Z.find(convoM, convo => !util/* default.isConvoSeen */.Z.isConvoSeen(convo, this.props.store.matchUser().id));
+      p.cid = util/* default.get */.Z.get(redconvo, 'id', util/* default.get */.Z.get(convoM, '0.id'));
+      p.view = 'chat';
+    }
+
     if (this.props.store.isMobile()) modifyViewport();
     this.setState({
       widgetConvoId: p.cid,