@subiz/widget-v4 4.1.136 → 4.1.138

package/assets/less/form-page.less

@@ -41,9 +41,6 @@ body div#sbz92 {
 	@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;
 
@@ -302,5 +299,20 @@ body div#sbz92 {
 		pointer-events: none;
 	}
 
+	.form-wrapper.form select.form-control {
+		height: 40px;
+	}
+
+  .form-page-preview-noti {
+    background: #fef7e0;
+    text-align: center;
+    border-radius: 6px;
+    margin-top: 10px;
+    margin-left: 15px;
+    margin-right: 15px;
+    padding: 8px 12px;
+    color: #202122;
+  }
+
 	@import 'form.less';
 }

package/assets/less/form.less

@@ -480,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);

package/compiled_src/form/FormPage.js

@@ -27,7 +27,6 @@ class FormPage extends _common.Com {
             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;
             }
@@ -79,12 +78,16 @@ class FormPage extends _common.Com {
       let chatbox = _index.default.find(this.props.store.matchPlugin(), plugin => plugin.type === 'chatbox') || {};
       chatbox = chatbox.chatbox || {};
       if (this.props.previewJson) {
+        this.setState({
+          loading: true
+        });
         let json = atob(this.props.previewJson);
         json = decodeURIComponent(json);
         json = _index.default.parseJSON(json);
         await this.insertCss(chatbox, json);
         this.setState({
-          formSetting: json
+          formSetting: json,
+          loading: false
         });
         return;
       }
@@ -172,14 +175,16 @@ class FormPage extends _common.Com {
     } = this.state;
     if (loading && !loadError) {
       return (0, _preact.h)("div", {
-        class: "h-full w-full d-flex justify-content-center align-items-center"
+        class: "h-full w-full d-flex justify-content-center align-items-center",
+        key: "loading"
       }, (0, _preact.h)("div", {
         class: "text-muted text-xl"
       }, this.props.t('loading_data'), " ..."));
     }
     if (loadError) {
       return (0, _preact.h)("div", {
-        class: "h-full w-full d-flex justify-content-center align-items-center"
+        class: "h-full w-full d-flex justify-content-center align-items-center",
+        key: "error"
       }, (0, _preact.h)("div", {
         class: "text-center"
       }, (0, _preact.h)("div", {
@@ -193,8 +198,11 @@ class FormPage extends _common.Com {
     }
     let brandLogo = _index.default.get(formSetting, 'logo.url');
     return (0, _preact.h)("div", {
-      class: "form-page-body"
-    }, (0, _preact.h)("div", {
+      class: "form-page-body",
+      key: "form"
+    }, this.props.previewJson && (0, _preact.h)("div", {
+      class: "form-page-preview-noti"
+    }, 'Form ở trạng thái xem thử, không ghi nhận phản hồi'), (0, _preact.h)("div", {
       class: "form-page"
     }, (0, _preact.h)("div", {
       class: "form-page-logo-wrapper"

package/compiled_src/form.js

@@ -18,13 +18,21 @@ async function renderForm(form, chatbox, $div) {
     (0, _preact.render)((0, _preact.h)("div", null, "Loading"), $div);
     return;
   }
+  const LANG = {
+    no_select: 'Chưa chọn',
+    cannot_be_empty: 'không thể để trống',
+    you_have_submitted_info_successfully: 'Form được gửi thành công',
+    no_info_input: 'Chưa nhập'
+  };
   (0, _preact.render)((0, _preact.h)(_Form.default, {
     mode: "attachment",
+    onChangeFormValues: () => {},
+    onSubmit: () => {},
     formSetting: form,
     submission: {
       values: []
     },
-    t: () => ''
+    t: key => LANG[key]
   }), $div);
 }
 async function initCss(chatbox) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.136",
+	"version": "4.1.138",
 	"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>
 				})}

package/src/form/FormPage.js

@@ -35,7 +35,6 @@ export default class FormPage extends Com {
 					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
 					}
@@ -95,11 +94,12 @@ export default class FormPage extends Com {
 		chatbox = chatbox.chatbox || {}
 
 		if (this.props.previewJson) {
+			this.setState({loading: true})
 			let json = atob(this.props.previewJson)
 			json = decodeURIComponent(json)
 			json = sb.parseJSON(json)
 			await this.insertCss(chatbox, json)
-			this.setState({formSetting: json})
+			this.setState({formSetting: json, loading: false})
 			return
 		}
 		if (this.state.loading) return
@@ -148,14 +148,14 @@ export default class FormPage extends Com {
 		const {formSetting, loading, loadError, submission, errorMessage, isSubmited, submiting} = this.state
 		if (loading && !loadError) {
 			return (
-				<div class='h-full w-full d-flex justify-content-center align-items-center'>
+				<div class='h-full w-full d-flex justify-content-center align-items-center' key='loading'>
 					<div class='text-muted text-xl'>{this.props.t('loading_data')} ...</div>
 				</div>
 			)
 		}
 		if (loadError) {
 			return (
-				<div class='h-full w-full d-flex justify-content-center align-items-center'>
+				<div class='h-full w-full d-flex justify-content-center align-items-center' key='error'>
 					<div class='text-center'>
 						<div class='text-danger text-lg mb-2'>{this.props.t('error_occurs_when_load_data')}</div>
 						<br />
@@ -169,7 +169,10 @@ export default class FormPage extends Com {
 
 		let brandLogo = sb.get(formSetting, 'logo.url')
 		return (
-			<div class='form-page-body'>
+			<div class='form-page-body' key='form'>
+				{this.props.previewJson && (
+					<div class='form-page-preview-noti'>{'Form ở trạng thái xem thử, không ghi nhận phản hồi'}</div>
+				)}
 				<div class='form-page'>
 					<div class='form-page-logo-wrapper'>
 						<a href={formSetting.brand_url || 'javascript:;'}>

package/src/form.js

@@ -5,18 +5,33 @@ import sb from './util/index.js'
 
 let loadStatus = ''
 export default async function renderForm(form, chatbox, $div) {
-  initCss(chatbox)
-  if (loadStatus !== 'done') {
-    render(<div>Loading</div>, $div)
-    return
-
-  }
-	render(<Form mode='attachment' formSetting={form} submission={{values: []}} t={() => ''} />, $div)
+	initCss(chatbox)
+	if (loadStatus !== 'done') {
+		render(<div>Loading</div>, $div)
+		return
+	}
+	const LANG = {
+		no_select: 'Chưa chọn',
+		cannot_be_empty: 'không thể để trống',
+		you_have_submitted_info_successfully: 'Form được gửi thành công',
+		no_info_input: 'Chưa nhập',
+	}
+	render(
+		<Form
+			mode='attachment'
+			onChangeFormValues={() => {}}
+			onSubmit={() => {}}
+			formSetting={form}
+			submission={{values: []}}
+			t={(key) => LANG[key]}
+		/>,
+		$div,
+	)
 }
 
 async function initCss(chatbox) {
-  if (loadStatus) return
-  loadStatus = 'loadiing'
+	if (loadStatus) return
+	loadStatus = 'loadiing'
 	let css = (await promiseMainCSS).default.default.toString()
 	let outcss = sb.replaceCssVariable(css, chatbox)
 
@@ -26,5 +41,5 @@ async function initCss(chatbox) {
 	$cssStyleDiv.id = 'subiz-style-for-form'
 
 	sb.setCss('form', $cssStyleDiv, outcss)
-  loadStatus = 'done'
+	loadStatus = 'done'
 }