@subiz/widget-v4 4.1.135 → 4.1.137

package/assets/less/chatbox.less

@@ -19,6 +19,14 @@
 @desktop-chat-button-margin-x: '@desktop_button.margin_x'; //20px;
 @desktop-chat-button-margin-y: '@desktop_button.margin_y'; // 20px;
 
+@form-page-background-color: '@form_background_color';
+@form-page-header-font-size: '@form_header_font_size';
+@form-page-header-font-family: '@form_header_font_family';
+@form-page-desc-font-size: '@form_desc_font_size';
+@form-page-desc-font-family: '@form_desc_font_family';
+@form-page-input-label-font-size: '@form_input_label_font_size';
+@form-page-input-label-font-family: '@form_input_label_font_family';
+
 @mobile-chat-button-width: '@mobile_button.width'; // 70px;
 @mobile-chat-button-height: '@mobile_button.height'; //70px;
 @mobile-chat-button-background: '@background'; // '@mobile_button.background';
@@ -151,6 +159,9 @@ body div#sbz92 {
 	.text-xl {
 		font-size: 20px;
 	}
+  .text-sm {
+    font-size: 14px;
+  }
 	.text-center {
 		text-align: center;
 	}

package/assets/less/form-page.less

@@ -0,0 +1,310 @@
+@primary-color: '@primary_color'; //
+@form-page-background-color: '@form_background_color';
+@form-page-header-font-size: '@form_header_font_size';
+@form-page-header-font-family: '@form_header_font_family';
+@form-page-desc-font-size: '@form_desc_font_size';
+@form-page-desc-font-family: '@form_desc_font_family';
+@form-page-input-label-font-size: '@form_input_label_font_size';
+@form-page-input-label-font-family: '@form_input_label_font_family';
+@text-color: #fff;
+@font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif,
+	'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+@text-muted: #6c757d;
+@font-size-base: 16px; // Assumes the browser default, typically `16px`
+@spacer: 15px;
+@spacer1: @spacer * 0.5; // 3.75px
+@spacer2: @spacer * 1; // 7.5px
+@spacer3: @spacer * 1.5; // 15px;
+@spacer4: @spacer * 2; // 22.5px
+
+// stop client css rule on all elements inside #subiz
+#sbz92 * {
+	all: unset !important;
+}
+
+#sbz92 {
+	#makeImportant() !important;
+}
+
+// prevent #subiz inheriting client site styles
+div#sbz92 {
+	all: initial;
+}
+
+// prevent #subiz inheriting client site !important styles
+body div#sbz92 {
+	all: initial !important;
+}
+
+@import './font.less';
+#makeImportant() {
+	@import 'base.less';
+
+	* {
+		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+		-webkit-tap-highlight-color: transparent;
+
+		font-family: @font-family-sans-serif;
+		font-size: @font-size-base;
+
+		-webkit-box-sizing: border-box; // Safari/Chrome, other WebKit
+		-moz-box-sizing: border-box; // Firefox, other Gecko
+		box-sizing: border-box; // Opera/IE 8+
+
+		margin: 0;
+		padding: 0;
+		border: 0;
+		vertical-align: baseline;
+	}
+
+	button:focus {
+		outline: none;
+	}
+
+	.pos-relative {
+		position: relative;
+	}
+
+	// flex utils
+	.flex-row {
+		flex-direction: row;
+	}
+	.flex-column {
+		flex-direction: column;
+	}
+	.flex-grow-1 {
+		flex-grow: 1;
+	}
+	.align-self-end {
+		align-self: flex-end;
+	}
+	.align-items-end {
+		align-items: flex-end;
+	}
+	.justify-content-center {
+		justify-content: center;
+	}
+	.h-full {
+		height: 100%;
+	}
+	.w-full {
+		width: 100%;
+	}
+	.text-muted {
+		.color(@text-muted);
+	}
+	.text-lg {
+		font-size: 18px;
+	}
+	.text-xl {
+		font-size: 20px;
+	}
+	.text-center {
+		text-align: center;
+	}
+	.text-danger {
+		.color(@red);
+	}
+	.red {
+		.color(@red);
+	}
+
+	.text-italic {
+		font-style: italic;
+	}
+
+	// display utils
+	.d-none {
+		display: none;
+	}
+
+	.d-flex {
+		display: flex;
+	}
+
+	.d-inline-block {
+		display: inline-block;
+	}
+
+	// spacing utils
+	.ml-1 {
+		margin-left: @spacer1;
+	}
+	.pl-2 {
+		padding-left: @spacer2;
+	}
+	.pr-2 {
+		padding-right: @spacer2;
+	}
+	.pb-2 {
+		padding-bottom: @spacer2;
+	}
+	.mt-1 {
+		margin-top: @spacer1;
+	}
+	.mt-2 {
+		margin-top: @spacer2;
+	}
+	.ml-2 {
+		margin-left: @spacer2;
+	}
+	.mr-2 {
+		margin-right: @spacer2;
+	}
+	.pt-3 {
+		padding-top: @spacer3;
+	}
+	.pl-3 {
+		padding-left: @spacer3;
+	}
+	.pr-3 {
+		padding-right: @spacer3;
+	}
+	.pb-3 {
+		padding-bottom: @spacer3;
+	}
+	.mt-3 {
+		margin-top: @spacer3;
+	}
+	.ml-3 {
+		margin-left: @spacer3;
+	}
+	.mr-3 {
+		margin-right: @spacer3;
+	}
+	.mb-3 {
+		margin-bottom: @spacer3;
+	}
+	.mb-2 {
+		margin-bottom: @spacer2;
+	}
+	.mb-1 {
+		margin-bottom: @spacer1;
+	}
+
+	.muted {
+		.color(@text-muted);
+	}
+
+	.i {
+		font-style: italic;
+	}
+
+	.align-items-center {
+		align-items: center;
+	}
+
+	.text-truncate {
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+	}
+
+	.flex_1 {
+		flex: 1;
+		flex-shrink: 0;
+	}
+
+	.justify-content-between {
+		justify-content: space-between;
+	}
+
+	.no-shrink {
+		flex-shrink: 0;
+	}
+	.form-page {
+		max-width: 700px;
+		width: 100%;
+		margin: 0 auto;
+		padding: 40px 20px;
+	}
+
+	.form-page-header {
+		margin-bottom: 20px;
+	}
+
+	.form-page-title {
+		font-size: @form-page-header-font-size;
+		font-family: @form-page-header-font-family;
+	}
+
+	.form-page-desc {
+		color: @text-muted;
+		margin-top: 2px;
+		font-size: @form-page-desc-font-size;
+		font-family: @form-page-desc-font-family;
+	}
+
+	.form-page-logo-wrapper {
+		margin-bottom: 30px;
+	}
+
+	img.form-page-logo {
+		width: 200px;
+		height: 45px;
+	}
+
+	.form-page-logo-text {
+		color: @primary-color;
+		font-size: 18px;
+		font-weight: 500;
+		&:hover {
+			color: @primary-color;
+		}
+	}
+
+	.form-page .form-component .label {
+		font-size: @form-page-input-label-font-size;
+		font-family: @form-page-input-label-font-family;
+	}
+
+	.form-page-body {
+		width: 100%;
+		height: 100%;
+		overflow: auto;
+		background-color: @form-page-background-color;
+	}
+
+	.btn--start-convo {
+		border-radius: 7px;
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding-left: 32px;
+		padding-right: 32px;
+		height: 40px;
+		.color(@text-color);
+		font-size: 16px;
+		font-weight: 500;
+		line-height: 20px;
+		text-align: center;
+		background: @primary-color;
+		// max-width: 270px;
+		width: 100%;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+
+		transition: filter 250ms ease;
+
+		&::after {
+			display: none;
+		}
+		&:hover {
+			filter: brightness(1.1);
+		}
+	}
+
+	.btn--start-convo:disabled {
+		opacity: 0.5;
+		cursor: default;
+		pointer-events: none;
+	}
+
+	.form-wrapper.form select.form-control {
+		height: 40px;
+	}
+
+	@import 'form.less';
+}

