@subiz/widget-v4 4.0.95 → 4.0.97

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,13 @@ 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) return true;
+
     return !!_index.default.find(formData, field => field.is_required && (field.value == null || field.value === ''));
   }
   renderConvoSummary(convo) {

package/compiled_src/store/api.js

@@ -42,7 +42,7 @@ class _default {
     _defineProperty(this, "getLocaleContent", locale => this.apireq.get(`/accounts/${this.accid}/locales/${locale}`));
     _defineProperty(this, "sendEvent", data => this.apireq.post(`/users/${this.uid}/events`, data));
     _defineProperty(this, "sendTyping", cid => this.apireq.post(`/conversations/${cid}/typing`));
-    _defineProperty(this, "sendPresence", (device, is_focused, productid, source_id, sku) => this.sendEvent({
+    _defineProperty(this, "sendLostFocus", (device, productid, source_id, sku) => this.sendEvent({
       by: {
         id: this.uid,
         device: device
@@ -54,7 +54,7 @@ class _default {
           viewing_product_source_id: source_id,
           viewing_product_id: productid,
           pinged: _index.default.Date.now(),
-          is_focused
+          is_focused: false
         }
       }
     }));

package/compiled_src/store/store.js

@@ -117,7 +117,12 @@ class Store {
       await this.readyGate.entry();
       if (!_index.default.get(this.kv.match('user'), 'id')) return;
       if (_index.default.isUserBanned(this.kv.match('user'))) return;
-      return this.api.sendPresence(this.device, this.browserVisibility === 'visible' && document.hasFocus(), this._currentViewingProduct.id, this._currentViewingProduct.source_id, this._currentViewingProduct.sku);
+      let hasfocus = this.browserVisibility === 'visible' && document.hasFocus();
+      if (!hasfocus) {
+        this.api.sendLostFocus(this.device, this._currentViewingProduct.id, this._currentViewingProduct.source_id, this._currentViewingProduct.sku);
+        return;
+      }
+      this.api.sendContentView(this.device, location.href, document.title, this._currentViewingProduct.id, this._currentViewingProduct.source_id, this._currentViewingProduct.sku);
     }, 1000,
     {
       leading: false
@@ -528,11 +533,9 @@ class Store {
   }
 
   async track() {
-    let user = this.kv.match('user') || {};
     let out = await this.api.sendContentView(this.device, location.href, document.title, this._currentViewingProduct.id, this._currentViewingProduct.source_id, this._currentViewingProduct.sku);
     let traffic_source = _index.default.get(out, 'body.by.device.source', '');
     if (traffic_source) this.kv.put('traffic_source', traffic_source);
-    this.sendPresence();
   }
   async onWs(ev) {
     if (!ev || !ev.type) return;

package/package.json

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

package/src/store/api.js

@@ -179,7 +179,7 @@ export default class {
 	sendEvent = (data) => this.apireq.post(`/users/${this.uid}/events`, data)
 	sendTyping = (cid) => this.apireq.post(`/conversations/${cid}/typing`)
 
-	sendPresence = (device, is_focused, productid, source_id, sku) =>
+	sendLostFocus = (device, productid, source_id, sku) =>
 		this.sendEvent({
 			by: {id: this.uid, device: device},
 			type: 'presence_updated',
@@ -189,7 +189,7 @@ export default class {
 					viewing_product_source_id: source_id,
 					viewing_product_id: productid,
 					pinged: sb.Date.now(),
-					is_focused,
+					is_focused: false,
 				},
 			},
 		})

package/src/store/store.js

@@ -322,9 +322,22 @@ export default class Store {
 			await this.readyGate.entry()
 			if (!sb.get(this.kv.match('user'), 'id')) return // store not init
 			if (sb.isUserBanned(this.kv.match('user'))) return
-			return this.api.sendPresence(
+
+			let hasfocus = this.browserVisibility === 'visible' && document.hasFocus()
+			if (!hasfocus) {
+				this.api.sendLostFocus(
+					this.device,
+					this._currentViewingProduct.id,
+					this._currentViewingProduct.source_id,
+					this._currentViewingProduct.sku,
+				)
+				return
+			}
+
+			this.api.sendContentView(
 				this.device,
-				this.browserVisibility === 'visible' && document.hasFocus(),
+				location.href,
+				document.title,
 				this._currentViewingProduct.id,
 				this._currentViewingProduct.source_id,
 				this._currentViewingProduct.sku,
@@ -617,7 +630,6 @@ export default class Store {
 
 	// send the content view, the first presence and record domain
 	async track() {
-		let user = this.kv.match('user') || {}
 		let out = await this.api.sendContentView(
 			this.device,
 			location.href,
@@ -629,8 +641,6 @@ export default class Store {
 
 		let traffic_source = sb.get(out, 'body.by.device.source', '')
 		if (traffic_source) this.kv.put('traffic_source', traffic_source)
-
-		this.sendPresence()
 	}
 
 	matchTrafficSource = () => this.kv.match('traffic_source')