@subiz/widget-v4 4.1.62 → 4.1.65

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.62",
+	"version": "4.1.65",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -19,7 +19,7 @@
 		"file-loader": "^6.2.0",
 		"less": "^4.2.0",
 		"less-loader": "^12.2.0",
-		"preact": "^10.19.6"
+		"preact": "10.19.3"
 	},
 	"devDependencies": {
 		"@babel/cli": "^7.23.9",

package/src/chatbox/Widget.js

@@ -43,12 +43,14 @@ export default class Widget extends Com {
 	msgInput = createRef()
 	componentDidMount() {
 		if (!this.props.store.isMobile()) this.focusInput()
+		this.updateFormDataFields()
 	}
 
 	componentDidUpdate(prevProp) {
 		if (prevProp.isShow !== this.props.isShow) {
 			if (this.props.isShow && !this.props.store.isMobile()) this.focusInput()
 			if (this.props.isShow && this.props.store.isMobile()) this.blur()
+			this.updateFormDataFields()
 		}
 
 		if (prevProp.cid !== this.props.cid) {
@@ -62,9 +64,9 @@ export default class Widget extends Com {
 				this.events && this.events.focus()
 				if (!this.props.store.isMobile()) this.focusInput()
 			}, 100)
+			this.updateFormDataFields()
 		}
-
-		this.updateFormDataFields()
+		// this.updateFormDataFields()
 	}
 
 	shouldShowForm() {
@@ -85,6 +87,7 @@ export default class Widget extends Com {
 
 	render() {
 		let showform = this.shouldShowForm()
+		let formName = ''
 
 		let form
 		// choose form to display
@@ -97,11 +100,13 @@ export default class Widget extends Com {
 		if (this.isOffline(acc, accountSetting) && offlineEnabled) {
 			form = accountSetting.offline_form
 			submitLabel = this.props.t('offline_form_btn')
+			formName = 'offline'
 		}
 
 		if (this.props.view === 'offline_form') {
 			showform = true
 			form = accountSetting.offline_form
+			formName = 'offline'
 			submitLabel = this.props.t('offline_form_btn')
 		}
 
@@ -109,11 +114,12 @@ export default class Widget extends Com {
 			showform = true
 			form = accountSetting.prechat_form
 			submitLabel = this.props.t('prechat_form_btn')
+			formName = 'prechat'
 		}
 
 		let $body = null
 		if (this.props.view === 'list') $body = this.renderConvoList()
-		else if (showform) $body = this.renderForm(form, submitLabel)
+		else if (showform) $body = this.renderForm(form, submitLabel, formName)
 		else $body = this.renderChat()
 
 		let position = sb.get(accountSetting, 'desktop_button.position') || 'right'
@@ -138,7 +144,8 @@ export default class Widget extends Com {
 		)
 	}
 
-	async submitPrechatForm(form) {
+	async submitPrechatForm(form, fornName) {
+		if (this.state.submiting) return
 		// check error first
 		var hasError = false
 		sb.map(this.state.formData, (field, key) => {
@@ -183,8 +190,21 @@ export default class Widget extends Com {
 		let firstmsg = sb.get(data, 'question.value')
 		let groupid = sb.get(data, 'group.value', '')
 
+		// creating convo
+		this._creating = (this._creating || 0) + 1
+		let _creating = this._creating
+		this.setState({creating: true})
+		let out = await this.props.store.submitForm(
+			'chatbox_' + fornName,
+			sb.map(data, (field, key) => {
+				return {key: key, type: field.type, value: field.value + ''}
+			}),
+			user,
+		)
+
+		if (_creating != this._creating) return // outdated
 		if (this.props.cid) {
-			this.props.store.setUser(user)
+			// this.props.store.setUser(user)
 			this.setState({clickedJoin: false})
 			// form will auto disappear after rerender
 			await this.props.store.sendConvoEvent(this.props.cid, 'message_sent', {
@@ -195,36 +215,38 @@ export default class Widget extends Com {
 					attachments: this.state.quickReplyMessage.attachments,
 				},
 			})
-
+			if (_creating != this._creating) return // outdated
 			// reset quickReplyMessage
-			this.setState({quickReplyMessage: {}})
+			this.setState({creating: false, quickReplyMessage: {}})
 
 			// end_conversation_after_submit only for offline form or prechat form
 			if (form.end_conversation_after_submit) await this.props.store.endConvo(this.props.cid)
+			if (_creating != this._creating) return // outdated
 			return
 		}
 
-		// creating convo
-		this.setState({creating: true})
 		let message = {text: firstmsg, format: 'plaintext'}
 		let req = {group_id: groupid, message: firstmsg, locale: this.props.t.locale(), initial_by: user.id}
 
 		this.setState({creatingError: null})
-		await this.props.store.setUser(user)
+		// await this.props.store.setUser(user)
 		const {error, convo} = await this.props.store.startConvo(req)
+
+		if (_creating != this._creating) return // outdated
 		if (error) {
 			this.setState({creating: false, creatingError: error})
 			return
 		}
 		let newconvoid = convo.id
 		this.userSent[newconvoid] = true
-		this.props.onGo({view: 'chat', cid: newconvoid})
-		this.props.store.sendConvoEvent(newconvoid, 'message_sent', {message})
+		await this.props.store.sendConvoEvent(newconvoid, 'message_sent', {message})
+		if (_creating != this._creating) return // outdated
 		this.setState({
 			creating: false,
 			clickedJoin: false,
 			quickReplyMessage: {},
 		})
+		this.props.onGo({view: 'chat', cid: newconvoid})
 		if (!this.props.store.isMobile()) this.focusInput()
 	}
 
@@ -240,7 +262,6 @@ export default class Widget extends Com {
 		}
 
 		this.setState({formData})
-
 		if (!this.props.store.isMobile()) this.focusInput()
 	}
 
@@ -401,7 +422,6 @@ export default class Widget extends Com {
 
 	renderFields() {
 		if (sb.size(this.state.formData) === 0) return null
-
 		let $fields = sb.map(this.state.formData, (field, key) => {
 			// not display question when click bot quick reply
 			if (this.state.quickReplyMessage.text && key === 'question') return null
@@ -437,6 +457,7 @@ export default class Widget extends Com {
 							}}
 							value={field.value || ''}
 							onInput={(e) => this.onInputChange(key, e.target.value)}
+							onChange={(e) => this.onInputChange(key, e.target.value)}
 							row='4'
 							class='form-control'
 						></textarea>
@@ -446,6 +467,7 @@ export default class Widget extends Com {
 						<input
 							value={field.value || ''}
 							onInput={(e) => this.onInputChange(key, e.target.value)}
+							onChange={(e) => this.onInputChange(key, e.target.value)}
 							ref={(ref) => {
 								this['form_' + encode(key)] = ref
 							}}
@@ -537,9 +559,8 @@ export default class Widget extends Com {
 				label = field.label || this.props.t('your_question')
 			}
 			if (field.label) label = field.label
-
 			return (
-				<div>
+				<div key={'form_' + encode(key)}>
 					<div class='label'>
 						{label}
 						{field.is_required ? <span class='ml-1 red'>*</span> : ''}
@@ -552,15 +573,7 @@ export default class Widget extends Com {
 		return <div class='pt-2'>{$fields}</div>
 	}
 
-	renderForm(form, submitLabel) {
-		let $loading = null
-		if (this.state.creating)
-			$loading = (
-				<span class='ml-2'>
-					<Spinner size='16' mode='white' />
-				</span>
-			)
-
+	renderForm(form, submitLabel, formName) {
 		let title = this.props.t.i18n(sb.get(form, `i18n_title`, {}))
 		if (!title) title = sb.get(form, 'title', this.props.t('capture_lead_title'))
 		// replace ↵ character
@@ -581,8 +594,12 @@ export default class Widget extends Com {
 				</div>
 
 				<div class='message-input message-input--preform'>
-					<button class='btn--start-convo' onClick={(_) => this.submitPrechatForm(form)}>
-						{submitLabel} {$loading}
+					<button
+						class='btn--start-convo'
+						onClick={(_) => this.submitPrechatForm(form, formName)}
+						disabled={this.state.creating}
+					>
+						{submitLabel}
 					</button>
 				</div>
 			</div>
@@ -710,23 +727,27 @@ export default class Widget extends Com {
 
 		let text = message.text
 		if (!this.props.cid) {
-			this.creating = true
+			this._creating = (this._creating || 0) + 1
+			let _creating = this._creating
+			this.setState({creating: true})
 			const {convo, error} = await this.props.store.startConvo({
 				locale: this.props.t.locale(),
 				message: text,
 				initial_by: this.props.store.matchUser().id,
 			})
+			if (_creating != this._creating) return // outdated
 			if (error) {
 				// show error and try again
 			}
-			this.creating = false
-			this.props.store.sendConvoEvent(convo.id, 'message_sent', {message})
+			await this.props.store.sendConvoEvent(convo.id, 'message_sent', {message})
+			if (_creating != this._creating) return // outdated
+			this.setState({creating: false})
 
 			this.props.onGo({view: 'chat', cid: convo.id})
-
 			return
 		}
-		this.props.store.sendConvoEvent(this.props.cid, 'message_sent', {message})
+		await this.props.store.sendConvoEvent(this.props.cid, 'message_sent', {message})
+		this.setState({creating: false})
 	}
 
 	createPostback(postback) {

package/src/store/api.js

@@ -220,6 +220,23 @@ export default class {
 	getLocaleContent = (locale) => this.apireq.get(`/accounts/${this.accid}/locales/${locale}`)
 	sendEvent = (data) =>
 		this.apireq.addQuery('shorten', true).post(`/accounts/${this.accid}/users/${this.uid}/events`, data)
+
+	submitForm = (form_id, page_url, device, data, user) =>
+		this.apireq.post(`/accounts/${this.accid}/users/${this.uid}/events`, {
+			by: {id: this.uid, device: device},
+			type: 'form_submitted',
+			data: {
+				user: user,
+				form_submitted: {
+					user_id: this.uid,
+					form_id: form_id,
+					page_url: page_url,
+					submitted_at: sb.Date.now(),
+					values: data,
+				},
+			},
+		})
+
 	sendTyping = (cid) => this.apireq.post(`/accounts/${this.accid}/conversations/${cid}/typing`)
 
 	sendLostFocus = (device, productid, source_id, sku) =>

package/src/store/api_fake.js

@@ -63,6 +63,9 @@ export default class {
 		Promise.resolve({body: makeFakeConvo(this.accid, 'csqwudlkftltnbebvq', this.uid, this.agentid), code: 200})
 	getLocaleContent = (locale) => this.apireq.get(`/accounts/${this.accid}/locales/${locale}`)
 	sendEvent = (data) => OK200
+
+	submitForm = (form_id, page_url, device, data, user) => OK200
+
 	sendTyping = (cid) => OK200
 
 	sendPresence = (data) => OK200

package/src/store/store.js

@@ -372,16 +372,16 @@ export default class Store {
 				return
 			}
 
-				if (this._track_page_view) {
-						this.api.sendContentView(
-								this.device,
-								location.href,
-								document.title,
-								this._currentViewingProduct.id,
-								this._currentViewingProduct.source_id,
-								this._currentViewingProduct.sku,
-						)
-				}
+			if (this._track_page_view) {
+				this.api.sendContentView(
+					this.device,
+					location.href,
+					document.title,
+					this._currentViewingProduct.id,
+					this._currentViewingProduct.source_id,
+					this._currentViewingProduct.sku,
+				)
+			}
 		},
 		1000, // dont send presence update too tight
 		{leading: false}, // dont send right after load. should send after content_view
@@ -572,6 +572,12 @@ export default class Store {
 		return this.reconnectGate.open()
 	}
 
+	async submitForm(formid, data, user) {
+		await this.readyGate.entry()
+		if (user) await this.setUser(user)
+		return this.api.submitForm(formid, document.URL, this.device, data, user)
+	}
+
 	// set user info, keeping old user id and account id
 	async setUser(user) {
 		if (!user) return
@@ -814,7 +820,6 @@ export default class Store {
 			}
 
 			convo.last_message_sent = ev
-			// this.handleFormSubmit(convoKey, ev)
 		}
 
 		// dont store pong and typing
@@ -825,45 +830,6 @@ export default class Store {
 		this.pubsub.publish('account')
 	}
 
-	handleFormSubmit(convoKey, ev) {
-		// find form submit
-		if (ev.type !== 'message_sent') return
-		// has form submit
-		let formSubmits = []
-		let attachments = sb.get(ev, 'data.message.attachments') || []
-		sb.each(attachments, (att) => {
-			if (!att) return
-			if (att.type !== 'form_submit') return
-			formSubmits.push(att.form_submit)
-		})
-
-		sb.each(formSubmits, (submit) => {
-			let formev = sb.get(this.convoEventM, convoKey + '.' + submit.form_message_id)
-			if (!formev) return
-
-			// find form attachment
-			let forms = sb.filter(sb.get(formev, 'data.message.attachments'), (att) => {
-				if (!att) return false
-				if (att.type !== 'form' && att.type !== 'ask_info_form') return false
-				return true
-			})
-
-			sb.each(forms, (form) => {
-				form = form.form
-				sb.each(form.fields, (formfield) => {
-					sb.each(submit.fields, (submitfield) => {
-						if (formfield.name !== submitfield.name) return
-						if (formfield.default_answer) return
-
-						formfield.default_answer = submitfield.value
-					})
-				})
-			})
-
-			if (sb.size(forms) > 0) this.pubsub.publish('state.convoEventM', this.convoEventM, convoKey)
-		})
-	}
-
 	typing(cid) {
 		if (!cid) return
 		this._typing(cid)

package/dist/18d7db7ca8c.104.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunk_subiz_widget_v4=self.webpackChunk_subiz_widget_v4||[]).push([[104],{3104:(t,e,s)=>{s.r(e),s.d(e,{default:()=>l});var i=s(5780),o=s(4284),n=s(6304);let a=s.e(756).then(s.bind(s,3756));class l extends n.Sq{constructor(t){var e,s,o,n;super(t),e=this,o={close:!0,cssready:!1,closeAnimation:!0,imageReady:!1,user:{},timestamp:"",message:"",title:"",last_show:0},(s="symbol"==typeof(n=function(t,e){if("object"!=typeof t||!t)return t;var s=t[Symbol.toPrimitive];if(void 0!==s){var i=s.call(t,"string");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(s="state"))?n:String(n))in e?Object.defineProperty(e,s,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[s]=o,i.c.setTimeout((async()=>{let{body:t}=await this.props.store.sendImpression(this.props.plugin.id);this.impressionToken=i.c.get(t,"impression_token")||"";let e=i.c.get(this.props,"plugin.notification.background_url");i.c.preloadImg(e,(()=>this.setState({imageReady:!0})))}))}setOver(t){this.mouse_leave=t?0:i.c.Date.now()}randomTimestampt(){let t=Math.floor(5*Math.random());return 0==t?this.props.t("just_now"):1==t?"1 "+this.props.t("minute_ago"):2==t?"2 "+this.props.t("minutes_ago"):3==t?"3 "+this.props.t("minutes_ago"):"4 "+this.props.t("minutes_ago")}onClick(t){if(this.props.plugin._dont_follow)return;this.props.store.sendConversion(this.props.plugin.id,null,this.impressionToken);let e=i.c.get(this.props,"plugin.notification.url");return e?(e.startsWith("http://")||e.startsWith("https://")||(e="//"+e),i.c.get(this.props,"plugin.notification.new_tab",!1)?window.open(e):void(window.location.href=e)):void 0}onCloseButtonClick(t){t.preventDefault(),t.stopPropagation(),this.setClose(!0)}renderCloseButton(){return(0,o.h)("div",{class:"btn_close",onClick:t=>this.onCloseButtonClick(t)},(0,o.h)("svg",{class:"btn_close__icon",xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24","stroke-linecap":"round","stroke-linejoin":"round"},(0,o.h)("line",{x1:"18",y1:"6",x2:"6",y2:"18",style:"stroke-width: 3 !important;"}),(0,o.h)("line",{x1:"6",y1:"6",x2:"18",y2:"18",style:"stroke-width: 3 !important;"})))}async waitForT(){if(!this.props.t)return await i.c.sleep(100),this.waitForT()}async setClose(t){if(await this.waitForT(),this.props.t){if(!t){i.c.clearTimeout(this.lastCloseTimeout),this.setState({closeAnimation:!1});let t=this.randomTimestampt(),e=i.c.get(this.props,"plugin.notification.profiles",[]),s=e[Math.floor(Math.random()*i.c.size(e))]||{};s.avatar_url&&s.avatar_url.startsWith("http")&&await i.c.preloadImg(s.avatar_url),i.c.map(i.c.get(this.props.plugin,"notification.custom_avatar_urls"),(t=>{e.push({type:"person",fullname:r(),avatar_url:t,email:r().split(" ").join(".").toLowerCase()+"@gmail.com",address:h(),phone:"+84"+Math.floor(10*Math.random())+Math.floor(10*Math.random())+Math.floor(10*Math.random())+Math.floor(10*Math.random())+Math.floor(10*Math.random())+Math.floor(10*Math.random())+"xxxx",age:15+Math.floor(20*Math.random())})}));let o=i.c.get(this.props,"plugin.notification.i18n_message_quill_deltas",[]),n=o[Math.floor(Math.random()*i.c.size(o))],a=i.c.get(this.props,"plugin.notification.message_quill_deltas",[]),l=a[Math.floor(Math.random()*i.c.size(a))],p=i.c.get(this.props,"plugin.notification.i18n_title_quill_delta");return this.setState({close:!1,last_show:i.c.Date.now(),timestamp:t,user:s,title:this.props.t.i18n(p)||i.c.get(this.props,"plugin.notification.title_quill_delta"),message:this.props.t.i18n(n)||l})}this.setState({closeAnimation:!0}),this.mouse_leave=i.c.Date.now(),this.lastCloseTimeout=i.c.setTimeout((()=>this.setState({close:!0,closeAnimation:!1})),150),this.props.plugin._dont_close&&i.c.setTimeout((()=>this.setState({closeAnimation:!1,close:!1})),1e3)}}async refreshCSS(){let t=this.props.store.matchPlugin();if(!i.c.find(t,(t=>t.id===this.props.plugin.id)))return;let e=(await a).default.default.toString();i.c.setCss(this.props.plugin.id,this.$cssStyleDiv,e),this.setClose(this.state.close)}componentWillUnmount(){i.c.clearInterval(this.interval),i.c.setCss(this.props.plugin.id,this.$cssStyleDiv,"")}async componentDidMount(){this.setState({last_show:i.c.Date.now()}),this.$cssStyleDiv=document.getElementById("subiz-style-for-"+this.props.plugin.id),this.$cssStyleDiv||(this.$cssStyleDiv=document.createElement("style"),document.head.appendChild(this.$cssStyleDiv),this.$cssStyleDiv.type="text/css",this.$cssStyleDiv.id="subiz-style-for-"+this.props.plugin.id),this.props.store.onResetCSS(this,(()=>this.refreshCSS())),await this.refreshCSS(),this.interval=i.c.setInterval((()=>{if(this.props._destroy)return this.componentWillUnmount();let t=this.mouse_leave;return 0===t&&(t=i.c.Date.now()),i.c.Date.now()-t<1e3?void 0:this.state.close||this.props.plugin._dont_close?i.c.Date.now()-this.state.last_show>this.props.plugin.notification.interval_sec?this.setClose(!1):void 0:i.c.Date.now()-this.state.last_show>8e3?this.setClose(!0):void 0}),1e3),i.c.setTimeout((()=>{this.setState({cssready:!0}),this.setClose(!1)}),50)}renderTextFromQuillDelta(t,e){let s=i.c.parseJSON(t);if(!s||!s.ops)return null;let n=i.c.map(s.ops,(t=>{let s=null;if(!t.insert)return null;if("string"==typeof t.insert&&(s=t.insert),i.c.get(t,"insert.dynamicField")){let o=i.c.get(t,"insert.dynamicField.key");"user.fullname"===o&&(s=e.fullname),"user.email"===o&&(s=e.email),"user.address"===o&&(s=e.address),"user.phone"===o&&(s=e.phone)}return i.c.get(t,"attributes.bold")&&(s=(0,o.h)("b",null,s)),i.c.get(t,"attributes.italic")&&(s=(0,o.h)("b",null,s)),s})).filter((t=>t));return 1!=n.length||"\n"!=n[0]&&""!=n[0]?n:[]}render(){if(!this.props.t)return null;if(!this.state.cssready)return null;if(!this.state.imageReady)return null;if(this.state.close)return null;if(!this.state.message)return null;let t=i.c.get(this.props.plugin,"notification",{});if(!t)return null;let e="",s=i.c.get(t,"position","bottom-left");this.props.mobile&&(s=i.c.get(t,"mobile_position",s)),"top-left"===s||"top-right"===s?e="fadeInDown":"top-center"===s?e="fadeInDownCenter":"bottom-center"===s?e="fadeInUpCenter":("bottom-right"===s||(s="bottom-left"),e="fadeInUpBig");let n=this.state.user||{},a=t.subtext_style||{};void 0===a.color&&(a.color=i.c.get(t,"message_style.color","black"));let l="position: fixed !important; z-index: 1000000000 !important";this.props.plugin._preview&&(l="position: absolute !important;"),this.state.closeAnimation&&(e="fadeOut");let r=null;n.avatar_url&&(r=(0,o.h)("img",{alt:"notification avatar",class:"notif_avatar__img",src:n.avatar_url}));let h=(0,o.h)("div",{class:"notif_time",style:i.c.js2css(t.subtext_style)},this.state.timestamp),p=this.renderTextFromQuillDelta(this.state.title,n),c=this.renderTextFromQuillDelta(this.state.message,n);return i.c.size(p)||i.c.size(c)||(h=null),(0,o.h)("div",{class:e+" notif notif__"+s,onClick:t=>this.onClick(t),onmouseover:t=>this.setOver(!0),style:l,onmouseleave:t=>this.setOver(!1)},(0,o.h)("div",{style:"position: relative !important; display: flex !important; align-items: center !important;"},(0,o.h)("img",{alt:"notification background",class:"notif_bg",src:t.background_url,style:i.c.js2css(t.background_style)}),this.renderCloseButton(),(0,o.h)("div",{class:"notif_avatar",style:i.c.js2css(t.avatar_style)},r),(0,o.h)("div",{class:"notif_body"},(0,o.h)("div",{class:"notif_title",style:i.c.js2css(t.title_style)},p),(0,o.h)("div",{class:"notif_message",style:i.c.js2css(t.message_style)},c),h)))}}function r(){let t=["Kiều Thanh","Phương Anh","Lê Thùy Linh","Trang Nguyễn","Thanh Hoa","Hoài Đức","Huơng Giang"];return t[Math.floor(Math.random()*t.length)]}function h(){let t=["Dịch Vọng Hậu, Cầu Giấy","Quận 1, TP Hồ Chí Minh","Ngõ 34 Tôn Thất Thuyết","87 Phạm Hùng","Đống Đa, Hà Nội"];return t[Math.floor(Math.random()*t.length)]}}}]);