@subiz/widget-v4 4.1.210 → 4.1.211

package/compiled_src/chatbox/Widget.js

@@ -11,6 +11,7 @@ var _AgentsAvatar = _interopRequireDefault(require("./AgentsAvatar.js"));
 var _Header = _interopRequireDefault(require("./Header.js"));
 var _MessageInput = _interopRequireDefault(require("./MessageInput.js"));
 var _Events = _interopRequireDefault(require("./Events.js"));
+var _greeting = require("./greeting.js");
 var _Rating = _interopRequireDefault(require("./Rating.js"));
 var _ConnectionStatus = _interopRequireDefault(require("./ConnectionStatus.js"));
 var _ListField = _interopRequireDefault(require("./ListField.js"));
@@ -32,51 +33,12 @@ class Widget extends _common.Com {
   constructor(props) {
     super(props);
     _defineProperty(this, "msgInput", (0, _preact.createRef)());
-    _defineProperty(this, "findMissingRTMessage", async started => {
-      let messageSentDict = this.props.store.listAgentRealtimeMessageSent();
-      let res1 = await this.props.store.sbzListConversations();
-      let conversions = _index.default.get(res1, 'body.conversations') || [];
-      let cids = _index.default.map(conversions, convo => convo.id);
-      let promises = _index.default.map(cids, cid => this.props.store.sbzListMessages(cid));
-      let msgReses = await Promise.all(promises);
-      _index.default.map(msgReses, msgRes => {
-        let messages = _index.default.get(msgRes, 'body') || [];
-        _index.default.map(messages, ev => {
-          if (ev.created < started) return;
-          if (ev.type !== 'message_sent') return;
-          if (_index.default.get(ev, 'by.type') === 'user') return;
-          console.log('check ev pass condition', ev);
-          if (!messageSentDict[ev.id] && !this.debugAgentSentEvIds[ev.id]) {
-            let accid = _index.default.get(this.props.store.matchAccount(), 'id');
-            this.props.store.sendBugReport(`[WIDGET ${accid}] Missing agent message sent evid ${ev.id}, cid ${_index.default.convoOfEv(ev)}, ev_created ${ev.created}, FE timestamp ${Date.now()}, Init Debug timestamp ${started}`);
-            this.debugAgentSentEvIds[ev.id] = true;
-          }
-        });
-      });
-    });
-    _defineProperty(this, "debugRTAgentMessageSent", async () => {
-      try {
-        let debugAccountIds = this.props.store.matchDebugAccountIds();
-        let accid = _index.default.get(this.props.store.matchAccount(), 'id');
-        if (!debugAccountIds.includes(accid)) return;
-        console.log('START check RT agent message with BE source');
-        let started = Date.now();
-        this.findMissingRTMessage(started);
-        for (let i = 0; i < 100_000; i++) {
-          await _index.default.sleep(120_000);
-          console.log('LOOP check RT agent message with BE source', i);
-          this.findMissingRTMessage(started);
-        }
-      } catch (err) {
-        this.props.store.sendBugReport(`debugRTAgentMessageSent ERROR ${err.stack}`);
-      }
-    });
     _defineProperty(this, "formMounted", form => {
       let formData = this.fillForm(form);
       if (form.question_required || this.state.quickReplyMessage.text) {
         formData['question'] = {
           key: 'question',
-          is_required: true,
+          is_required: false,
           label: this.props.t.i18n(_index.default.get(form, `i18n_question_label`, {})) || form.question_label,
           type: 'text',
           value: this.state.quickReplyMessage.text
@@ -87,14 +49,118 @@ class Widget extends _common.Com {
       });
       if (!this.props.store.isMobile() && !form._updated) this.focusInput();
     });
-    _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);
+    _defineProperty(this, "sendMessage", async (message, {
+      formSubmitted = false,
+      groupId
+    } = {}) => {
+      if (this._sendingNewConversation) return false;
+      if (_index.default.get(this.props.store.matchConvo(this.props.cid), 'state') === 'ended') {
+        const form = this.startingConversationForm();
+        if (form && (_index.default.size(form.groups) || form.group_required || this.isFormRequired(''))) {
+          this.setState({
+            restartForm: true,
+            quickReplyMessage: message
+          });
+          return;
+        }
+        this._sendingNewConversation = true;
+        this.setState({
+          creating: true,
+          creatingError: null
+        });
+        try {
+          const {
+            convo,
+            error
+          } = await this.props.store.startConvo({
+            locale: this.props.t.locale(),
+            message: message.text,
+            initial_by: this.props.store.matchUser().id
+          });
+          if (error) {
+            this.setState({
+              creatingError: error
+            });
+            return false;
+          }
+          await this.props.store.sendConvoEvent(convo.id, 'message_sent', {
+            message
+          });
+          this.props.onGo({
+            view: 'chat',
+            cid: convo.id
+          });
+        } finally {
+          this._sendingNewConversation = false;
+          this.setState({
+            creating: false
+          });
+        }
+        return;
+      }
+      const form = this.startingConversationForm();
+      const needsGroup = form && !this.hasSentMessage(this.props.cid) && (_index.default.size(form.groups) || form.group_required);
+      if (!formSubmitted && (this.isFormRequired() || needsGroup)) {
+        this.setState({
+          clickedJoin: true,
+          quickReplyMessage: message
+        });
         return;
       }
       let text = message.text;
+      const localConvo = this.props.store.matchConvo(this.props.cid);
+      if (localConvo && localConvo.light_type === 'widget') {
+        this._sendingNewConversation = true;
+        this.setState({
+          creating: true,
+          creatingError: null
+        });
+        try {
+          const {
+            convo,
+            error
+          } = await this.props.store.startConvo({
+            locale: localConvo.locale,
+            message: text,
+            group_id: groupId,
+            initial_by: this.props.store.matchUser().id,
+            greeting_message: localConvo.events[0]
+          });
+          if (error || !convo) {
+            this.setState({
+              creatingError: error || 'start_failed'
+            });
+            return false;
+          }
+          this.props.store.promoteWidgetConvo(localConvo.id, convo.id);
+          const sending = this.props.store.sendConvoEvent(convo.id, 'message_sent', {
+            message
+          });
+          this.props.onGo({
+            view: 'chat',
+            cid: convo.id
+          });
+          await sending;
+          this.userSent[convo.id] = true;
+          if (formSubmitted && form && form.end_conversation_after_submit) await this.props.store.endConvo(convo.id);
+          this.setState({
+            clickedJoin: false,
+            restartForm: false,
+            quickReplyMessage: {}
+          });
+        } catch (error) {
+          this.setState({
+            creatingError: error
+          });
+          return false;
+        } finally {
+          this._sendingNewConversation = false;
+          this.setState({
+            creating: false
+          });
+        }
+        return;
+      }
       if (this.props.cid && this.props.cid.startsWith('cslight')) {
         let cid = this.props.cid;
         this._creating = (this._creating || 0) + 1;
@@ -165,14 +231,15 @@ class Widget extends _common.Com {
           });
           return;
         }
-        await this.props.store.sendConvoEvent(convo.id, 'message_sent', {
+        const sending = this.props.store.sendConvoEvent(convo.id, 'message_sent', {
           message
         });
-        if (_creating != this._creating) return;
         this.props.onGo({
           view: 'chat',
           cid: convo.id
         });
+        await sending;
+        if (_creating != this._creating) return;
         this.setState({
           creating: false
         });
@@ -212,7 +279,6 @@ class Widget extends _common.Com {
       this.focusInput();
     });
     this.userSent = {};
-    this.debugAgentSentEvIds = {};
     this.wasFormInputed = false;
     this.setState({
       creating: false,
@@ -228,7 +294,6 @@ class Widget extends _common.Com {
   componentDidMount() {
     if (!this.props.store.isMobile()) this.focusInput();
     this.updateFormDataFields();
-    this.debugRTAgentMessageSent();
   }
   applyMessage(text) {
     this.focusInput(text);
@@ -243,6 +308,7 @@ class Widget extends _common.Com {
       this.closeOrder();
       this.setState({
         clickedJoin: false,
+        restartForm: false,
         quickReplyMessage: {}
       });
       _index.default.setTimeout(() => {
@@ -252,19 +318,14 @@ class Widget extends _common.Com {
       this.updateFormDataFields();
     }
   }
+  componentWillUnmount() {
+    this.cancelContainerFocus();
+  }
   ShowTyping() {
     this.$events && this.$events.ShowTyping();
   }
   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;
+    return !!(this.state.restartForm || this.state.clickedJoin);
   }
   render() {
     let showform = this.shouldShowForm();
@@ -328,42 +389,22 @@ class Widget extends _common.Com {
     _index.default.map(formData, (field, key) => {
       field = Object.assign({}, field);
       field.is_empty_error = false;
-      if (field.is_required && (field.value === undefined || field.value === '' || _index.default.size(field.value) === 0 && Array.isArray(field.value))) {
+      if (field.is_required && (field.value == null || typeof field.value === 'string' && !field.value.trim() || _index.default.size(field.value) === 0 && Array.isArray(field.value))) {
         field.is_empty_error = true;
         field.error = this.props.t('error_empty');
       } else field.error = '';
-      if (key.substr(5) === 'emails') {
-        if (field.is_required) {
-          if (!_index.default.isEmail(field.value)) {
-            field.error = this.props.t('error_email_invalid');
-          }
-        } else {
-          let value = field.value || '';
-          if (typeof value !== 'string') value = value + '';
-          if (value.trim() && !_index.default.isEmail(field.value)) {
-            field.error = this.props.t('error_email_invalid');
-          }
-        }
+      if (key === 'attr:emails' && !field.error && String(field.value ?? '').trim() && !_index.default.isEmail(field.value)) {
+        field.error = this.props.t('error_email_invalid');
       }
-      if (key.substr(5) === 'phones') {
-        if (field.is_required) {
-          if (!_index.default.isPhone(field.value)) {
-            field.error = this.props.t('error_phone_invalid');
-          }
-        } else {
-          let value = field.value || '';
-          if (typeof value !== 'string') value = value + '';
-          if (value.trim() && !_index.default.isPhone(field.value)) {
-            field.error = this.props.t('error_phone_invalid');
-          }
-        }
+      if (key === 'attr:phones' && !field.error && String(field.value ?? '').trim() && !_index.default.isPhone(field.value)) {
+        field.error = this.props.t('error_phone_invalid');
       }
       newformdata[key] = field;
     });
     return newformdata;
   }
   async submitPrechatForm(form, formName) {
-    if (this.state.submiting) return;
+    if (this.state.submiting || this.state.creating) return;
     let newData = this.validateForm(this.state.formData);
     let hasError = _index.default.find(newData, field => !!field.error);
     if (hasError) {
@@ -378,6 +419,8 @@ class Widget extends _common.Com {
     let is_lead = false;
     _index.default.map(data, (field, key) => {
       if (!key.startsWith('attr:')) return;
+      if (key === 'attr:phones') field.value = String(field.value ?? '').trim().replace(/[(). \-]/g, '');
+      if (key === 'attr:emails') field.value = String(field.value ?? '').trim();
       var attr = {
         key: key.substr(5)
       };
@@ -392,7 +435,8 @@ class Widget extends _common.Com {
       key: 'lead_source',
       text: 'widget'
     });
-    let firstmsg = _index.default.get(data, 'question.value', this.props.t('get_started'));
+    const question = String(_index.default.get(data, 'question.value', '') ?? '').trim();
+    const firstmsg = question || (/^vi(?:[-_]|$)/i.test(navigator.language || '') ? 'Xin chào' : 'Hello');
     let groupid = _index.default.get(data, 'group.value', '');
     this._creating = (this._creating || 0) + 1;
     let _creating = this._creating;
@@ -410,7 +454,7 @@ class Widget extends _common.Com {
     await _index.default.sleep(500);
     if (_creating != this._creating) return;
     if (this.props.cid && this.props.cid.startsWith('cslight')) {
-      this.sendMessage({
+      await this.sendMessage({
         text: firstmsg,
         format: 'plaintext',
         fields: [{
@@ -418,10 +462,13 @@ class Widget extends _common.Com {
           value: _index.default.stringify(groupid)
         }],
         attachments: this.state.quickReplyMessage.attachments
+      }, {
+        formSubmitted: true,
+        groupId: groupid
       });
       return;
     }
-    if (this.props.cid) {
+    if (this.props.cid && _index.default.get(this.props.store.matchConvo(this.props.cid), 'state') !== 'ended') {
       this.setState({
         clickedJoin: false
       });
@@ -447,7 +494,8 @@ class Widget extends _common.Com {
     }
     let message = {
       text: firstmsg,
-      format: 'plaintext'
+      format: 'plaintext',
+      attachments: this.state.quickReplyMessage.attachments
     };
     let req = {
       group_id: groupid,
@@ -476,9 +524,12 @@ class Widget extends _common.Com {
       message
     });
     if (_creating != this._creating) return;
+    if (form.end_conversation_after_submit) await this.props.store.endConvo(newconvoid);
+    if (_creating != this._creating) return;
     this.setState({
       creating: false,
       clickedJoin: false,
+      restartForm: false,
       quickReplyMessage: {}
     });
     this.props.onGo({
@@ -509,6 +560,7 @@ class Widget extends _common.Com {
     if (!field) return;
     field.value = val;
     field.error = undefined;
+    field.is_empty_error = false;
     this.setState({
       formData
     });
@@ -629,7 +681,7 @@ class Widget extends _common.Com {
   renderFields(form, formName) {
     if (_index.default.size(this.state.formData) === 0) return null;
     let $fields = _index.default.map(this.state.formData, (field, key) => {
-      if (this.state.quickReplyMessage.text && key === 'question') return null;
+      if (key === 'question' && _index.default.find(this.state.quickReplyMessage.attachments, att => att.type === 'postback')) return null;
       let $field = null;
       var errclass = field.error ? 'input--error' : '';
       if (field.type === 'text') {
@@ -662,7 +714,11 @@ class Widget extends _common.Com {
               this['form_' + encode(key)] = ref;
             },
             class: `form-control ${errclass}`,
-            type: "text"
+            type: key === 'attr:phones' ? 'tel' : key === 'attr:emails' ? 'email' : 'text',
+            inputMode: key === 'attr:phones' ? 'tel' : key === 'attr:emails' ? 'email' : undefined,
+            autoComplete: key === 'attr:phones' ? 'tel' : key === 'attr:emails' ? 'email' : undefined,
+            "aria-invalid": field.error ? 'true' : undefined,
+            "aria-describedby": field.error ? 'form-error_' + encode(key) : undefined
           });
         }
       } else if (field.type === 'number') {
@@ -746,6 +802,8 @@ class Widget extends _common.Com {
       }, label, field.is_required ? (0, _preact.h)("span", {
         class: "red"
       }, "*") : ''), $field, field.error ? (0, _preact.h)("div", {
+        id: 'form-error_' + encode(key),
+        role: "alert",
         class: "form-control--valid-input--error"
       }, field.error) : '');
     });
@@ -758,9 +816,10 @@ class Widget extends _common.Com {
     if (!title) title = _index.default.get(form, 'title', this.props.t('capture_lead_title'));
     title = title.replace('↵', '');
     let btncls = 'btn--start-convo ';
-    let hasError = _index.default.find(this.state.formData, field => !!field.error);
     let newData = this.validateForm(this.state.formData);
     let hasEmptyError = _index.default.find(newData, field => !!field.is_empty_error);
+    const phone = String(_index.default.get(this.state.formData, 'attr:phones.value', '') ?? '').trim();
+    const phoneTooShort = phone.length > 0 && phone.length < 5;
     let bodycls = 'widget-body';
     if (this.props.store.isEmbededChatMode()) bodycls += ' embed-chat';
     return (0, _preact.h)("div", {
@@ -780,12 +839,28 @@ class Widget extends _common.Com {
     }), (0, _preact.h)("button", {
       class: btncls,
       onClick: _ => this.submitPrechatForm(form, formName),
-      disabled: !!hasEmptyError || !!hasError || this.state.creating
+      disabled: !!hasEmptyError || phoneTooShort || this.state.creating
     }, submitLabel)));
   }
   goToConvo(cid) {
+    let view = 'chat';
+    if (!cid) {
+      const greeting = (0, _greeting.widgetGreeting)(this.props.plugin.chatbox, this.props.t);
+      cid = this.props.store.startWidgetConvo(greeting, this.props.t.locale()).convo.id;
+      const form = this.startingConversationForm();
+      const setting = this.props.plugin.chatbox || {};
+      const offline = _index.default.get(setting, 'offline_form.enabled') && this.isOffline(this.props.store.matchAccount() || {}, setting);
+      if (form && (offline || this.isFormRequired(cid) || _index.default.size(form.groups) || form.group_required)) {
+        view = offline ? 'offline_form' : 'prechat_form';
+        this.setState({
+          clickedJoin: false,
+          restartForm: false,
+          quickReplyMessage: {}
+        });
+      }
+    }
     this.props.onGo({
-      view: 'chat',
+      view,
       cid
     });
   }
@@ -859,7 +934,7 @@ class Widget extends _common.Com {
     _index.default.setTimeout(() => $input && $input.blur());
     _index.default.setTimeout(() => $input && $input.blur(), 300);
   }
-  focusInput(text) {
+  focusInput(text, repeat = true) {
     if (this.props.store.isPreview) return;
     if (this.shouldShowForm()) {
       let focusfieldkey = '';
@@ -884,6 +959,7 @@ class Widget extends _common.Com {
     if (text != undefined && typeof text === 'string') {
       $input.applyMessage(text);
     }
+    if (!repeat) return $input.focus();
     _index.default.setTimeout(() => $input.focus());
     _index.default.setTimeout(() => $input.focus(), 300);
   }
@@ -920,21 +996,13 @@ class Widget extends _common.Com {
       onSend: this.sendMessage,
       t: this.props.t
     });
-    let convo = this.props.store.matchConvo(this.props.cid) || {};
-    if (this.isFormRequired() || convo.state === 'ended') {
-      $input = (0, _preact.h)("div", {
-        class: "message-input message-input--preform"
-      }, (0, _preact.h)("button", {
-        class: "btn--start-convo",
-        onClick: e => this.onStartConvoClick(e)
-      }, this.props.t('offline_preform_btn')));
-    }
     let bodycls = 'widget-body';
     if (this.props.store.isEmbededChatMode()) bodycls += ' embed-chat';
     return (0, _preact.h)("div", {
       class: bodycls
     }, (0, _preact.h)("div", {
       class: "widget-body--content",
+      onPointerDown: () => this.cancelContainerFocus(),
       onClick: e => this.onContainerClick(e)
     }, (0, _preact.h)(_Events.default, {
       isShow: this.props.isShow,
@@ -944,7 +1012,7 @@ class Widget extends _common.Com {
       onFormSubmit: e => this.onEventFormSubmit(e),
       ref: ref => this.$events = ref,
       cid: this.props.cid,
-      creating: this.creating,
+      creating: this.state.creating,
       onSend: e => this.sendMessage(e),
       onPostback: e => this.createPostback(e),
       t: this.props.t,
@@ -971,42 +1039,45 @@ class Widget extends _common.Com {
       t: this.props.t
     }), $input);
   }
-  async onStartConvoClick() {
-    var convo = this.props.store.matchConvo(this.props.cid) || {};
-    if (convo.state === 'ended') return this.props.onGo({
-      view: 'chat',
-      cid: ''
-    });
-    this.setState({
-      clickedJoin: true,
-      quickReplyMessage: {}
-    });
-  }
   onEventFormSubmit() {
     this.focusInput();
   }
-  onContainerClick() {
-    var selection = window.getSelection();
-    if (selection.toString().length > 0) return;
-    if (!this.props.store.isMobile()) this.focusInput();
+  cancelContainerFocus() {
+    if (this.containerFocusTimer) _index.default.clearTimeout(this.containerFocusTimer);
+    this.containerFocusTimer = null;
   }
-  isFormRequired() {
-    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;
+  onContainerClick(event) {
+    this.cancelContainerFocus();
+    const target = event && event.target;
+    const element = target && (target.nodeType === 1 ? target : target.parentElement);
+    if (element && element.closest('a, button, input, textarea, select, [contenteditable]')) return;
+    if (event && event.detail > 1) return;
+    if (this.props.store.isMobile() || window.getSelection()?.toString()) return;
+    const cid = this.props.cid;
+    this.containerFocusTimer = _index.default.setTimeout(() => {
+      this.containerFocusTimer = null;
+      if (!this._isMounted || this.props.cid !== cid || this.props.isShow === false || window.getSelection()?.toString()) return;
+      this.focusInput(undefined, false);
+    }, 300);
+  }
+  startingConversationForm() {
+    const setting = this.props.plugin.chatbox || {};
+    const account = this.props.store.matchAccount() || {};
+    if (this.isOffline(account, setting) && _index.default.get(setting, 'offline_form.enabled')) return setting.offline_form;
+    if (_index.default.get(setting, 'prechat_form.enabled')) return setting.prechat_form;
+  }
+  isFormRequired(cid = this.props.cid) {
+    let form = this.startingConversationForm();
     if (!form) return false;
     let formData = this.fillForm(form);
-    let convo = this.props.store.matchConvo(this.props.cid) || {};
+    let convo = this.props.store.matchConvo(cid) || {};
     if (convo.state === 'ended') return true;
     if (convo.state && convo.state !== 'pending') delete formData.group;
     let isAllFiledEmpty = true;
     _index.default.each(formData, field => {
       if (field.value) isAllFiledEmpty = false;
     });
-    if (isAllFiledEmpty && !this.userHasSent(this.props.cid)) return true;
+    if (isAllFiledEmpty && !this.userHasSent(cid)) return true;
     return !!_index.default.find(formData, field => field.is_required && (field.value == null || field.value === ''));
   }
   renderConvoSummary(convo) {
@@ -1151,7 +1222,7 @@ class Widget extends _common.Com {
     if (form.question_required) {
       data['question'] = {
         key: 'question',
-        is_required: true,
+        is_required: false,
         label: this.props.t.i18n(_index.default.get(form, `i18n_question_label`, {})) || form.question_label,
         type: 'text'
       };