@subiz/widget-v4 4.1.142 → 4.1.144

package/dist/screenshoot.js

@@ -691,13 +691,11 @@ var {xhrsend, parseJSON, Pubsub} = __webpack_require__(7695)
 function Conn(apiUrl, credential, onDead, onEvents, callAPI, accid) {
 	callAPI = callAPI || xhrsend // allow hook
 	credential = credential || {}
-
 	var lastToken = ''
 	if (!accid) accid = ''
-
 	var is_dead = false // tell if the connection is dead
 	var is_polling_stuck = false // tell if we've having trouble doing /poll
-	var is_sub_stuck = false // tell if we've having trouble doing /subscribe
+	var is_sub_stuck = true // tell if we've having trouble doing /subscribe
 
 	// The long polling loop runs sequentially, with each poll starting immediately
 	// after the previous one completes. If an error occurs, the loop will pause
@@ -706,7 +704,7 @@ function Conn(apiUrl, credential, onDead, onEvents, callAPI, accid) {
 	// The first loop begins after the first subscription call completes successfully
 	var polling = function (backoff) {
 		if (is_dead) return
-		callAPI('get', apiUrl + 'poll?token=' + lastToken + '&account-id=' + accid, undefined, function (body, code) {
+		callAPI('get', apiUrl + 'poll?token=' + lastToken + '&v=5&account-id=' + accid, undefined, function (body, code) {
 			if (is_dead) return
 			if (retryable(code)) {
 				is_polling_stuck = true
@@ -751,6 +749,7 @@ function Conn(apiUrl, credential, onDead, onEvents, callAPI, accid) {
 			// too long, kill
 			if (done) return
 			done = true
+			is_sub_stuck = true
 			resolve(repeat('dead', topics.length))
 			if (is_dead) return
 			kill('subs')
@@ -774,7 +773,8 @@ function Conn(apiUrl, credential, onDead, onEvents, callAPI, accid) {
 					else if (credential.user_mask) query += '&user-mask=' + encodeURIComponent(credential.user_mask)
 					else if (access_token) query += '&access-token=' + access_token
 
-					var fullurl = apiUrl + 'subs' + query + '&account-id=' + encodeURIComponent(accid || credential.account_id)
+					var fullurl =
+						apiUrl + 'subs' + query + '&v=5&account-id=' + encodeURIComponent(accid || credential.account_id)
 					callAPI('post', fullurl, JSON.stringify({events: topics}), function (body, code) {
 						if (done) return
 						if (is_dead) {
@@ -884,7 +884,7 @@ function Realtime(apiUrls, credential, callAPI, accid, skipautoreconnect) {
 		return conn.getStatus()
 	}
 
-	this.subscribe = function (events) {
+	var subscribe = function (events) {
 		if (!conn) return Promise.resolve({error: 'dead'})
 		if (typeof events === 'string') events = [events]
 		if (!Array.isArray(events)) return Promise.resolve({error: 'param should be an array or string'})
@@ -904,20 +904,22 @@ function Realtime(apiUrls, credential, callAPI, accid, skipautoreconnect) {
 			return {}
 		})
 	}
+	this.subscribe = subscribe
 
 	// reconnect make sure there is alway a Conn running in the background
 	// if the Conn is dead, it recreate a new one
 	var conn
-	this.reconnect = function () {
+	var reconnect = function () {
 		var randomUrl = apiUrls[Math.floor(Math.random() * apiUrls.length)]
 		if (conn) conn.kill() // kill old connection
-		let myconn = new Conn(
+		var myconn = new Conn(
 			randomUrl,
 			credential,
 			function (code, body, status) {
 				if (myconn != conn) return // outdated
+				conn = undefined // prevent dupplicate dead fire
 				pubsub.emit('interrupted', code, body, status)
-				if (!skipautoreconnect) setTimeout(this.reconnect, 2000) // reconnect and resubscribe after 2 sec
+				// if (!skipautoreconnect) setTimeout(reconnect, 2000) // reconnect and resubscribe after 2 sec
 			},
 			function (events) {
 				if (myconn != conn) return
@@ -927,13 +929,13 @@ function Realtime(apiUrls, credential, callAPI, accid, skipautoreconnect) {
 			accid,
 		)
 		conn = myconn
-
 		var copyTopics = Object.keys(topics)
 		topics = {}
 		// resubscribe all subscribed events
-		return this.subscribe(copyTopics)
+		return subscribe(copyTopics)
 	}
-	this.reconnect()
+	this.reconnect = reconnect
+	reconnect()
 }
 
 // calcNextBackoff returns number of seconds we must wait
@@ -2772,6 +2774,13 @@ function replaceCssVariable(css, setting) {
   tokens = tokenize(tokens, "'@z_index_3'");
   tokens = tokenize(tokens, "'@z_index_4'");
   tokens = tokenize(tokens, "'@z_index_5'");
+  tokens = tokenize(tokens, "'@form_background_color'");
+  tokens = tokenize(tokens, "'@form_header_font_size'");
+  tokens = tokenize(tokens, "'@form_header_font_family'");
+  tokens = tokenize(tokens, "'@form_desc_font_size'");
+  tokens = tokenize(tokens, "'@form_desc_font_family'");
+  tokens = tokenize(tokens, "'@form_input_label_font_size'");
+  tokens = tokenize(tokens, "'@form_input_label_font_family'");
   var primary_color = op.get(setting, 'primary_color') || op.get(DEFVAL, 'primary_color');
   let parseColor = parseCssColor(primary_color);
   if (!parseColor) parseColor = {
@@ -2817,7 +2826,7 @@ function replaceCssVariable(css, setting) {
     var path = item.type.substr(2, item.type.length - 3);
     var val = op.get(setting, path) || op.get(DEFVAL, path) || '';
     val = norm2(val);
-    if (['mobile_button.width', 'mobile_button.height', 'mobile_button.margin_x', 'mobile_button.margin_y', 'desktop_button.width', 'desktop_button.height', 'desktop_button.margin_x', 'desktop_button.margin_y', 'width', 'height'].includes(path)) {
+    if (['mobile_button.width', 'mobile_button.height', 'mobile_button.margin_x', 'mobile_button.margin_y', 'desktop_button.width', 'desktop_button.height', 'desktop_button.margin_x', 'desktop_button.margin_y', 'form_header_font_size', 'form_desc_font_size', 'form_input_label_font_size', 'width', 'height'].includes(path)) {
       val += 'px';
     }
     if (path === 'height' && op.get(setting, 'window_mode') === 'full') {
@@ -3793,8 +3802,8 @@ function jsonifyTextPlain(param, done) {
     _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`));
@@ -4849,8 +4858,8 @@ class Store {
     store_defineProperty(this, "matchIsOpen", () => !!this.kv.match('isopen'));
     store_defineProperty(this, "matchHasManuallyClosed", () => !!this.kv.match('hasManuallyClosed'));
     store_defineProperty(this, "matchClosePreviewAt", () => this.kv.match('close_preview_at') || 0);
-    store_defineProperty(this, "checkFormToken", token => this.api.checkFormToken(token));
-    store_defineProperty(this, "submitForm2", (token, data) => this.api.submitForm2(token, data));
+    store_defineProperty(this, "checkFormToken", (accid, token) => this.api.checkFormToken(accid, token));
+    store_defineProperty(this, "submitForm2", (accid, token, data) => this.api.submitForm2(accid, token, data));
     store_defineProperty(this, "sendPresence", util/* default */.A.throttle(async () => {
       if (this._die) return dieErr;
       await this.readyGate.entry();
@@ -7395,6 +7404,128 @@ class QuickReplies extends common/* Com */.Mw {
     }, $replies);
   }
 }
+;// ./src/form/rating-stars.js
+function rating_stars_defineProperty(e, r, t) { return (r = rating_stars_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function rating_stars_toPropertyKey(t) { var i = rating_stars_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function rating_stars_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+
+
+
+class rating_stars_Form2 extends common/* Com */.Mw {
+  constructor(props) {
+    super(props);
+    rating_stars_defineProperty(this, "state", {
+      hovering: 0,
+      selected: 0
+    });
+    rating_stars_defineProperty(this, "onMouseEnter", v => {
+      let {
+        selected,
+        hovering
+      } = this.state;
+      if (v <= selected) {
+        this.setState({
+          hovering: selected
+        });
+        return;
+      }
+      this.setState({
+        hovering: v
+      });
+    });
+    rating_stars_defineProperty(this, "onMouseLeave", () => {
+      let {
+        selected,
+        hovering
+      } = this.state;
+      this.setState({
+        hovering: 0
+      });
+    });
+  }
+  onToggleValue(v) {
+    let {
+      selected
+    } = this.state;
+    let newVal = v;
+    if (v === selected) newVal = 0;
+    this.setState({
+      selected: newVal,
+      hovering: newVal
+    });
+    this.props.onChange(newVal);
+  }
+  render() {
+    let {
+      selected,
+      hovering
+    } = this.state;
+    let star1Cls = 'star-wrapper';
+    if (selected >= 1) {
+      star1Cls += ' selected';
+    } else if (hovering >= 1) {
+      star1Cls += ' hovering';
+    }
+    let star2Cls = 'star-wrapper';
+    if (selected >= 2) {
+      star2Cls += ' selected';
+    } else if (hovering >= 2) {
+      star2Cls += ' hovering';
+    }
+    let star3Cls = 'star-wrapper';
+    if (selected >= 3) {
+      star3Cls += ' selected';
+    } else if (hovering >= 3) {
+      star3Cls += ' hovering';
+    }
+    let star4Cls = 'star-wrapper';
+    if (selected >= 4) {
+      star4Cls += ' selected';
+    } else if (hovering >= 4) {
+      star4Cls += ' hovering';
+    }
+    let star5Cls = 'star-wrapper';
+    if (selected >= 5) {
+      star5Cls += ' selected';
+    } else if (hovering >= 5) {
+      star5Cls += ' hovering';
+    }
+    return (0,preact_module.h)("div", {
+      class: "form-ratings-wrapper",
+      onMouseLeave: () => this.onMouseLeave()
+    }, (0,preact_module.h)("div", {
+      class: star1Cls,
+      onClick: () => this.onToggleValue(1),
+      onMouseEnter: () => this.onMouseEnter(1)
+    }, (0,preact_module.h)("div", {
+      class: "star"
+    })), (0,preact_module.h)("div", {
+      class: star2Cls,
+      onClick: () => this.onToggleValue(2),
+      onMouseEnter: () => this.onMouseEnter(2)
+    }, (0,preact_module.h)("div", {
+      class: "star"
+    })), (0,preact_module.h)("div", {
+      class: star3Cls,
+      onClick: () => this.onToggleValue(3),
+      onMouseEnter: () => this.onMouseEnter(3)
+    }, (0,preact_module.h)("div", {
+      class: "star"
+    })), (0,preact_module.h)("div", {
+      class: star4Cls,
+      onClick: () => this.onToggleValue(4),
+      onMouseEnter: () => this.onMouseEnter(4)
+    }, (0,preact_module.h)("div", {
+      class: "star"
+    })), (0,preact_module.h)("div", {
+      class: star5Cls,
+      onClick: () => this.onToggleValue(5),
+      onMouseEnter: () => this.onMouseEnter(5)
+    }, (0,preact_module.h)("div", {
+      class: "star"
+    })));
+  }
+}
 ;// ./src/form/Form.js
 function Form_defineProperty(e, r, t) { return (r = Form_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function Form_toPropertyKey(t) { var i = Form_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
@@ -7403,6 +7534,7 @@ function Form_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var
 
 
 
+
 class Form2 extends common/* Com */.Mw {
   constructor(props) {
     super(props);
@@ -7412,7 +7544,7 @@ class Form2 extends common/* Com */.Mw {
     });
     Form_defineProperty(this, "renderFormComponent", (com, idx) => {
       if (com.type === 'input') return this.renderField(com, idx);
-      if (com.type === 'submit_button') return this.renderSubmitButton(com, idx);
+      if (com.type === 'button') return this.renderSubmitButton(com, idx);
       if (this.props.isSubmited) return;
       return (0,preact_module.h)("div", {
         class: "form-component form-component-block"
@@ -7424,8 +7556,8 @@ class Form2 extends common/* Com */.Mw {
       if (this.props.isSubmited) return;
       return (0,preact_module.h)("div", {
         class: "form-component form-component-submit-button"
-      }, (0,preact_module.h)("div", {
-        class: "form-control--valid-input--error"
+      }, this.props.errorMessage && (0,preact_module.h)("div", {
+        class: "form-control--valid-input--error mb-1"
       }, this.props.errorMessage), (0,preact_module.h)("div", null, (0,preact_module.h)("button", {
         class: "btn--start-convo",
         disabled: this.props.submiting
@@ -7434,7 +7566,7 @@ class Form2 extends common/* Com */.Mw {
     Form_defineProperty(this, "renderField", (com, idx) => {
       let errorMsg = this.state.errorFields[com.key];
       if (this.props.isSubmited) {
-        let val = util/* default */.A.find(this.props.formValues, f => f.key === com.key) || {};
+        let val = util/* default */.A.find(this.props.submission.values, f => f.key === com.key) || {};
         val = val.value || '""';
         val = util/* default */.A.parseJSON(val);
         if (Array.isArray(val)) val = val.join(', ');
@@ -7454,14 +7586,14 @@ class Form2 extends common/* Com */.Mw {
         class: "label"
       }, com.label, " ", com.is_required && (0,preact_module.h)("span", {
         class: "red"
-      }, "*")), com.input_type === 'text' && this.renderFieldTextInput(com, idx), com.input_type === 'multiple' && this.renderFieldTextareaInput(com, idx), com.input_type === 'date' && this.renderFieldDateInput(com, idx), com.input_type === 'radio' && this.renderFieldRadioInput(com, idx), com.input_type === 'checkbox' && this.renderFieldCheckboxInput(com, idx), com.input_type === 'dropdown' && this.renderFieldDropdownInput(com, idx), errorMsg && (0,preact_module.h)("div", {
+      }, "*")), com.input_type === 'text' && this.renderFieldTextInput(com, idx), com.input_type === 'textarea' && this.renderFieldTextareaInput(com, idx), com.input_type === 'date' && this.renderFieldDateInput(com, idx), com.input_type === 'radio' && this.renderFieldRadioInput(com, idx), com.input_type === 'checkbox' && this.renderFieldCheckboxInput(com, idx), (com.input_type === 'dropdown' || com.input_type === 'select') && this.renderFieldDropdownInput(com, idx), com.input_type === 'rating' && this.renderFieldRatingInput(com, idx), errorMsg && (0,preact_module.h)("div", {
         class: "form-control--valid-input--error"
       }, errorMsg));
     });
     Form_defineProperty(this, "renderFieldTextInput", (com, idx) => {
       let cls = 'form-control';
       if (this.state.errorFields[com.key]) cls = 'form-control input--error';
-      let val = util/* default */.A.find(this.props.formValues, f => f.key === com.key) || {};
+      let val = util/* default */.A.find(this.props.submission.values, f => f.key === com.key) || {};
       val = val.value || '""';
       val = util/* default */.A.parseJSON(val);
       return (0,preact_module.h)("input", {
@@ -7477,12 +7609,14 @@ class Form2 extends common/* Com */.Mw {
       });
     });
     Form_defineProperty(this, "renderFieldDateInput", (com, idx) => {
-      let val = util/* default */.A.find(this.props.formValues, f => f.key === com.key) || {};
+      let val = util/* default */.A.find(this.props.submission.values, f => f.key === com.key) || {};
       val = val.value || '""';
       val = util/* default */.A.parseJSON(val);
+      let cls = 'form-control';
+      if (this.state.errorFields[com.key]) cls = 'form-control input--error';
       return (0,preact_module.h)("input", {
         ref: this[`${com.key}_input`],
-        class: "form-control",
+        class: cls,
         type: "date",
         value: val,
         onInput: e => {
@@ -7492,10 +7626,14 @@ class Form2 extends common/* Com */.Mw {
       });
     });
     Form_defineProperty(this, "renderFieldRadioInput", (com, idx) => {
-      let val = util/* default */.A.find(this.props.formValues, f => f.key === com.key) || {};
+      let val = util/* default */.A.find(this.props.submission.values, f => f.key === com.key) || {};
       val = val.value || '""';
       val = util/* default */.A.parseJSON(val);
-      return util/* default */.A.map(com.input_options, (option, oidx) => {
+      let wrappercls = 'form-radios-wrapper';
+      if (util/* default */.A.size(com.input_options) >= 3 && this.props.mode !== 'attachment') wrappercls += ' horizontal';
+      return (0,preact_module.h)("div", {
+        class: wrappercls
+      }, util/* default */.A.map(com.input_options, (option, oidx) => {
         let id = com.key + '_' + oidx;
         return (0,preact_module.h)("div", {
           class: "radio"
@@ -7511,13 +7649,17 @@ class Form2 extends common/* Com */.Mw {
         }, option.label), (0,preact_module.h)("div", {
           class: "radio--check"
         }));
-      });
+      }));
     });
     Form_defineProperty(this, "renderFieldCheckboxInput", (com, idx) => {
-      let val = util/* default */.A.find(this.props.formValues, f => f.key === com.key) || {};
+      let val = util/* default */.A.find(this.props.submission.values, f => f.key === com.key) || {};
       val = val.value || '[]';
       val = util/* default */.A.parseJSON(val);
-      return util/* default */.A.map(com.input_options, (option, oidx) => {
+      let wrappercls = 'form-checkboxes-wrapper';
+      if (util/* default */.A.size(com.input_options) >= 3 && this.props.mode !== 'attachment') wrappercls += ' horizontal';
+      return (0,preact_module.h)("div", {
+        class: wrappercls
+      }, util/* default */.A.map(com.input_options, (option, oidx) => {
         let id = com.key + '_' + oidx;
         return (0,preact_module.h)("div", {
           class: "checkbox"
@@ -7533,27 +7675,32 @@ class Form2 extends common/* Com */.Mw {
         }, option.label), (0,preact_module.h)("div", {
           class: "checkbox--check"
         }));
-      });
+      }));
     });
     Form_defineProperty(this, "renderFieldDropdownInput", (com, idx) => {
-      let val = util/* default */.A.find(this.props.formValues, f => f.key === com.key) || {};
+      let val = util/* default */.A.find(this.props.submission.values, f => f.key === com.key) || {};
       val = val.value || '""';
       val = util/* default */.A.parseJSON(val);
+      let cls = 'form-control';
+      if (this.state.errorFields[com.key]) cls += ' input--error';
+      if (!val) cls += ' form-control--empty';
       return (0,preact_module.h)("select", {
-        class: "form-control",
+        class: cls,
         ref: this[`${com.key}_input`],
         onChange: e => {
           this.onChangeValue(com.key, e.target.value);
           this.clearError(com.key);
         }
-      }, util/* default */.A.map(com.input_options, option => {
+      }, (0,preact_module.h)("option", {
+        value: ""
+      }, "-- ", this.props.t('no_select'), " --"), util/* default */.A.map(com.input_options, option => {
         return (0,preact_module.h)("option", {
           value: option.value
         }, option.label);
       }));
     });
     Form_defineProperty(this, "renderFieldTextareaInput", (com, idx) => {
-      let val = util/* default */.A.find(this.props.formValues, f => f.key === com.key) || {};
+      let val = util/* default */.A.find(this.props.submission.values, f => f.key === com.key) || {};
       val = val.value || '""';
       val = util/* default */.A.parseJSON(val);
       return (0,preact_module.h)("textarea", {
@@ -7567,6 +7714,11 @@ class Form2 extends common/* Com */.Mw {
         placeholder: com.placeholder
       });
     });
+    Form_defineProperty(this, "renderFieldRatingInput", (com, idx) => {
+      return (0,preact_module.h)(rating_stars_Form2, {
+        onChange: v => this.onChangeValue(com.key, v)
+      });
+    });
     Form_defineProperty(this, "onSubmit", e => {
       e.preventDefault();
       if (!this.validateForm()) return;
@@ -7579,18 +7731,42 @@ class Form2 extends common/* Com */.Mw {
       let components = util/* default */.A.get(this.props.formSetting, 'components') || [];
       util/* default */.A.each(components, com => {
         if (com.type === 'input') {
+          let val = util/* default */.A.find(this.props.submission.values, f => f.key === com.key) || {};
+          val = val.value || '""';
+          val = util/* default */.A.parseJSON(val);
           if (com.is_required) {
-            let val = util/* default */.A.find(this.props.formValues, f => f.key === com.key) || {};
-            val = val.value || '""';
-            val = util/* default */.A.parseJSON(val);
-            if (typeof val === 'string' && !val.trim()) {
+            let isEmpty = false;
+            if (typeof val === 'string' && !val.trim()) isEmpty = true;
+            if (Array.isArray(val) && val.length === 0) isEmpty = true;
+            if (isEmpty) {
               result = false;
               errors[com.key] = this.props.t('cannot_be_empty');
-              if (!ref && com.input_type !== 'checkbox' && com.input_type !== 'radio') ref = `${com.key}_input`;
+              ref = `${com.key}_input`;
             }
-            if (Array.isArray(val) && val.length === 0) {
+          }
+          if (com.validation && !Array.isArray(val)) {
+            let isInvalid = false;
+            let validationText = '';
+            if (com.validation === 'email' && !util/* default */.A.isEmail(val)) {
+              validationText = 'Email';
+              isInvalid = true;
+            }
+            if (com.validation === 'phone' && !util/* default */.A.isPhone(val)) {
+              validationText = this.props.t('phn');
+              isInvalid = true;
+            }
+            if (com.validation === 'number' && !util/* default */.A.isNumber(val)) {
+              validationText = this.props.t('number');
+              isInvalid = true;
+            }
+            if (com.validation === 'url' && !util/* default */.A.isURL(val)) {
+              isInvalid = true;
+              validationText = 'URL';
+            }
+            if (isInvalid) {
               result = false;
-              errors[com.key] = this.props.t('cannot_be_empty');
+              errors[com.key] = this.props.t('format_is_invalid') + ' ' + validationText;
+              ref = `${com.key}_input`;
             }
           }
         }
@@ -7604,7 +7780,7 @@ class Form2 extends common/* Com */.Mw {
       return result;
     });
     Form_defineProperty(this, "onChangeValue", (key, v) => {
-      let formValues = this.props.formValues;
+      let formValues = util/* default */.A.get(this.props.submission, 'values') || [];
       let f = util/* default */.A.find(formValues, field => field.key === key);
       if (!f) {
         formValues.push({
@@ -7623,6 +7799,43 @@ class Form2 extends common/* Com */.Mw {
         errorFields: errors
       });
     });
+    Form_defineProperty(this, "renderFormHeader", () => {
+      let title = util/* default */.A.get(this.props.formSetting, 'title') || '';
+      let desc = util/* default */.A.get(this.props.formSetting, 'description') || '';
+      if (this.props.mode === 'attachment') {
+        if (title.trim() || desc.trim()) {
+          return (0,preact_module.h)("div", {
+            class: "form-component form-component-block"
+          }, title && (0,preact_module.h)("div", null, title), desc && (0,preact_module.h)("div", {
+            class: "text-sm text-muted"
+          }, desc));
+        }
+      }
+      let brandLogo = util/* default */.A.get(this.props.formSetting, 'logo.url');
+      let brandUrl = util/* default */.A.get(this.props.formSetting, 'brand_url');
+      let $logo = null;
+      if (brandLogo) {
+        $logo = (0,preact_module.h)("div", {
+          class: "form-page-logo-wrapper"
+        }, (0,preact_module.h)("a", {
+          href: brandUrl || 'javascript:;'
+        }, (0,preact_module.h)("img", {
+          src: brandLogo,
+          class: "form-page-logo"
+        })));
+      }
+      let $header = null;
+      if (title.trim() || desc.trim()) {
+        $header = (0,preact_module.h)("div", {
+          class: "form-page-header"
+        }, (0,preact_module.h)("div", {
+          class: "form-page-title"
+        }, title), desc && (0,preact_module.h)("div", {
+          class: "form-page-desc"
+        }, desc));
+      }
+      return (0,preact_module.h)(preact_module/* Fragment */.FK, null, $logo, $header);
+    });
     let _components = util/* default */.A.get(this.props.formSetting, 'components') || [];
     util/* default */.A.each(_components, com => {
       if (com.type === 'input' && com.input_type !== 'checkbox' && com.input_type !== 'radio') {
@@ -7635,7 +7848,7 @@ class Form2 extends common/* Com */.Mw {
     this.onChangeValue(key, v);
   }
   toggleCheckboxField(key, v) {
-    let currentValues = util/* default */.A.find(this.props.formValues, f => f.key === key) || {};
+    let currentValues = util/* default */.A.find(this.props.submission.values, f => f.key === key) || {};
     currentValues = currentValues.value || '[]';
     currentValues = util/* default */.A.parseJSON(currentValues);
     if (currentValues.includes(v)) {
@@ -7648,6 +7861,8 @@ class Form2 extends common/* Com */.Mw {
   }
   render() {
     let components = util/* default */.A.get(this.props.formSetting, 'components') || [];
+    let title = util/* default */.A.get(this.props.formSetting, 'title') || '';
+    let desc = util/* default */.A.get(this.props.formSetting, 'description') || '';
     let cls = 'form-wrapper form';
     if (this.props.mode === 'attachment') cls += ' form-wrapper-attachment';
     return (0,preact_module.h)("div", {
@@ -7656,7 +7871,7 @@ class Form2 extends common/* Com */.Mw {
       class: "form-component"
     }, this.props.t('you_have_submitted_info_successfully')), (0,preact_module.h)("form", {
       onSubmit: this.onSubmit
-    }, util/* default */.A.map(components, this.renderFormComponent)));
+    }, this.renderFormHeader(), util/* default */.A.map(components, this.renderFormComponent)));
   }
 }
 ;// ./src/chatbox/FormAttachment2.js
@@ -7670,20 +7885,29 @@ function FormAttachment2_toPrimitive(t, r) { if ("object" != typeof t || !t) ret
 class FormAttachment extends common/* Com */.Mw {
   constructor(props) {
     super(props);
-    FormAttachment2_defineProperty(this, "state", {
-      formValues: [],
-      submiting: false,
-      isSubmited: false,
-      errorMessage: '',
-      step: 1
+    FormAttachment2_defineProperty(this, "fetchFormSetting", () => {
+      let attachments = util/* default */.A.get(this.props.ev, 'data.message.attachments') || [];
+      let formAttachment = util/* default */.A.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 = util/* default */.A.size(submission) > 0;
+      this.setState({
+        formSetting,
+        submission,
+        isSubmited
+      });
     });
     FormAttachment2_defineProperty(this, "onChangeFormValues", values => {
       this.setState({
-        formValues: values
+        submission: {
+          values
+        }
       });
     });
     FormAttachment2_defineProperty(this, "onSubmit", async () => {
-      console.log('submittttttt', this.state.formValues);
       this.setState({
         errorMessage: ''
       });
@@ -7691,72 +7915,41 @@ class FormAttachment extends common/* Com */.Mw {
       this.setState({
         submiting: true
       });
-      await util/* default */.A.sleep(1_500);
+      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: util/* default */.A.get(res, 'error.code')
+        });
+        return;
+      }
       this.setState({
         submiting: false,
         isSubmited: true
       });
     });
+    this.state = {
+      submission: {},
+      formSetting: {},
+      submiting: false,
+      errorMessage: '',
+      isSubmited: false
+    };
+  }
+  componentDidMount() {
+    this.fetchFormSetting();
   }
   render() {
-    if (this.props.ev.id !== 'evshpgaeetsplfqprzmynrvrl') return;
-    const formSetting = {
-      components: [{
-        type: 'text',
-        text: 'Đặt lịch khám'
-      }, {
-        type: 'input',
-        key: 'fullname',
-        default_value: '234',
-        link_attribute: 'email',
-        placeholder: 'Nguyen Van A',
-        label: 'Họ và tên',
-        input_type: 'text',
-        is_required: true
-      }, {
-        type: 'input',
-        key: 'phone',
-        validation: 'phone',
-        label: 'SĐT',
-        input_type: 'text',
-        is_required: true
-      }, {
-        type: 'input',
-        label: 'Chọn ca',
-        is_required: true,
-        input_type: 'radio',
-        key: 'shift',
-        input_options: [{
-          value: 'Buổi sáng',
-          label: 'Buổi sáng'
-        }, {
-          value: 'Buổi chiều',
-          label: 'Buổi chiều'
-        }]
-      }, {
-        type: 'input',
-        label: 'Chọn ca 2',
-        is_required: true,
-        input_type: 'checkbox',
-        key: 'shift_2',
-        input_options: [{
-          value: 'Buổi sáng',
-          label: 'Buổi sáng'
-        }, {
-          value: 'Buổi chiều',
-          label: 'Buổi chiều'
-        }]
-      }, {
-        type: 'input',
-        key: 'schedule',
-        label: 'Chọn ngày',
-        is_required: true,
-        input_type: 'date'
-      }, {
-        type: 'submit_button',
-        label: 'Submit'
-      }]
-    };
+    let attachments = util/* default */.A.get(this.props.ev, 'data.message.attachments') || [];
+    let formAttachment = util/* default */.A.find(attachments, att => att.type === 'form');
+    if (!formAttachment) return;
+    const {
+      submission,
+      formSetting,
+      errorMessage,
+      isSubmited,
+      submiting
+    } = this.state;
     return (0,preact_module.h)("div", {
       onClick: e => e.stopPropagation()
     }, (0,preact_module.h)(Form2, {
@@ -7764,15 +7957,21 @@ class FormAttachment extends common/* Com */.Mw {
       formSetting: formSetting,
       mode: "attachment",
       t: this.props.t,
-      formValues: this.state.formValues,
-      errorMessage: this.state.errorMessage,
-      isSubmited: this.state.isSubmited,
-      submiting: this.state.submiting,
+      submission: submission,
+      errorMessage: errorMessage,
+      isSubmited: isSubmited,
+      submiting: submiting,
       onChangeFormValues: this.onChangeFormValues,
       onSubmit: this.onSubmit
     }));
   }
 }
+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, ' '));
+}
 ;// ./src/chatbox/FormSubmitAttachments.js
 
 
@@ -9985,9 +10184,9 @@ class Widget extends common/* Com */.Mw {
           });
         } else if (util/* default */.A.get(field, 'def.select') === 'checkbox') {
           $field = this.renderCheckboxField(field);
-        } else if (util/* default */.A.get(field, 'def.select') === 'radio') {
+        } else if (util/* default */.A.get(field, 'def.select') === 'radio' && util/* default */.A.size(util/* default */.A.get(field, 'def.items', [])) < 5) {
           $field = this.renderRadioField(field);
-        } else if (util/* default */.A.get(field, 'def.select') === 'dropdown') {
+        } else if (util/* default */.A.get(field, 'def.select') === 'dropdown' || util/* default */.A.size(util/* default */.A.get(field, 'def.items', [])) >= 5) {
           $field = this.renderDropdownField(field);
         } else {
           $field = (0,preact_module.h)("input", {