@subiz/widget-v4 4.1.129 → 4.1.131

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/assets/less/form.less

@@ -431,9 +431,9 @@ select {
 		margin-bottom: 0;
 	}
 
-  &.submitted {
-    margin-bottom: 8px;
-  }
+	&.submitted {
+		margin-bottom: 8px;
+	}
 }
 
 .form-wrapper.form {
@@ -457,13 +457,14 @@ select {
 .form-wrapper.form-wrapper-attachment.form {
 	padding: 12px 15px;
 	margin-top: 5px;
+	box-shadow: 0 0 0 1px #eeeeee;
 
 	input[type='text'].form-control,
 	input[type='number'].form-control,
 	input[type='date'].form-control,
 	select.form-control,
 	textarea.form-control {
-		padding: 6px 15px;
+		padding: 6px 10px;
 	}
 
 	.form-component {

package/compiled_src/chatbox/FormAttachment2.js

@@ -15,6 +15,21 @@ 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 url = formAttachment.url;
+      this.token = getUrlParameter(url, 'token');
+      let formSetting = formAttachment.form || {};
+      let submission = formAttachment.form_submission || {};
+      let isSubmited = _index.default.size(submission) > 0;
+      this.setState({
+        formSetting,
+        submission,
+        isSubmited
+      });
+    });
     _defineProperty(this, "onChangeFormValues", values => {
       this.setState({
         submission: {
@@ -30,7 +45,7 @@ class FormAttachment extends _common.Com {
       this.setState({
         submiting: true
       });
-      let res = await this.props.store.submitForm2(this.props.token, this.state.submission);
+      let res = await this.props.store.submitForm2(this.props.store.matchAccount().id, this.token, this.state.submission);
       if (res.error) {
         this.setState({
           submiting: false,
@@ -45,22 +60,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, {
@@ -77,4 +96,10 @@ class FormAttachment extends _common.Com {
     }));
   }
 }
-exports.default = FormAttachment;
+exports.default = FormAttachment;
+function getUrlParameter(url, name) {
+  name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
+  var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
+  var results = regex.exec(url);
+  return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
+}

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

@@ -20,7 +20,7 @@ class FormPage extends _common.Com {
       this.setState({
         loading: true
       });
-      let res = await this.props.store.checkFormToken(this.props.token);
+      let res = await this.props.store.checkFormToken(this.props.store.matchAccount().id, this.props.token);
       if (res.error) {
         this.setState({
           loading: false,
@@ -29,7 +29,7 @@ class FormPage extends _common.Com {
         return;
       }
       let formSetting = _index.default.get(res, 'body.form') || {};
-      let submission = _index.default.get(res, 'body.submission') || {};
+      let submission = _index.default.get(res, 'body.form_submission') || {};
       let isSubmited = _index.default.size(submission) > 0;
       this.setState({
         loading: false,
@@ -54,11 +54,11 @@ class FormPage extends _common.Com {
       this.setState({
         submiting: true
       });
-      let res = await this.props.store.submitForm2(this.props.token, this.state.submission);
+      let res = await this.props.store.submitForm2(this.props.store.matchAccount().id, this.props.token, this.state.submission);
       if (res.error) {
         this.setState({
           submiting: false,
-          errorMessage: _index.default.get(res, 'error.code')
+          errorMessage: this.props.t('form_submission_error')
         });
         return;
       }

package/compiled_src/form/index.js

@@ -33,10 +33,10 @@ _index.default.preloadWebfonts(['Inter'], [400, 500]);
 async function load() {
   let store = new _store.default(config.ApiURL, config.FileURL, config.RealtimeURL, true);
   window.store = store;
-  let accid = getUrlParameter('id') || getUrlParameter('acc_id') || getUrlParameter('account_id') || 'acqsulrowbxiugvginhw';
+  let accid = getUrlParameter('id') || getUrlParameter('accid') || getUrlParameter('account-id') || 'acqsulrowbxiugvginhw';
   let mask = accid + '@' + 'abcd';
   let token = getUrlParameter('token');
-  await store.init(accid, mask);
+  await store.init(accid);
   let acc = store.matchAccount() || {};
   let plugin = findChatbox(store) || {};
   let css = (await promiseMainCSS).default.default.toString();

package/compiled_src/store/api.js

@@ -110,8 +110,8 @@ class _default {
     _defineProperty(this, "list_provinces", () => this.apireq.get(`/accounts/${this.accid}/provinces`));
     _defineProperty(this, "list_districts", p => this.apireq.setQuery(p).get(`/accounts/${this.accid}/districts`));
     _defineProperty(this, "list_wards", p => this.apireq.setQuery(p).get(`/accounts/${this.accid}/wards`));
-    _defineProperty(this, "checkFormToken", token => this.api41.get(`/submissions/${token}`));
-    _defineProperty(this, "submitForm2", (token, data) => this.api41.post(`/submissions/${token}`, data));
+    _defineProperty(this, "checkFormToken", (accid, token) => this.api41.addQuery('account-id', accid).get(`/submissions/${token}`));
+    _defineProperty(this, "submitForm2", (accid, token, data) => this.api41.addQuery('account-id', accid).post(`/submissions/${token}`, data));
     _defineProperty(this, "suggest_address", keyword => this.apireq.setQuery({
       keyword: keyword
     }).get(`/accounts/${this.accid}/addresses`));

package/compiled_src/store/store.js

@@ -135,8 +135,8 @@ class Store {
     _defineProperty(this, "matchIsOpen", () => !!this.kv.match('isopen'));
     _defineProperty(this, "matchHasManuallyClosed", () => !!this.kv.match('hasManuallyClosed'));
     _defineProperty(this, "matchClosePreviewAt", () => this.kv.match('close_preview_at') || 0);
-    _defineProperty(this, "checkFormToken", token => this.api.checkFormToken(token));
-    _defineProperty(this, "submitForm2", (token, data) => this.api.submitForm2(token, data));
+    _defineProperty(this, "checkFormToken", (accid, token) => this.api.checkFormToken(accid, token));
+    _defineProperty(this, "submitForm2", (accid, token, data) => this.api.submitForm2(accid, token, data));
     _defineProperty(this, "sendPresence", _index.default.throttle(async () => {
       if (this._die) return dieErr;
       await this.readyGate.entry();

package/package.json

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

package/src/chatbox/FormAttachment2.js

@@ -10,12 +10,30 @@ 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 url = formAttachment.url
+		this.token = getUrlParameter(url, 'token')
+		let formSetting = formAttachment.form || {}
+		let submission = formAttachment.form_submission || {}
+		let isSubmited = sb.size(submission) > 0
+		this.setState({formSetting, submission, isSubmited})
+	}
+
 	onChangeFormValues = (values) => {
 		this.setState({submission: {values}})
 	}
@@ -24,7 +42,7 @@ export default class FormAttachment extends Com {
 		this.setState({errorMessage: ''})
 		if (this.state.submiting) return
 		this.setState({submiting: true})
-		let res = await this.props.store.submitForm2(this.props.token, this.state.submission)
+		let res = await this.props.store.submitForm2(this.props.store.matchAccount().id, this.token, this.state.submission)
 		if (res.error) {
 			this.setState({submiting: false, errorMessage: sb.get(res, 'error.code')})
 			return
@@ -36,8 +54,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
@@ -56,3 +73,10 @@ export default class FormAttachment extends Com {
 		)
 	}
 }
+
+function getUrlParameter(url, name) {
+	name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]')
+	var regex = new RegExp('[\\?&]' + name + '=([^&#]*)')
+	var results = regex.exec(url)
+	return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '))
+}

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

@@ -26,13 +26,13 @@ export default class FormPage extends Com {
 	fetchFormSetting = async () => {
 		if (this.state.loading) return
 		this.setState({loading: true})
-		let res = await this.props.store.checkFormToken(this.props.token)
+		let res = await this.props.store.checkFormToken(this.props.store.matchAccount().id, this.props.token)
 		if (res.error) {
 			this.setState({loading: false, loadError: true})
 			return
 		}
 		let formSetting = sb.get(res, 'body.form') || {}
-		let submission = sb.get(res, 'body.submission') || {}
+		let submission = sb.get(res, 'body.form_submission') || {}
 		let isSubmited = sb.size(submission) > 0
 		this.setState({loading: false, loadError: false, formSetting, submission, isSubmited})
 	}
@@ -45,9 +45,13 @@ export default class FormPage extends Com {
 		this.setState({errorMessage: ''})
 		if (this.state.submiting) return
 		this.setState({submiting: true})
-		let res = await this.props.store.submitForm2(this.props.token, this.state.submission)
+		let res = await this.props.store.submitForm2(
+			this.props.store.matchAccount().id,
+			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})

package/src/form/index.js

@@ -35,10 +35,10 @@ async function load() {
 	let store = new Store(config.ApiURL, config.FileURL, config.RealtimeURL, true)
 	window.store = store
 	let accid =
-		getUrlParameter('id') || getUrlParameter('acc_id') || getUrlParameter('account_id') || 'acqsulrowbxiugvginhw'
+		getUrlParameter('id') || getUrlParameter('accid') || getUrlParameter('account-id') || 'acqsulrowbxiugvginhw'
 	let mask = accid + '@' + 'abcd'
   let token = getUrlParameter('token')
-	await store.init(accid, mask)
+	await store.init(accid)
 
 	let acc = store.matchAccount() || {}
 	let plugin = findChatbox(store) || {}

package/src/store/api.js

@@ -322,8 +322,8 @@ export default class {
 	list_districts = (p) => this.apireq.setQuery(p).get(`/accounts/${this.accid}/districts`)
 	list_wards = (p) => this.apireq.setQuery(p).get(`/accounts/${this.accid}/wards`)
 
-	checkFormToken = (token) => this.api41.get(`/submissions/${token}`)
-	submitForm2 = (token, data) => this.api41.post(`/submissions/${token}`, data)
+	checkFormToken = (accid, token) => this.api41.addQuery('account-id', accid).get(`/submissions/${token}`)
+	submitForm2 = (accid, token, data) => this.api41.addQuery('account-id', accid).post(`/submissions/${token}`, data)
 	suggest_address = (keyword) => this.apireq.setQuery({keyword: keyword}).get(`/accounts/${this.accid}/addresses`)
 	create_ticket = (ticket) => this.apireq.post(`/accounts/${this.accid}/tickets`, ticket)
 }

package/src/store/store.js

@@ -434,8 +434,8 @@ export default class Store {
 	matchHasManuallyClosed = () => !!this.kv.match('hasManuallyClosed') // true if user has ever closed the widget
 	matchClosePreviewAt = () => this.kv.match('close_preview_at') || 0
 
-	checkFormToken = (token) => this.api.checkFormToken(token)
-	submitForm2 = (token, data) =>  this.api.submitForm2(token, data)
+	checkFormToken = (accid, token) => this.api.checkFormToken(accid, token)
+	submitForm2 = (accid, token, data) =>  this.api.submitForm2(accid, token, data)
 	sendPresence = sb.throttle(
 		async () => {
 			if (this._die) return dieErr