@subiz/widget-v4 4.1.129 → 4.1.130

package/assets/less/chatbox.less

@@ -145,18 +145,18 @@ body div#sbz92 {
 	.text-muted {
 		.color(@text-muted);
 	}
-  .text-lg {
-    font-size: 18px;
-  }
-  .text-xl {
-    font-size: 20px;
-  }
-  .text-center {
-    text-align: center;
-  }
-  .text-danger {
-    color: #ea3d2f;
-  }
+	.text-lg {
+		font-size: 18px;
+	}
+	.text-xl {
+		font-size: 20px;
+	}
+	.text-center {
+		text-align: center;
+	}
+	.text-danger {
+		color: #ea3d2f;
+	}
 
 	.text-italic {
 		font-style: italic;
@@ -227,6 +227,9 @@ body div#sbz92 {
 	.mb-2 {
 		margin-bottom: @spacer2;
 	}
+	.mb-1 {
+		margin-bottom: @spacer1;
+	}
 
 	.muted {
 		.color(@text-muted);

package/compiled_src/chatbox/FormAttachment2.js

@@ -15,6 +15,19 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 class FormAttachment extends _common.Com {
   constructor(props) {
     super(props);
+    _defineProperty(this, "fetchFormSetting", () => {
+      let attachments = _index.default.get(this.props.ev, 'data.message.attachments') || [];
+      let formAttachment = _index.default.find(attachments, att => att.type === 'form');
+      if (!formAttachment) return;
+      let formSetting = formAttachment.form || {};
+      let submission = formAttachment.submission || {};
+      let isSubmited = _index.default.size(submission) > 0;
+      this.setState({
+        formSetting,
+        submission,
+        isSubmited
+      });
+    });
     _defineProperty(this, "onChangeFormValues", values => {
       this.setState({
         submission: {
@@ -45,22 +58,26 @@ class FormAttachment extends _common.Com {
     });
     this.state = {
       submission: {},
+      formSetting: {},
       submiting: false,
       errorMessage: '',
       isSubmited: false
     };
   }
+  componentDidMount() {
+    this.fetchFormSetting();
+  }
   render() {
     let attachments = _index.default.get(this.props.ev, 'data.message.attachments') || [];
     let formAttachment = _index.default.find(attachments, att => att.type === 'form');
     if (!formAttachment) return;
     const {
       submission,
+      formSetting,
       errorMessage,
       isSubmited,
       submiting
     } = this.state;
-    let formSetting = formAttachment.form || {};
     return (0, _preact.h)("div", {
       onClick: e => e.stopPropagation()
     }, (0, _preact.h)(_Form.default, {

package/compiled_src/form/Form.js

@@ -33,8 +33,8 @@ class Form2 extends _common.Com {
       if (this.props.isSubmited) return;
       return (0, _preact.h)("div", {
         class: "form-component form-component-submit-button"
-      }, (0, _preact.h)("div", {
-        class: "form-control--valid-input--error"
+      }, this.props.errorMessage && (0, _preact.h)("div", {
+        class: "form-control--valid-input--error mb-1"
       }, this.props.errorMessage), (0, _preact.h)("div", null, (0, _preact.h)("button", {
         class: "btn--start-convo",
         disabled: this.props.submiting
@@ -89,9 +89,11 @@ class Form2 extends _common.Com {
       let val = _index.default.find(this.props.submission.values, f => f.key === com.key) || {};
       val = val.value || '""';
       val = _index.default.parseJSON(val);
+      let cls = 'form-control';
+      if (this.state.errorFields[com.key]) cls = 'form-control input--error';
       return (0, _preact.h)("input", {
         ref: this[`${com.key}_input`],
-        class: "form-control",
+        class: cls,
         type: "date",
         value: val,
         onInput: e => {

package/compiled_src/form/FormPage.js

@@ -58,7 +58,7 @@ class FormPage extends _common.Com {
       if (res.error) {
         this.setState({
           submiting: false,
-          errorMessage: _index.default.get(res, 'error.code')
+          errorMessage: this.props.t('form_submission_error')
         });
         return;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.129",
+	"version": "4.1.130",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",

package/src/chatbox/FormAttachment2.js

@@ -10,12 +10,28 @@ export default class FormAttachment extends Com {
 		super(props)
 		this.state = {
 			submission: {},
+			formSetting: {},
 			submiting: false,
 			errorMessage: '',
 			isSubmited: false,
 		}
 	}
 
+	componentDidMount() {
+		this.fetchFormSetting()
+	}
+
+	fetchFormSetting = () => {
+		let attachments = sb.get(this.props.ev, 'data.message.attachments') || []
+		let formAttachment = sb.find(attachments, (att) => att.type === 'form')
+		if (!formAttachment) return
+
+		let formSetting = formAttachment.form || {}
+		let submission = formAttachment.submission || {}
+		let isSubmited = sb.size(submission) > 0
+		this.setState({formSetting, submission, isSubmited})
+	}
+
 	onChangeFormValues = (values) => {
 		this.setState({submission: {values}})
 	}
@@ -36,8 +52,7 @@ export default class FormAttachment extends Com {
 		let attachments = sb.get(this.props.ev, 'data.message.attachments') || []
 		let formAttachment = sb.find(attachments, (att) => att.type === 'form')
 		if (!formAttachment) return
-		const {submission, errorMessage, isSubmited, submiting} = this.state
-		let formSetting = formAttachment.form || {}
+		const {submission, formSetting, errorMessage, isSubmited, submiting} = this.state
 		return (
 			<div onClick={(e) => e.stopPropagation()}>
 				<Form

package/src/form/Form.js

@@ -35,7 +35,7 @@ export default class Form2 extends Com {
 		if (this.props.isSubmited) return
 		return (
 			<div class='form-component form-component-submit-button'>
-				<div class='form-control--valid-input--error'>{this.props.errorMessage}</div>
+				{this.props.errorMessage && <div class='form-control--valid-input--error mb-1'>{this.props.errorMessage}</div>}
 				<div>
 					<button class='btn--start-convo' disabled={this.props.submiting}>
 						{com.label}
@@ -101,10 +101,12 @@ export default class Form2 extends Com {
 		let val = sb.find(this.props.submission.values, (f) => f.key === com.key) || {}
 		val = val.value || '""'
 		val = sb.parseJSON(val)
+		let cls = 'form-control'
+		if (this.state.errorFields[com.key]) cls = 'form-control input--error'
 		return (
 			<input
 				ref={this[`${com.key}_input`]}
-				class='form-control'
+				class={cls}
 				type='date'
 				value={val}
 				onInput={(e) => {

package/src/form/FormPage.js

@@ -47,7 +47,7 @@ export default class FormPage extends Com {
 		this.setState({submiting: true})
 		let res = await this.props.store.submitForm2(this.props.token, this.state.submission)
 		if (res.error) {
-			this.setState({submiting: false, errorMessage: sb.get(res, 'error.code')})
+			this.setState({submiting: false, errorMessage: this.props.t('form_submission_error')})
 			return
 		}
 		this.setState({submiting: false, isSubmited: true})