@subiz/widget-v4 4.1.130 → 4.1.132

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

@@ -19,8 +19,10 @@ class FormAttachment extends _common.Com {
       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.submission || {};
+      let submission = formAttachment.form_submission || {};
       let isSubmited = _index.default.size(submission) > 0;
       this.setState({
         formSetting,
@@ -43,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,
@@ -94,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/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,7 +54,7 @@ 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,

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/form.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderForm = renderForm;
+var _preact = require("preact");
+var _Form = _interopRequireDefault(require("./form/Form.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function renderForm(form, $div) {
+  (0, _preact.render)((0, _preact.h)(_Form.default, {
+    mode: "attachment",
+    formSetting: plugin,
+    submission: {
+      values: []
+    },
+    t: () => ''
+  }), $div);
+}

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.130",
+	"version": "4.1.132",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",

package/src/chatbox/FormAttachment2.js

@@ -26,8 +26,10 @@ export default class FormAttachment extends Com {
 		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.submission || {}
+		let submission = formAttachment.form_submission || {}
 		let isSubmited = sb.size(submission) > 0
 		this.setState({formSetting, submission, isSubmited})
 	}
@@ -40,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
@@ -71,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/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,7 +45,11 @@ 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: this.props.t('form_submission_error')})
 			return

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/form.js

@@ -0,0 +1,6 @@
+import {h, render, createRef} from 'preact'
+import Form from './form/Form.js'
+
+export function renderForm(form, $div) {
+	render(<Form mode='attachment' formSetting={plugin} submission={{values: []}} t={() => ''} />, $div)
+}

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