@subiz/widget-v4 4.0.96 → 4.0.98

package/assets/less/form.less

@@ -205,7 +205,7 @@ textarea.form-control:focus, select.form-control:focus {
 		padding-right: 20px ;
 	}
 	select {
-		background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjQxMDU4IDYuOTExMDdDNC43MzYwMiA2LjU4NTYzIDUuMjYzNjYgNi41ODU2MyA1LjU4OTA5IDYuOTExMDdMOS45OTk4NCAxMS4zMjE4TDE0LjQxMDYgNi45MTEwN0MxNC43MzYgNi41ODU2MyAxNS4yNjM3IDYuNTg1NjMgMTUuNTg5MSA2LjkxMTA3QzE1LjkxNDUgNy4yMzY1MSAxNS45MTQ1IDcuNzY0MTQgMTUuNTg5MSA4LjA4OTU4TDEwLjU4OTEgMTMuMDg5NkMxMC4yNjM3IDEzLjQxNSA5LjczNjAyIDEzLjQxNSA5LjQxMDU4IDEzLjA4OTZMNC40MTA1OCA4LjA4OTU4QzQuMDg1MTQgNy43NjQxNCA0LjA4NTE0IDcuMjM2NTEgNC40MTA1OCA2LjkxMTA3WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+") no-repeat right;
+		/*background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjQxMDU4IDYuOTExMDdDNC43MzYwMiA2LjU4NTYzIDUuMjYzNjYgNi41ODU2MyA1LjU4OTA5IDYuOTExMDdMOS45OTk4NCAxMS4zMjE4TDE0LjQxMDYgNi45MTEwN0MxNC43MzYgNi41ODU2MyAxNS4yNjM3IDYuNTg1NjMgMTUuNTg5MSA2LjkxMTA3QzE1LjkxNDUgNy4yMzY1MSAxNS45MTQ1IDcuNzY0MTQgMTUuNTg5MSA4LjA4OTU4TDEwLjU4OTEgMTMuMDg5NkMxMC4yNjM3IDEzLjQxNSA5LjczNjAyIDEzLjQxNSA5LjQxMDU4IDEzLjA4OTZMNC40MTA1OCA4LjA4OTU4QzQuMDg1MTQgNy43NjQxNCA0LjA4NTE0IDcuMjM2NTEgNC40MTA1OCA2LjkxMTA3WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+") no-repeat right;*/
 	}
 }
 

package/compiled_src/chatbox/Widget.js

@@ -330,6 +330,94 @@ class Widget extends _common.Com {
       formData
     });
   }
