@subiz/widget-v4 4.1.62 → 4.1.65

package/README.md

@@ -21,3 +21,13 @@ Since our script is running in client site. The built-in function may be overrid
 
 JSON.stringify => sb.stringify
 JSON.parse => sb.parseJSON
+
+
+### Note about preact
+preact above 10.19.3 cause form input problem
+reproduct: ,
+1. checkout to commit
+2. IMPORTANT: open new incognitor browser
+2. visit http://localhost:8082/?account_id=acpxkgumifuoofoosble
+3. input into form offline
+4. cannot submit (expted: can submit)

package/assets/less/widget.less

@@ -37,6 +37,9 @@
 }
 
 .convo-list--footer {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 	margin-top: @spacer3;
 }
 
@@ -225,9 +228,9 @@
 }
 
 .widget-container.widget-container--full {
-  max-height: 100%;
-  height: 100%;
-  margin-bottom: 0;
+	max-height: 100%;
+	height: 100%;
+	margin-bottom: 0;
 }
 
 .widget-container.widget-container--hide {
@@ -238,6 +241,7 @@
 
 .btn--start-convo {
 	border-radius: 7px;
+	display: block;
 	padding-left: 32px;
 	padding-right: 32px;
 	height: 40px;
@@ -246,15 +250,23 @@
 	line-height: 20px;
 	text-align: center;
 	background: @primary-color;
-	display: flex;
-	align-items: center;
-	margin-left: auto;
-	margin-right: auto;
+	max-width: 250px;
+	width: 70%;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+
 	&::after {
 		display: none;
 	}
 }
 
+.btn--start-convo:disabled {
+	opacity: 0.5;
+	cursor: default;
+	pointer-events: none;
+}
+
 .widget-body.widget-body--none {
 	display: none;
 }

package/compiled_src/chatbox/Widget.js

@@ -40,7 +40,11 @@ class Widget extends _common.Com {
       }
       let text = message.text;
       if (!this.props.cid) {
-        this.creating = true;
+        this._creating = (this._creating || 0) + 1;
+        let _creating = this._creating;
+        this.setState({
+          creating: true
+        });
         const {
           convo,
           error
@@ -49,20 +53,27 @@ class Widget extends _common.Com {
           message: text,
           initial_by: this.props.store.matchUser().id
         });
+        if (_creating != this._creating) return;
         if (error) {}
-        this.creating = false;
-        this.props.store.sendConvoEvent(convo.id, 'message_sent', {
+        await this.props.store.sendConvoEvent(convo.id, 'message_sent', {
           message
         });
+        if (_creating != this._creating) return;
+        this.setState({
+          creating: false
+        });
         this.props.onGo({
           view: 'chat',
           cid: convo.id
         });
         return;
       }
-      this.props.store.sendConvoEvent(this.props.cid, 'message_sent', {
+      await this.props.store.sendConvoEvent(this.props.cid, 'message_sent', {
         message
       });
+      this.setState({
+        creating: false
+      });
     });
     _defineProperty(this, "onLink", (e, url) => {
       if (!url) return e.preventDefault();
@@ -99,11 +110,13 @@ class Widget extends _common.Com {
   }
   componentDidMount() {
     if (!this.props.store.isMobile()) this.focusInput();
+    this.updateFormDataFields();
   }
   componentDidUpdate(prevProp) {
     if (prevProp.isShow !== this.props.isShow) {
       if (this.props.isShow && !this.props.store.isMobile()) this.focusInput();
       if (this.props.isShow && this.props.store.isMobile()) this.blur();
+      this.updateFormDataFields();
     }
     if (prevProp.cid !== this.props.cid) {
       this.closeOrder();
@@ -115,8 +128,8 @@ class Widget extends _common.Com {
         this.events && this.events.focus();
         if (!this.props.store.isMobile()) this.focusInput();
       }, 100);
+      this.updateFormDataFields();
     }
-    this.updateFormDataFields();
   }
   shouldShowForm() {
     let form;
@@ -131,6 +144,7 @@ class Widget extends _common.Com {
   }
   render() {
     let showform = this.shouldShowForm();
+    let formName = '';
     let form;
     let accountSetting = this.props.plugin.chatbox || {};
     let acc = this.props.store.matchAccount() || {};
@@ -140,19 +154,22 @@ class Widget extends _common.Com {
     if (this.isOffline(acc, accountSetting) && offlineEnabled) {
       form = accountSetting.offline_form;
       submitLabel = this.props.t('offline_form_btn');
+      formName = 'offline';
     }
     if (this.props.view === 'offline_form') {
       showform = true;
       form = accountSetting.offline_form;
+      formName = 'offline';
       submitLabel = this.props.t('offline_form_btn');
     }
     if (this.props.view === 'prechat_form') {
       showform = true;
       form = accountSetting.prechat_form;
       submitLabel = this.props.t('prechat_form_btn');
+      formName = 'prechat';
     }
     let $body = null;
-    if (this.props.view === 'list') $body = this.renderConvoList();else if (showform) $body = this.renderForm(form, submitLabel);else $body = this.renderChat();
+    if (this.props.view === 'list') $body = this.renderConvoList();else if (showform) $body = this.renderForm(form, submitLabel, formName);else $body = this.renderChat();
     let position = _index.default.get(accountSetting, 'desktop_button.position') || 'right';
     if (this.props.store.isMobile()) position = _index.default.get(accountSetting, 'mobile_button.position', position);
     let cls = 'widget-container widget-container--' + position;
@@ -172,7 +189,8 @@ class Widget extends _common.Com {
       })
     }), $body);
   }
-  async submitPrechatForm(form) {
+  async submitPrechatForm(form, fornName) {
+    if (this.state.submiting) return;
     var hasError = false;
     _index.default.map(this.state.formData, (field, key) => {
       if (field.is_required && (field.value === undefined || field.value === '' || _index.default.size(field.value) === 0 && Array.isArray(field.value))) {
@@ -210,8 +228,20 @@ class Widget extends _common.Com {
     });
     let firstmsg = _index.default.get(data, 'question.value');
     let groupid = _index.default.get(data, 'group.value', '');
+    this._creating = (this._creating || 0) + 1;
+    let _creating = this._creating;
+    this.setState({
+      creating: true
+    });
+    let out = await this.props.store.submitForm('chatbox_' + fornName, _index.default.map(data, (field, key) => {
+      return {
+        key: key,
+        type: field.type,
+        value: field.value + ''
+      };
+    }), user);
+    if (_creating != this._creating) return;
     if (this.props.cid) {
-      this.props.store.setUser(user);
       this.setState({
         clickedJoin: false
       });
@@ -226,15 +256,15 @@ class Widget extends _common.Com {
           attachments: this.state.quickReplyMessage.attachments
         }
       });
+      if (_creating != this._creating) return;
       this.setState({
+        creating: false,
         quickReplyMessage: {}
       });
       if (form.end_conversation_after_submit) await this.props.store.endConvo(this.props.cid);
+      if (_creating != this._creating) return;
       return;
     }
-    this.setState({
-      creating: true
-    });
     let message = {
       text: firstmsg,
       format: 'plaintext'
@@ -248,11 +278,11 @@ class Widget extends _common.Com {
     this.setState({
       creatingError: null
     });
-    await this.props.store.setUser(user);
     const {
       error,
       convo
     } = await this.props.store.startConvo(req);
+    if (_creating != this._creating) return;
     if (error) {
       this.setState({
         creating: false,
@@ -262,18 +292,19 @@ class Widget extends _common.Com {
     }
     let newconvoid = convo.id;
     this.userSent[newconvoid] = true;
-    this.props.onGo({
-      view: 'chat',
-      cid: newconvoid
-    });
-    this.props.store.sendConvoEvent(newconvoid, 'message_sent', {
+    await this.props.store.sendConvoEvent(newconvoid, 'message_sent', {
       message
     });
+    if (_creating != this._creating) return;
     this.setState({
       creating: false,
       clickedJoin: false,
       quickReplyMessage: {}
     });
+    this.props.onGo({
+      view: 'chat',
+      cid: newconvoid
+    });
     if (!this.props.store.isMobile()) this.focusInput();
   }
   formMounted(form) {
@@ -455,6 +486,7 @@ class Widget extends _common.Com {
             },
             value: field.value || '',
             onInput: e => this.onInputChange(key, e.target.value),
+            onChange: e => this.onInputChange(key, e.target.value),
             row: "4",
             class: "form-control"
           });
@@ -462,6 +494,7 @@ class Widget extends _common.Com {
           $field = (0, _preact.h)("input", {
             value: field.value || '',
             onInput: e => this.onInputChange(key, e.target.value),
+            onChange: e => this.onInputChange(key, e.target.value),
             ref: ref => {
               this['form_' + encode(key)] = ref;
             },
@@ -540,7 +573,9 @@ class Widget extends _common.Com {
         label = field.label || this.props.t('your_question');
       }
       if (field.label) label = field.label;
-      return (0, _preact.h)("div", null, (0, _preact.h)("div", {
+      return (0, _preact.h)("div", {
+        key: 'form_' + encode(key)
+      }, (0, _preact.h)("div", {
         class: "label"
       }, label, field.is_required ? (0, _preact.h)("span", {
         class: "ml-1 red"
@@ -552,14 +587,7 @@ class Widget extends _common.Com {
       class: "pt-2"
     }, $fields);
   }
-  renderForm(form, submitLabel) {
-    let $loading = null;
-    if (this.state.creating) $loading = (0, _preact.h)("span", {
-      class: "ml-2"
-    }, (0, _preact.h)(_spinner.default, {
-      size: "16",
-      mode: "white"
-    }));
+  renderForm(form, submitLabel, formName) {
     let title = this.props.t.i18n(_index.default.get(form, `i18n_title`, {}));
     if (!title) title = _index.default.get(form, 'title', this.props.t('capture_lead_title'));
     title = title.replace('↵', '');
@@ -581,8 +609,9 @@ class Widget extends _common.Com {
       class: "message-input message-input--preform"
     }, (0, _preact.h)("button", {
       class: "btn--start-convo",
-      onClick: _ => this.submitPrechatForm(form)
-    }, submitLabel, " ", $loading)));
+      onClick: _ => this.submitPrechatForm(form, formName),
+      disabled: this.state.creating
+    }, submitLabel)));
   }
   goToConvo(cid) {
     this.props.onGo({

package/compiled_src/store/api.js

@@ -40,6 +40,23 @@ class _default {
     _defineProperty(this, "getConversation", cid => this.apireq.get(`/accounts/${this.accid}/conversations/${cid}`));
     _defineProperty(this, "getLocaleContent", locale => this.apireq.get(`/accounts/${this.accid}/locales/${locale}`));
     _defineProperty(this, "sendEvent", data => this.apireq.addQuery('shorten', true).post(`/accounts/${this.accid}/users/${this.uid}/events`, data));
+    _defineProperty(this, "submitForm", (form_id, page_url, device, data, user) => this.apireq.post(`/accounts/${this.accid}/users/${this.uid}/events`, {
+      by: {
+        id: this.uid,
+        device: device
+      },
+      type: 'form_submitted',
+      data: {
+        user: user,
+        form_submitted: {
+          user_id: this.uid,
+          form_id: form_id,
+          page_url: page_url,
+          submitted_at: _index.default.Date.now(),
+          values: data
+        }
+      }
+    }));
     _defineProperty(this, "sendTyping", cid => this.apireq.post(`/accounts/${this.accid}/conversations/${cid}/typing`));
     _defineProperty(this, "sendLostFocus", (device, productid, source_id, sku) => this.sendEvent({
       by: {

package/compiled_src/store/api_fake.js

@@ -51,6 +51,7 @@ class _default {
     }));
     _defineProperty(this, "getLocaleContent", locale => this.apireq.get(`/accounts/${this.accid}/locales/${locale}`));
     _defineProperty(this, "sendEvent", data => OK200);
+    _defineProperty(this, "submitForm", (form_id, page_url, device, data, user) => OK200);
     _defineProperty(this, "sendTyping", cid => OK200);
     _defineProperty(this, "sendPresence", data => OK200);
     _defineProperty(this, "sendContent", data => OK200);

package/compiled_src/store/store.js

@@ -481,6 +481,11 @@ class Store {
     }
     return this.reconnectGate.open();
   }
+  async submitForm(formid, data, user) {
+    await this.readyGate.entry();
+    if (user) await this.setUser(user);
+    return this.api.submitForm(formid, document.URL, this.device, data, user);
+  }
   async setUser(user) {
     if (!user) return;
     await this.readyGate.entry();
@@ -684,36 +689,6 @@ class Store {
     this._setConvo(convo);
     this.pubsub.publish('account');
   }
-  handleFormSubmit(convoKey, ev) {
-    if (ev.type !== 'message_sent') return;
-    let formSubmits = [];
-    let attachments = _index.default.get(ev, 'data.message.attachments') || [];
-    _index.default.each(attachments, att => {
-      if (!att) return;
-      if (att.type !== 'form_submit') return;
-      formSubmits.push(att.form_submit);
-    });
-    _index.default.each(formSubmits, submit => {
-      let formev = _index.default.get(this.convoEventM, convoKey + '.' + submit.form_message_id);
-      if (!formev) return;
-      let forms = _index.default.filter(_index.default.get(formev, 'data.message.attachments'), att => {
-        if (!att) return false;
-        if (att.type !== 'form' && att.type !== 'ask_info_form') return false;
-        return true;
-      });
-      _index.default.each(forms, form => {
-        form = form.form;
-        _index.default.each(form.fields, formfield => {
-          _index.default.each(submit.fields, submitfield => {
-            if (formfield.name !== submitfield.name) return;
-            if (formfield.default_answer) return;
-            formfield.default_answer = submitfield.value;
-          });
-        });
-      });
-      if (_index.default.size(forms) > 0) this.pubsub.publish('state.convoEventM', this.convoEventM, convoKey);
-    });
-  }
   typing(cid) {
     if (!cid) return;
     this._typing(cid);