package/assets/less/form.less

@@ -441,20 +441,6 @@ select {
 	background-color: #fff;
 }
 
-.form-page {
-	max-width: 700px;
-	width: 100%;
-	margin: 0 auto;
-	padding: 40px 20px;
-}
-
-.form-page-header {
-	margin-bottom: 30px;
-	font-size: 18px;
-	font-weight: 500;
-	color: #ccc;
-}
-
 .form-wrapper.form-wrapper-attachment.form {
 	padding: 12px 15px;
 	margin-top: 5px;
@@ -494,3 +480,7 @@ select {
 		height: 36px;
 	}
 }
+
+select.form-control.form-control--empty {
+	.color(@text-muted);
+}

package/compiled_src/form/Form.js

@@ -150,14 +150,19 @@ 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 += ' input--error';
+      if (!val) cls += ' form-control--empty';
       return (0, _preact.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);
         }
-      }, _index.default.map(com.input_options, option => {
+      }, (0, _preact.h)("option", {
+        value: ""
+      }, "-- ", this.props.t('no_select'), " --"), _index.default.map(com.input_options, option => {
         return (0, _preact.h)("option", {
           value: option.value
         }, option.label);
@@ -260,6 +265,7 @@ class Form2 extends _common.Com {
   render() {
     let components = _index.default.get(this.props.formSetting, 'components') || [];
     let title = _index.default.get(this.props.formSetting, 'title') || '';
+    let desc = _index.default.get(this.props.formSetting, 'description') || '';
     let cls = 'form-wrapper form';
     if (this.props.mode === 'attachment') cls += ' form-wrapper-attachment';
     return (0, _preact.h)("div", {
@@ -268,9 +274,11 @@ class Form2 extends _common.Com {
       class: "form-component"
     }, this.props.t('you_have_submitted_info_successfully')), (0, _preact.h)("form", {
       onSubmit: this.onSubmit
-    }, (0, _preact.h)("div", {
+    }, this.props.mode === 'attachment' && (title || desc) && (0, _preact.h)("div", {
       class: "form-component form-component-block"
-    }, title), _index.default.map(components, this.renderFormComponent)));
+    }, title && (0, _preact.h)("div", null, title), desc && (0, _preact.h)("div", {
+      class: "text-sm text-muted"
+    }, desc)), _index.default.map(components, this.renderFormComponent)));
   }
 }
 exports.default = Form2;