+  renderCheckboxField(field) {
+    let items = _index.default.get(field, 'def.items', []);
+    let values = [];
+    let value = field.value || '';
+    if (value) values = value.split(',');
+    return (0, _preact.h)("div", null, _index.default.map(items, item => {
+      return (0, _preact.h)("div", {
+        class: "checkbox"
+      }, (0, _preact.h)("input", {
+        type: "checkbox",
+        id: 'form-checkbox' + encode(field.key) + item.value,
+        onChange: e => this.toggleCheckboxField(field.key, item.value),
+        checked: values.includes(item.value)
+      }), (0, _preact.h)("label", {
+        class: "checkbox--label",
+        for: 'form-checkbox' + encode(field.key) + item.value
+      }, this.props.t.i18n(item.i18n_label) || item.label || item.value), (0, _preact.h)("div", {
+        class: "checkbox--check"
+      }, (0, _preact.h)("div", null)));
+    }));
+  }
+  toggleCheckboxField(key, v) {
+    let formData = _index.default.cloneDeep(this.state.formData);
+    let field = _index.default.find(formData, (f, fkkey) => f.key === key);
+    if (!field) return;
+    let value = field.value || '';
+    let values = [];
+    if (value) values = value.split(',');
+    if (values.includes(v)) {
+      values = _index.default.filter(values, value => value !== v);
+    } else {
+      values.push(v);
+    }
+    field.value = values.join(',');
+    this.setState({
+      formData
+    });
+  }
+  renderRadioField(field) {
+    let items = _index.default.get(field, 'def.items', []);
+    let value = field.value || '';
+    return (0, _preact.h)("div", null, _index.default.map(items, item => {
+      return (0, _preact.h)("div", {
+        class: "radio"
+      }, (0, _preact.h)("input", {
+        type: "radio",
+        name: 'form-radio' + encode(field.key),
+        id: 'form-radio' + encode(field.key) + item.value,
+        onChange: e => this.toggleRadioField(field.key, item.value),
+        checked: value === item.value
+      }), (0, _preact.h)("label", {
+        class: "radio--label",
+        for: 'form-radio' + encode(field.key) + item.value
+      }, this.props.t.i18n(item.i18n_label) || item.label || item.value), (0, _preact.h)("div", {
+        class: "radio--check"
+      }, (0, _preact.h)("div", null)));
+    }));
+  }
+  toggleRadioField(key, v) {
+    let formData = _index.default.cloneDeep(this.state.formData);
+    let field = _index.default.find(formData, (f, fkkey) => f.key === key);
+    if (!field) return;
+    field.value = v;
+    this.setState({
+      formData
+    });
+  }
+  selectDropdownField(key, v) {
+    let formData = _index.default.cloneDeep(this.state.formData);
+    let field = _index.default.find(formData, (f, fkkey) => f.key === key);
+    if (!field) return;
+    field.value = v;
+    this.setState({
+      formData
+    });
+  }
+  renderDropdownField(field) {
+    let items = _index.default.get(field, 'def.items', []);
+    return (0, _preact.h)("select", {
+      class: "form-control",
+      value: field.value,
+      onChange: e => this.selectDropdownField(field.key, e.target.value)
+    }, (0, _preact.h)("option", {
+      value: ""
+    }, "-- ", this.props.t('no_select'), " --"), _index.default.map(items, item => (0, _preact.h)("option", {
+      value: item.value
+    }, this.props.t.i18n(item.i18n_label) || item.label || item.value)));
+  }
   renderFields() {
     if (_index.default.size(this.state.formData) === 0) return null;
     let $fields = _index.default.map(this.state.formData, (field, key) => {
@@ -348,6 +436,23 @@ class Widget extends _common.Com {
             row: "4",
             class: "form-control"
           });
+        } else if (_index.default.get(field, 'def.select') === 'checkbox') {
+          $field = this.renderCheckboxField(field);
+        } else if (_index.default.get(field, 'def.select') === 'radio') {
+          $field = this.renderRadioField(field);
+        } else if (_index.default.get(field, 'def.select') === 'dropdown') {
+          $field = this.renderDropdownField(field);
+        } else if (_index.default.get(field, 'def.multiple_line')) {
+          $field = (0, _preact.h)("textarea", {
+            class: "form-control",
+            ref: ref => {
+              this['form_' + encode(key)] = ref;
+            },
+            value: field.value || '',
+            onInput: e => this.onInputChange(key, e.target.value),
+            row: "4",
+            class: "form-control"
+          });
         } else {
           $field = (0, _preact.h)("input", {
             value: field.value || '',
@@ -680,6 +785,12 @@ class Widget extends _common.Com {
     let convo = this.props.store.matchConvo(this.props.cid) || {};
     if (convo.state === 'ended') return true;
     if (convo.state && convo.state !== 'pending') delete formData.group;
+
+    let isAllFiledEmpty = true;
+    _index.default.each(formData, field => {
+      if (field.value) isAllFiledEmpty = false;
+    });
+    if (isAllFiledEmpty && !this.userHasSent(this.props.cid)) return true;
     return !!_index.default.find(formData, field => field.is_required && (field.value == null || field.value === ''));
   }
   renderConvoSummary(convo) {

package/package.json

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

package/src/chatbox/Widget.js

@@ -277,6 +277,117 @@ export default class Widget extends Com {
 		this.setState({formData})
 	}
 
+	renderCheckboxField(field) {
+		let items = sb.get(field, 'def.items', [])
+		let values = []
+		let value = field.value || ''
+		if (value) values = value.split(',')
+
+		return (
+			<div>
+				{sb.map(items, (item) => {
+					return (
+						<div class='checkbox'>
+							<input
+								type='checkbox'
+								id={'form-checkbox' + encode(field.key) + item.value}
+								onChange={(e) => this.toggleCheckboxField(field.key, item.value)}
+								checked={values.includes(item.value)}
+							/>
+							<label class='checkbox--label' for={'form-checkbox' + encode(field.key) + item.value}>
+								{this.props.t.i18n(item.i18n_label) || item.label || item.value}
+							</label>
+							<div class='checkbox--check'>
+								<div></div>
+							</div>
+						</div>
+					)
+				})}
+			</div>
+		)
+	}
+
+	toggleCheckboxField(key, v) {
+		let formData = sb.cloneDeep(this.state.formData)
+		let field = sb.find(formData, (f, fkkey) => f.key === key)
+		if (!field) return
+
+		let value = field.value || ''
+		let values = []
+		if (value) values = value.split(',')
+		if (values.includes(v)) {
+			values = sb.filter(values, (value) => value !== v)
+		} else {
+			values.push(v)
+		}
+
+		field.value = values.join(',')
+		this.setState({formData})
+	}
+
+	renderRadioField(field) {
+		let items = sb.get(field, 'def.items', [])
+		let value = field.value || ''
+
+		return (
+			<div>
+				{sb.map(items, (item) => {
+					return (
+						<div class='radio'>
+							<input
+								type='radio'
+								name={'form-radio' + encode(field.key)}
+								id={'form-radio' + encode(field.key) + item.value}
+								onChange={(e) => this.toggleRadioField(field.key, item.value)}
+								checked={value === item.value}
+							/>
+							<label class='radio--label' for={'form-radio' + encode(field.key) + item.value}>
+								{this.props.t.i18n(item.i18n_label) || item.label || item.value}
+							</label>
+							<div class='radio--check'>
+								<div></div>
+							</div>
+						</div>
+					)
+				})}
+			</div>
+		)
+	}
+
+	toggleRadioField(key, v) {
+		let formData = sb.cloneDeep(this.state.formData)
+		let field = sb.find(formData, (f, fkkey) => f.key === key)
+		if (!field) return
+
+		field.value = v
+		this.setState({formData})
+	}
+
+	selectDropdownField(key, v) {
+		let formData = sb.cloneDeep(this.state.formData)
+		let field = sb.find(formData, (f, fkkey) => f.key === key)
+		if (!field) return
+
+		field.value = v
+		this.setState({formData})
+	}
+
+	renderDropdownField(field) {
+		let items = sb.get(field, 'def.items', [])
+		return (
+			<select
+				class='form-control'
+				value={field.value}
+				onChange={(e) => this.selectDropdownField(field.key, e.target.value)}
+			>
+				<option value=''>-- {this.props.t('no_select')} --</option>
+				{sb.map(items, (item) => (
+					<option value={item.value}>{this.props.t.i18n(item.i18n_label) || item.label || item.value}</option>
+				))}
+			</select>
+		)
+	}
+
 	renderFields() {
 		if (sb.size(this.state.formData) === 0) return null
 
@@ -300,6 +411,25 @@ export default class Widget extends Com {
 							class='form-control'
 						></textarea>
 					)
+				} else if (sb.get(field, 'def.select') === 'checkbox') {
+					$field = this.renderCheckboxField(field)
+				} else if (sb.get(field, 'def.select') === 'radio') {
+					$field = this.renderRadioField(field)
+				} else if (sb.get(field, 'def.select') === 'dropdown') {
+					$field = this.renderDropdownField(field)
+				} else if (sb.get(field, 'def.multiple_line')) {
+					$field = (
+						<textarea
+							class='form-control'
+							ref={(ref) => {
+								this['form_' + encode(key)] = ref
+							}}
+							value={field.value || ''}
+							onInput={(e) => this.onInputChange(key, e.target.value)}
+							row='4'
+							class='form-control'
+						></textarea>
+					)
 				} else {
 					$field = (
 						<input
@@ -717,6 +847,14 @@ export default class Widget extends Com {
 		// allow button "Tiep tuc chat" display when sent quick_replies msg
 		//if (this.userHasSent(this.props.cid)) return false
 		if (convo.state && convo.state !== 'pending') delete formData.group
+
+		// Make sure to show form in the first time
+		let isAllFiledEmpty = true
+		sb.each(formData, (field) => {
+			if (field.value) isAllFiledEmpty = false
+		})
+		if (isAllFiledEmpty && !this.userHasSent(this.props.cid)) return true
+
 		return !!sb.find(formData, (field) => field.is_required && (field.value == null || field.value === ''))
 	}