@subiz/widget-v4 4.1.137 → 4.1.139

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;
 
@@ -306,5 +303,16 @@ body div#sbz92 {
 		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/compiled_src/form/Form.js

@@ -63,7 +63,7 @@ class Form2 extends _common.Com {
         class: "label"
       }, com.label, " ", com.is_required && (0, _preact.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.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), errorMsg && (0, _preact.h)("div", {
         class: "form-control--valid-input--error"
       }, errorMsg));
     });
@@ -195,18 +195,42 @@ class Form2 extends _common.Com {
       let components = _index.default.get(this.props.formSetting, 'components') || [];
       _index.default.each(components, com => {
         if (com.type === 'input') {
+          let val = _index.default.find(this.props.submission.values, f => f.key === com.key) || {};
+          val = val.value || '""';
+          val = _index.default.parseJSON(val);
           if (com.is_required) {
-            let val = _index.default.find(this.props.submission.values, f => f.key === com.key) || {};
-            val = val.value || '""';
-            val = _index.default.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' && !_index.default.isEmail(val)) {
+              validationText = 'Email';
+              isInvalid = true;
+            }
+            if (com.validation === 'phone' && !_index.default.isPhone(val)) {
+              validationText = this.props.t('phn');
+              isInvalid = true;
+            }
+            if (com.validation === 'number' && !_index.default.isNumber(val)) {
+              validationText = this.props.t('number');
+              isInvalid = true;
+            }
+            if (com.validation === 'url' && !_index.default.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`;
             }
           }
         }

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

package/src/form/Form.js

@@ -66,11 +66,11 @@ export default class Form2 extends Com {
 					{com.label} {com.is_required && <span class='red'>*</span>}
 				</label>
 				{com.input_type === 'text' && this.renderFieldTextInput(com, idx)}
-				{com.input_type === 'multiple' && this.renderFieldTextareaInput(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' && this.renderFieldDropdownInput(com, idx)}
+				{(com.input_type === 'dropdown' || com.input_type === 'select') && this.renderFieldDropdownInput(com, idx)}
 				{errorMsg && <div class='form-control--valid-input--error'>{errorMsg}</div>}
 			</div>
 		)
@@ -220,18 +220,42 @@ export default class Form2 extends Com {
 		let components = sb.get(this.props.formSetting, 'components') || []
 		sb.each(components, (com) => {
 			if (com.type === 'input') {
+				let val = sb.find(this.props.submission.values, (f) => f.key === com.key) || {}
+				val = val.value || '""'
+				val = sb.parseJSON(val)
 				if (com.is_required) {
-					let val = sb.find(this.props.submission.values, (f) => f.key === com.key) || {}
-					val = val.value || '""'
-					val = sb.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' && !sb.isEmail(val)) {
+						validationText = 'Email'
+						isInvalid = true
+					}
+					if (com.validation === 'phone' && !sb.isPhone(val)) {
+						validationText = this.props.t('phn')
+						isInvalid = true
+					}
+					if (com.validation === 'number' && !sb.isNumber(val)) {
+						validationText = this.props.t('number')
+						isInvalid = true
+					}
+					if (com.validation === 'url' && !sb.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`
 					}
 				}
 			}

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'
 }