package/compiled_src/form/FormPage.js

@@ -12,10 +12,82 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _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); }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const promiseMainCSS = (() => Promise.resolve().then(() => _interopRequireWildcard(require('./css'))))();
 class FormPage extends _common.Com {
   constructor(props) {
     super(props);
+    _defineProperty(this, "waitForFont", async fonts => {
+      if (_index.default.size(fonts) == 0) return;
+      let ready = {};
+      for (let t = 0; t < 10; t++) {
+        for (let i = 0; i < fonts.length; i++) {
+          try {
+            if (document.fonts.check('normal 16px ' + fonts[i])) {
+              ready[fonts[i]] = true;
+            }
+            console.log('ready', ready, Object.keys(ready), fonts.length, Object.keys(ready) === fonts.length);
+            if (_index.default.size(Object.keys(ready)) === fonts.length) {
+              return;
+            }
+          } catch (e) {}
+        }
+        await _index.default.sleep(200);
+      }
+      return;
+    });
+    _defineProperty(this, "initCss", async () => {
+      let css = (await promiseMainCSS).default.default.toString();
+      let chatbox = _index.default.find(this.props.store.matchPlugin(), plugin => plugin.type === 'chatbox') || {};
+      chatbox = chatbox.chatbox || {};
+      let setting = chatbox;
+      let outcss = _index.default.replaceCssVariable(css, setting);
+      let $cssStyleDiv = document.createElement('style');
+      document.head.appendChild($cssStyleDiv);
+      $cssStyleDiv.type = 'text/css';
+      $cssStyleDiv.id = 'subiz-style-for-form';
+      this.cssDiv = $cssStyleDiv;
+      _index.default.setCss('form', $cssStyleDiv, outcss);
+    });
+    _defineProperty(this, "insertCss", async (chatbox, formSetting) => {
+      let css = (await promiseMainCSS).default.default.toString();
+      let setting = chatbox;
+      if (formSetting.primary_color) setting.primary_color = formSetting.primary_color;
+      let headerFont = _index.default.get(formSetting, 'header_style.font_family');
+      let descFont = _index.default.get(formSetting, 'text_style.font_family');
+      let inputLabelFont = _index.default.get(formSetting, 'input_style.font_family');
+      setting.form_background_color = formSetting.background_color;
+      setting.form_header_font_size = _index.default.get(formSetting, 'header_style.font_size') || '20';
+      setting.form_header_font_family = headerFont;
+      setting.form_desc_font_size = _index.default.get(formSetting, 'text_style.font_size') || '16';
+      setting.form_desc_font_family = descFont;
+      setting.form_input_label_font_size = _index.default.get(formSetting, 'input_style.font_size') || '14';
+      setting.form_input_label_font_family = inputLabelFont;
+      let outcss = _index.default.replaceCssVariable(css, setting);
+      let fonts = [];
+      if (inputLabelFont && !fonts.includes(inputLabelFont)) fonts.push(inputLabelFont);
+      if (headerFont && !fonts.includes(headerFont)) fonts.push(headerFont);
+      if (descFont && !fonts.includes(descFont)) fonts.push(descFont);
+      if (_index.default.size(fonts)) {
+        _index.default.preloadWebfonts(fonts, [400, 500]);
+        await this.waitForFont(fonts);
+      }
+      _index.default.setCss('form', this.cssDiv, outcss);
+    });
     _defineProperty(this, "fetchFormSetting", async () => {
+      let chatbox = _index.default.find(this.props.store.matchPlugin(), plugin => plugin.type === 'chatbox') || {};
+      chatbox = chatbox.chatbox || {};
+      if (this.props.previewJson) {
+        let json = atob(this.props.previewJson);
+        json = decodeURIComponent(json);
+        json = _index.default.parseJSON(json);
+        await this.insertCss(chatbox, json);
+        this.setState({
+          formSetting: json
+        });
+        return;
+      }
       if (this.state.loading) return;
       this.setState({
         loading: true
@@ -31,6 +103,7 @@ class FormPage extends _common.Com {
       let formSetting = _index.default.get(res, 'body.form') || {};
       let submission = _index.default.get(res, 'body.form_submission') || {};
       let isSubmited = _index.default.size(submission) > 0;
+      await this.insertCss(chatbox, formSetting);
       this.setState({
         loading: false,
         loadError: false,
@@ -50,6 +123,12 @@ class FormPage extends _common.Com {
       this.setState({
         errorMessage: ''
       });
+      if (this.props.previewJson) {
+        this.setState({
+          isSubmited: true
+        });
+        return;
+      }
       if (this.state.submiting) return;
       this.setState({
         submiting: true
@@ -77,7 +156,8 @@ class FormPage extends _common.Com {
       loadError: ''
     };
   }
-  componentDidMount() {
+  async componentDidMount() {
+    await this.initCss();
     this.fetchFormSetting();
   }
   render() {
@@ -111,11 +191,27 @@ class FormPage extends _common.Com {
         onClick: this.fetchFormSetting
       }, this.props.t('try_again'))));
     }
+    let brandLogo = _index.default.get(formSetting, 'logo.url');
     return (0, _preact.h)("div", {
+      class: "form-page-body"
+    }, (0, _preact.h)("div", {
       class: "form-page"
     }, (0, _preact.h)("div", {
+      class: "form-page-logo-wrapper"
+    }, (0, _preact.h)("a", {
+      href: formSetting.brand_url || 'javascript:;'
+    }, brandLogo ? (0, _preact.h)("img", {
+      src: brandLogo,
+      class: "form-page-logo"
+    }) : (0, _preact.h)("div", {
+      class: "form-page-logo-text"
+    }, _index.default.get(this.props.store.matchAccount(), 'name')))), (formSetting.title || formSetting.description) && (0, _preact.h)("div", {
       class: "form-page-header"
-    }, 'HEADER'), (0, _preact.h)(_Form.default, {
+    }, (0, _preact.h)("div", {
+      class: "form-page-title"
+    }, formSetting.title), formSetting.description && (0, _preact.h)("div", {
+      class: "form-page-desc"
+    }, formSetting.description)), (0, _preact.h)(_Form.default, {
       store: this.props.store,
       formSetting: formSetting,
       t: this.props.t,
@@ -125,7 +221,7 @@ class FormPage extends _common.Com {
       submiting: submiting,
       onChangeFormValues: this.onChangeFormValues,
       onSubmit: this.onSubmit
-    }));
+    })));
   }
 }
 exports.default = FormPage;

package/compiled_src/form/css.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = require('css-loader!less-loader!../../assets/less/form-page.less');

package/compiled_src/form/index.js

@@ -29,33 +29,25 @@ var $link = document.createElement('link');
 $link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap';
 $link.rel = 'stylesheet';
 document.head.append($link);
-_index.default.preloadWebfonts(['Inter'], [400, 500]);
+const PREVIEW_B64 = 'JTdCJTIyaWQlMjIlM0ElMjJhdHNocnBxeHp1dWZ6emRrenF1el9kbGJnd3lpYiUyMiUyQyUyMnRpdGxlJTIyJTNBJTIyJUM0JTkwJUUxJUJBJUI3dCUyMGwlRTElQkIlOEJjaCUyMGtoJUMzJUExbSUyMiUyQyUyMmNvbXBvbmVudHMlMjIlM0ElNUIlN0IlMjJ0eXBlJTIyJTNBJTIyaW5wdXQlMjIlMkMlMjJsYWJlbCUyMiUzQSUyMkglRTElQkIlOEQlMjB2JUMzJUEwJTIwdCVDMyVBQW4lMjIlMkMlMjJpbnB1dF90eXBlJTIyJTNBJTIydGV4dCUyMiUyQyUyMmlzX3JlcXVpcmVkJTIyJTNBdHJ1ZSUyQyUyMmtleSUyMiUzQSUyMmZ1bGxuYW1lJTIyJTdEJTJDJTdCJTIydHlwZSUyMiUzQSUyMmlucHV0JTIyJTJDJTIybGFiZWwlMjIlM0ElMjJTJUM0JTkwVCUyMiUyQyUyMmlucHV0X3R5cGUlMjIlM0ElMjJ0ZXh0JTIyJTJDJTIyaXNfcmVxdWlyZWQlMjIlM0F0cnVlJTJDJTIya2V5JTIyJTNBJTIycGhvbmUlMjIlN0QlMkMlN0IlMjJ0eXBlJTIyJTNBJTIyaW5wdXQlMjIlMkMlMjJsYWJlbCUyMiUzQSUyMkNoJUUxJUJCJThEbiUyMGNhJTIyJTJDJTIyaW5wdXRfdHlwZSUyMiUzQSUyMnJhZGlvJTIyJTJDJTIyaXNfcmVxdWlyZWQlMjIlM0F0cnVlJTJDJTIya2V5JTIyJTNBJTIyc2hpZnQlMjIlMkMlMjJpbnB1dF9vcHRpb25zJTIyJTNBJTVCJTdCJTIybGFiZWwlMjIlM0ElMjJCdSVFMSVCQiU5NWklMjBzJUMzJUExbmclMjIlMkMlMjJ2YWx1ZSUyMiUzQSUyMkJ1JUUxJUJCJTk1aSUyMHMlQzMlQTFuZyUyMiU3RCUyQyU3QiUyMmxhYmVsJTIyJTNBJTIyQnUlRTElQkIlOTVpJTIwY2hpJUUxJUJCJTgxdSUyMiUyQyUyMnZhbHVlJTIyJTNBJTIyQnUlRTElQkIlOTVpJTIwY2hpJUUxJUJCJTgxdSUyMiU3RCU1RCU3RCUyQyU3QiUyMnR5cGUlMjIlM0ElMjJpbnB1dCUyMiUyQyUyMmxhYmVsJTIyJTNBJTIyQ2glRTElQkIlOERuJTIwbmclQzMlQTB5JTIyJTJDJTIyaW5wdXRfdHlwZSUyMiUzQSUyMmRhdGUlMjIlMkMlMjJpc19yZXF1aXJlZCUyMiUzQXRydWUlMkMlMjJrZXklMjIlM0ElMjJzY2hlZHVsZSUyMiU3RCUyQyU3QiUyMnR5cGUlMjIlM0ElMjJidXR0b24lMjIlMkMlMjJsYWJlbCUyMiUzQSUyMiVDNCU5MCVFMSVCQSVCN3QlMjBsJUUxJUJCJThCY2glMjIlN0QlNUQlMkMlMjJwcmltYXJ5X2NvbG9yJTIyJTNBJTIycmdiKDEyOCUyQyUyMDEzNCUyQyUyMDI1NSklMjIlMkMlMjJkZXNjcmlwdGlvbiUyMiUzQSUyMk1vJTIwdGElMjBvJTIwZGF5JTIyJTJDJTIyYnJhbmRfdXJsJTIyJTNBJTIyaHR0cHMlM0ElMkYlMkZzYnouY29tJTIyJTJDJTIybG9nbyUyMiUzQSU3QiUyMnVybCUyMiUzQSUyMmh0dHBzJTNBJTJGJTJGbWVkbGF0ZWMudm4lMkZtZWRpYSUyRjExNSUyRmNvbnRlbnQlMkZsb2dvLXBjLnBuZyUyMiU3RCUyQyUyMmhlYWRlcl9zdHlsZSUyMiUzQSU3QiUyMmZvbnRfc2l6ZSUyMiUzQSUyMjIwJTIyJTJDJTIyZm9udF9mYW1pbHklMjIlM0ElMjJEYW5jaW5nJTIwU2NyaXB0JTIyJTdEJTdE';
 async function load() {
   let store = new _store.default(config.ApiURL, config.FileURL, config.RealtimeURL, true);
   window.store = store;
   let accid = getUrlParameter('id') || getUrlParameter('accid') || getUrlParameter('account-id') || 'acqsulrowbxiugvginhw';
   let mask = accid + '@' + 'abcd';
   let token = getUrlParameter('token');
+  let previewJson = getUrlParameter('preview');
   await store.init(accid);
-  let acc = store.matchAccount() || {};
-  let plugin = findChatbox(store) || {};
-  let css = (await promiseMainCSS).default.default.toString();
-  var outcss = _index.default.replaceCssVariable(css, plugin.chatbox);
-  let $cssStyleDiv = document.createElement('style');
-  document.head.appendChild($cssStyleDiv);
-  $cssStyleDiv.type = 'text/css';
-  $cssStyleDiv.id = 'subiz-style-for-order';
-  _index.default.setCss('form', $cssStyleDiv, outcss);
   let t = key => {
     if (_locale === 'debug') return `{{${key}}}`;
     let messages = _index.default.get(common.langMessages, _locale, []);
     let message = _index.default.find(messages, message => message.key === key);
     return _index.default.get(message, 'message', key);
   };
-  let _locale = plugin.locale || acc.locale || 'vi-VN';
+  let _locale = 'vi-VN';
   t.i18n = i18nText => {
     if (!i18nText) return '';
-    let fallbackLocale = plugin.locale || acc.locale || 'vi-VN';
+    let fallbackLocale = 'vi-VN';
     fallbackLocale = fallbackLocale.replace('-', '_');
     let locale = _locale.replace('-', '_');
     return i18nText[locale] || i18nText[fallbackLocale];
@@ -65,7 +57,8 @@ async function load() {
     (0, _preact.render)((0, _preact.h)(_FormPage.default, {
       store: store,
       t: t,
-      token: token
+      token: token,
+      previewJson: previewJson
     }), document.getElementById('form'));
   });
 }

package/compiled_src/util/common.js

@@ -613,6 +613,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 = {
@@ -658,7 +665,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') {

package/package.json

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

package/src/form/Form.js

@@ -169,15 +169,19 @@ 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 += ' input--error'
+		if (!val) cls += ' form-control--empty'
 		return (
 			<select
-				class='form-control'
+				class={cls}
 				ref={this[`${com.key}_input`]}
 				onChange={(e) => {
 					this.onChangeValue(com.key, e.target.value)
 					this.clearError(com.key)
 				}}
 			>
+				<option value=''>-- {this.props.t('no_select')} --</option>
 				{sb.map(com.input_options, (option) => {
 					return <option value={option.value}>{option.label}</option>
 				})}
@@ -278,6 +282,7 @@ export default class Form2 extends Com {
 	render() {
 		let components = sb.get(this.props.formSetting, 'components') || []
 		let title = sb.get(this.props.formSetting, 'title') || ''
+		let desc = sb.get(this.props.formSetting, 'description') || ''
 		let cls = 'form-wrapper form'
 		if (this.props.mode === 'attachment') cls += ' form-wrapper-attachment'
 		return (
@@ -286,7 +291,12 @@ export default class Form2 extends Com {
 					<div class='form-component'>{this.props.t('you_have_submitted_info_successfully')}</div>
 				)}
 				<form onSubmit={this.onSubmit}>
-					<div class='form-component form-component-block'>{title}</div>
+					{this.props.mode === 'attachment' && (title || desc) && (
+						<div class='form-component form-component-block'>
+							{title && <div>{title}</div>}
+							{desc && <div class='text-sm text-muted'>{desc}</div>}
+						</div>
+					)}
 					{sb.map(components, this.renderFormComponent)}
 				</form>
 			</div>

package/src/form/FormPage.js

@@ -2,6 +2,7 @@ import {Com} from '../common.js'
 import {h, createRef} from 'preact'
 import Form from './Form.js'
 import sb from '../util/index.js'
+const promiseMainCSS = (() => import(/*webpackChunkName: "form-page-css" */ './css'))()
 
 export default class FormPage extends Com {
 	constructor(props) {
@@ -19,14 +20,93 @@ export default class FormPage extends Com {
 		}
 	}
 
-	componentDidMount() {
+	async componentDidMount() {
+		await this.initCss()
 		this.fetchFormSetting()
 	}
 
+	waitForFont = async (fonts) => {
+		if (sb.size(fonts) == 0) return
+		// 2 sec timeout
+		let ready = {}
+		for (let t = 0; t < 10; t++) {
+			for (let i = 0; i < fonts.length; i++) {
+				try {
+					if (document.fonts.check('normal 16px ' + fonts[i])) {
+						ready[fonts[i]] = true
+					}
+					console.log('ready', ready, Object.keys(ready), fonts.length, Object.keys(ready) === fonts.length)
+					if (sb.size(Object.keys(ready)) === fonts.length) {
+						return
+					}
+				} catch (e) {}
+			}
+			await sb.sleep(200)
+		}
+		return
+	}
+
+	initCss = async () => {
+		let css = (await promiseMainCSS).default.default.toString()
+		let chatbox = sb.find(this.props.store.matchPlugin(), (plugin) => plugin.type === 'chatbox') || {}
+		chatbox = chatbox.chatbox || {}
+		let setting = chatbox
+		let outcss = sb.replaceCssVariable(css, setting)
+		let $cssStyleDiv = document.createElement('style')
+		document.head.appendChild($cssStyleDiv)
+		$cssStyleDiv.type = 'text/css'
+		$cssStyleDiv.id = 'subiz-style-for-form'
+
+		this.cssDiv = $cssStyleDiv
+		sb.setCss('form', $cssStyleDiv, outcss)
+	}
+
+	insertCss = async (chatbox, formSetting) => {
+		let css = (await promiseMainCSS).default.default.toString()
+		let setting = chatbox
+		if (formSetting.primary_color) setting.primary_color = formSetting.primary_color
+		let headerFont = sb.get(formSetting, 'header_style.font_family')
+		let descFont = sb.get(formSetting, 'text_style.font_family')
+		let inputLabelFont = sb.get(formSetting, 'input_style.font_family')
+		setting.form_background_color = formSetting.background_color
+		setting.form_header_font_size = sb.get(formSetting, 'header_style.font_size') || '20'
+		setting.form_header_font_family = headerFont
+		setting.form_desc_font_size = sb.get(formSetting, 'text_style.font_size') || '16'
+		setting.form_desc_font_family = descFont
+		setting.form_input_label_font_size = sb.get(formSetting, 'input_style.font_size') || '14'
+		setting.form_input_label_font_family = inputLabelFont
+		let outcss = sb.replaceCssVariable(css, setting)
+
+		let fonts = []
+		if (inputLabelFont && !fonts.includes(inputLabelFont)) fonts.push(inputLabelFont)
+		if (headerFont && !fonts.includes(headerFont)) fonts.push(headerFont)
+		if (descFont && !fonts.includes(descFont)) fonts.push(descFont)
+		if (sb.size(fonts)) {
+			sb.preloadWebfonts(fonts, [400, 500])
+			await this.waitForFont(fonts)
+		}
+
+		sb.setCss('form', this.cssDiv, outcss)
+	}
+
 	fetchFormSetting = async () => {
+		// load css
+		let chatbox = sb.find(this.props.store.matchPlugin(), (plugin) => plugin.type === 'chatbox') || {}
+		chatbox = chatbox.chatbox || {}
+
+		if (this.props.previewJson) {
+			let json = atob(this.props.previewJson)
+			json = decodeURIComponent(json)
+			json = sb.parseJSON(json)
+			await this.insertCss(chatbox, json)
+			this.setState({formSetting: json})
+			return
+		}
 		if (this.state.loading) return
 		this.setState({loading: true})
 		let res = await this.props.store.checkFormToken(this.props.store.matchAccount().id, this.props.token)
+		//await sb.sleep(5000)
+		//res.error = 'true'
 		if (res.error) {
 			this.setState({loading: false, loadError: true})
 			return
@@ -34,6 +114,9 @@ export default class FormPage extends Com {
 		let formSetting = sb.get(res, 'body.form') || {}
 		let submission = sb.get(res, 'body.form_submission') || {}
 		let isSubmited = sb.size(submission) > 0
+
+		await this.insertCss(chatbox, formSetting)
+
 		this.setState({loading: false, loadError: false, formSetting, submission, isSubmited})
 	}
 
@@ -43,6 +126,10 @@ export default class FormPage extends Com {
 
 	onSubmit = async () => {
 		this.setState({errorMessage: ''})
+		if (this.props.previewJson) {
+			this.setState({isSubmited: true})
+			return
+		}
 		if (this.state.submiting) return
 		this.setState({submiting: true})
 		let res = await this.props.store.submitForm2(
@@ -79,20 +166,38 @@ export default class FormPage extends Com {
 				</div>
 			)
 		}
+
+		let brandLogo = sb.get(formSetting, 'logo.url')
 		return (
-			<div class='form-page'>
-				<div class='form-page-header'>{'HEADER'}</div>
-				<Form
-					store={this.props.store}
-					formSetting={formSetting}
-					t={this.props.t}
-					submission={submission}
-					errorMessage={errorMessage}
-					isSubmited={isSubmited}
-					submiting={submiting}
-					onChangeFormValues={this.onChangeFormValues}
-					onSubmit={this.onSubmit}
-				/>
+			<div class='form-page-body'>
+				<div class='form-page'>
+					<div class='form-page-logo-wrapper'>
+						<a href={formSetting.brand_url || 'javascript:;'}>
+							{brandLogo ? (
+								<img src={brandLogo} class='form-page-logo' />
+							) : (
+								<div class='form-page-logo-text'>{sb.get(this.props.store.matchAccount(), 'name')}</div>
+							)}
+						</a>
+					</div>
+					{(formSetting.title || formSetting.description) && (
+						<div class='form-page-header'>
+							<div class='form-page-title'>{formSetting.title}</div>
+							{formSetting.description && <div class='form-page-desc'>{formSetting.description}</div>}
+						</div>
+					)}
+					<Form
+						store={this.props.store}
+						formSetting={formSetting}
+						t={this.props.t}
+						submission={submission}
+						errorMessage={errorMessage}
+						isSubmited={isSubmited}
+						submiting={submiting}
+						onChangeFormValues={this.onChangeFormValues}
+						onSubmit={this.onSubmit}
+					/>
+				</div>
 			</div>
 		)
 	}

package/src/form/css.js

@@ -0,0 +1 @@
+export default require('css-loader!less-loader!../../assets/less/form-page.less')

package/src/form/index.js

@@ -29,7 +29,9 @@ $link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500&displa
 $link.rel = 'stylesheet'
 document.head.append($link)
 
-sb.preloadWebfonts(['Inter'], [400, 500])
+// test json setting
+const PREVIEW_B64 =
+	'JTdCJTIyaWQlMjIlM0ElMjJhdHNocnBxeHp1dWZ6emRrenF1el9kbGJnd3lpYiUyMiUyQyUyMnRpdGxlJTIyJTNBJTIyJUM0JTkwJUUxJUJBJUI3dCUyMGwlRTElQkIlOEJjaCUyMGtoJUMzJUExbSUyMiUyQyUyMmNvbXBvbmVudHMlMjIlM0ElNUIlN0IlMjJ0eXBlJTIyJTNBJTIyaW5wdXQlMjIlMkMlMjJsYWJlbCUyMiUzQSUyMkglRTElQkIlOEQlMjB2JUMzJUEwJTIwdCVDMyVBQW4lMjIlMkMlMjJpbnB1dF90eXBlJTIyJTNBJTIydGV4dCUyMiUyQyUyMmlzX3JlcXVpcmVkJTIyJTNBdHJ1ZSUyQyUyMmtleSUyMiUzQSUyMmZ1bGxuYW1lJTIyJTdEJTJDJTdCJTIydHlwZSUyMiUzQSUyMmlucHV0JTIyJTJDJTIybGFiZWwlMjIlM0ElMjJTJUM0JTkwVCUyMiUyQyUyMmlucHV0X3R5cGUlMjIlM0ElMjJ0ZXh0JTIyJTJDJTIyaXNfcmVxdWlyZWQlMjIlM0F0cnVlJTJDJTIya2V5JTIyJTNBJTIycGhvbmUlMjIlN0QlMkMlN0IlMjJ0eXBlJTIyJTNBJTIyaW5wdXQlMjIlMkMlMjJsYWJlbCUyMiUzQSUyMkNoJUUxJUJCJThEbiUyMGNhJTIyJTJDJTIyaW5wdXRfdHlwZSUyMiUzQSUyMnJhZGlvJTIyJTJDJTIyaXNfcmVxdWlyZWQlMjIlM0F0cnVlJTJDJTIya2V5JTIyJTNBJTIyc2hpZnQlMjIlMkMlMjJpbnB1dF9vcHRpb25zJTIyJTNBJTVCJTdCJTIybGFiZWwlMjIlM0ElMjJCdSVFMSVCQiU5NWklMjBzJUMzJUExbmclMjIlMkMlMjJ2YWx1ZSUyMiUzQSUyMkJ1JUUxJUJCJTk1aSUyMHMlQzMlQTFuZyUyMiU3RCUyQyU3QiUyMmxhYmVsJTIyJTNBJTIyQnUlRTElQkIlOTVpJTIwY2hpJUUxJUJCJTgxdSUyMiUyQyUyMnZhbHVlJTIyJTNBJTIyQnUlRTElQkIlOTVpJTIwY2hpJUUxJUJCJTgxdSUyMiU3RCU1RCU3RCUyQyU3QiUyMnR5cGUlMjIlM0ElMjJpbnB1dCUyMiUyQyUyMmxhYmVsJTIyJTNBJTIyQ2glRTElQkIlOERuJTIwbmclQzMlQTB5JTIyJTJDJTIyaW5wdXRfdHlwZSUyMiUzQSUyMmRhdGUlMjIlMkMlMjJpc19yZXF1aXJlZCUyMiUzQXRydWUlMkMlMjJrZXklMjIlM0ElMjJzY2hlZHVsZSUyMiU3RCUyQyU3QiUyMnR5cGUlMjIlM0ElMjJidXR0b24lMjIlMkMlMjJsYWJlbCUyMiUzQSUyMiVDNCU5MCVFMSVCQSVCN3QlMjBsJUUxJUJCJThCY2glMjIlN0QlNUQlMkMlMjJwcmltYXJ5X2NvbG9yJTIyJTNBJTIycmdiKDEyOCUyQyUyMDEzNCUyQyUyMDI1NSklMjIlMkMlMjJkZXNjcmlwdGlvbiUyMiUzQSUyMk1vJTIwdGElMjBvJTIwZGF5JTIyJTJDJTIyYnJhbmRfdXJsJTIyJTNBJTIyaHR0cHMlM0ElMkYlMkZzYnouY29tJTIyJTJDJTIybG9nbyUyMiUzQSU3QiUyMnVybCUyMiUzQSUyMmh0dHBzJTNBJTJGJTJGbWVkbGF0ZWMudm4lMkZtZWRpYSUyRjExNSUyRmNvbnRlbnQlMkZsb2dvLXBjLnBuZyUyMiU3RCUyQyUyMmhlYWRlcl9zdHlsZSUyMiUzQSU3QiUyMmZvbnRfc2l6ZSUyMiUzQSUyMjIwJTIyJTJDJTIyZm9udF9mYW1pbHklMjIlM0ElMjJEYW5jaW5nJTIwU2NyaXB0JTIyJTdEJTdE'
 
 async function load() {
 	let store = new Store(config.ApiURL, config.FileURL, config.RealtimeURL, true)
@@ -37,23 +39,11 @@ async function load() {
 	let accid =
 		getUrlParameter('id') || getUrlParameter('accid') || getUrlParameter('account-id') || 'acqsulrowbxiugvginhw'
 	let mask = accid + '@' + 'abcd'
-  let token = getUrlParameter('token')
+	let token = getUrlParameter('token')
+	let previewJson = getUrlParameter('preview')
+	//previewJson = PREVIEW_B64
 	await store.init(accid)
 
-	let acc = store.matchAccount() || {}
-	let plugin = findChatbox(store) || {}
-
-	// make sure you are still alive
-	let css = (await promiseMainCSS).default.default.toString()
-	var outcss = sb.replaceCssVariable(css, plugin.chatbox)
-
-	let $cssStyleDiv = document.createElement('style')
-	document.head.appendChild($cssStyleDiv)
-	$cssStyleDiv.type = 'text/css'
-	$cssStyleDiv.id = 'subiz-style-for-order'
-
-	sb.setCss('form', $cssStyleDiv, outcss)
-
 	let t = (key) => {
 		if (_locale === 'debug') return `{{${key}}}`
 
@@ -61,10 +51,10 @@ async function load() {
 		let message = sb.find(messages, (message) => message.key === key)
 		return sb.get(message, 'message', key)
 	}
-	let _locale = plugin.locale || acc.locale || 'vi-VN'
+	let _locale = 'vi-VN'
 	t.i18n = (i18nText) => {
 		if (!i18nText) return ''
-		let fallbackLocale = plugin.locale || acc.locale || 'vi-VN'
+		let fallbackLocale = 'vi-VN'
 		fallbackLocale = fallbackLocale.replace('-', '_')
 		let locale = _locale.replace('-', '_')
 
@@ -72,7 +62,7 @@ async function load() {
 	}
 	t.locale = () => _locale
 	common.downloadLanguage(store, _locale).then(() => {
-		render(<FormPage store={store} t={t} token={token}/>, document.getElementById('form'))
+		render(<FormPage store={store} t={t} token={token} previewJson={previewJson} />, document.getElementById('form'))
 	})
 }
 

package/src/util/common.js

@@ -653,6 +653,13 @@ export 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'")
 
 	// make primary_color faded
 	var primary_color = op.get(setting, 'primary_color') || op.get(DEFVAL, 'primary_color')
@@ -714,6 +721,9 @@ export function replaceCssVariable(css, setting) {
 				'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)