@subiz/widget-v4 4.0.83 → 4.0.87

package/index.html

@@ -33,7 +33,7 @@
 			window.subiz.q = []
 			// set account it in the very first call
 			window.subiz('setAccount', accid)
-			window.subiz('expandWidget')
+			// window.subiz('expandWidget')
 
 			if (accid == 'acpxkgumifuoofoosble') {
 				window.subiz('setViewingProduct', {id: '220170', sku: 'ipx', source_id: 'IPHONE10'})

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.0.83",
+	"version": "4.0.87",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -14,28 +14,28 @@
 		"@subiz/storage": "0.0.8",
 		"@subiz/wsclient": "^3.1.7",
 		"cookie_js": "1.4.2",
-		"core-js": "^3.22.8",
+		"core-js": "^3.25.0",
 		"css-loader": "5.2.7",
 		"file-loader": "^6.2.0",
-		"less": "^4.1.2",
+		"less": "^4.1.3",
 		"less-loader": "^11.0.0",
-		"marked": "^4.0.16",
-		"preact": "^10.7.3"
+		"marked": "^4.0.19",
+		"preact": "^10.10.6"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.17.10",
-		"@babel/core": "^7.18.2",
-		"@babel/plugin-proposal-class-properties": "^7.17.12",
-		"@babel/plugin-transform-react-jsx": "^7.17.12",
-		"@babel/preset-env": "^7.18.2",
+		"@babel/cli": "^7.18.10",
+		"@babel/core": "^7.18.13",
+		"@babel/plugin-proposal-class-properties": "^7.18.6",
+		"@babel/plugin-transform-react-jsx": "^7.18.10",
+		"@babel/preset-env": "^7.18.10",
 		"babel-loader": "^8.2.5",
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.5.0",
-		"prettier": "^2.6.2",
-		"puppeteer": "^14.2.1",
-		"webpack": "^5.73.0",
-		"webpack-bundle-analyzer": "^4.5.0",
-		"webpack-cli": "^4.9.2",
-		"webpack-dev-server": "^4.9.1"
+		"prettier": "^2.7.1",
+		"puppeteer": "^15.4.0",
+		"webpack": "^5.74.0",
+		"webpack-bundle-analyzer": "^4.6.1",
+		"webpack-cli": "^4.10.0",
+		"webpack-dev-server": "^4.10.1"
 	}
 }

package/src/chatbox/AgentsAvatar.js

@@ -10,6 +10,26 @@ export default class AgentsAvatar extends Com {
 
 	render() {
 		let accountSetting = this.props.plugin.chatbox
+		let acc = this.props.store.matchAccount()
+		var tooltippos = this.props.tooltipPos || 'bottom'
+		var mode = this.props.mode || 'primary'
+
+		if (accountSetting && accountSetting.hide_agent_profile) {
+			return (
+				<div class={`group-avatar group-avatar--${mode}`}>
+					<div class='d-inline-block pos-relative' data-tooltip={acc.name} data-tooltip-position={tooltippos}>
+						<img
+							width={35}
+							height={35}
+							alt='agent avatar left'
+							class='avatar group-avatar--agent-left'
+							src={this.props.store.replaceFileUrl(acc.logo_url) || require('../../assets/img/image_default.png')}
+						/>
+					</div>
+				</div>
+			)
+		}
+
 		let agentM = this.props.store.matchAgent('*')
 		var agents = sb.map(this.props.agent_ids, (id) => agentM[id])
 		if (this.props.agent_ids === undefined || sb.size(this.props.agent_ids) === 0) {
@@ -23,10 +43,6 @@ export default class AgentsAvatar extends Com {
 		}
 
 		agents = sb.filter(agents, (ag) => !!ag)
-		let acc = this.props.store.matchAccount()
-
-		var tooltippos = this.props.tooltipPos || 'bottom'
-		var mode = this.props.mode || 'primary'
 		if (agents.length === 0) {
 			// use account avatar
 			return (
@@ -53,7 +69,8 @@ export default class AgentsAvatar extends Com {
 					<div
 						class='d-inline-block pos-relative'
 						data-tooltip={agent.fullname || acc.name}
-						data-tooltip-position={tooltippos}>
+						data-tooltip-position={tooltippos}
+					>
 						<img
 							width={35}
 							height={35}
@@ -75,7 +92,8 @@ export default class AgentsAvatar extends Com {
 					<div
 						class='d-inline-block pos-relative'
 						data-tooltip={leftAgent.fullname || acc.name}
-						data-tooltip-position={tooltippos}>
+						data-tooltip-position={tooltippos}
+					>
 						<img
 							width={35}
 							height={35}
@@ -89,7 +107,8 @@ export default class AgentsAvatar extends Com {
 					<div
 						class='d-inline-block pos-relative'
 						data-tooltip={rightAgent.fullname || acc.name}
-						data-tooltip-position={tooltippos}>
+						data-tooltip-position={tooltippos}
+					>
 						<img
 							alt='agent avatar right'
 							width={35}
@@ -114,7 +133,8 @@ export default class AgentsAvatar extends Com {
 				<div
 					class='d-inline-block pos-relative'
 					data-tooltip={leftAgent.fullname || acc.name}
-					data-tooltip-position={tooltippos}>
+					data-tooltip-position={tooltippos}
+				>
 					<img
 						width={35}
 						height={35}
@@ -128,7 +148,8 @@ export default class AgentsAvatar extends Com {
 				<div
 					class='d-inline-block pos-relative'
 					data-tooltip={middleAgent.fullname || acc.name}
-					data-tooltip-position={tooltippos}>
+					data-tooltip-position={tooltippos}
+				>
 					<img
 						alt='agent avatar middle'
 						width={35}
@@ -142,7 +163,8 @@ export default class AgentsAvatar extends Com {
 				<div
 					class='d-inline-block pos-relative'
 					data-tooltip={rightAgent.fullname || acc.name}
-					data-tooltip-position={tooltippos}>
+					data-tooltip-position={tooltippos}
+				>
 					<img
 						width={35}
 						height={35}

package/src/chatbox/ChatButton.js

@@ -175,6 +175,13 @@ export default class ChatButton extends Com {
 			position = sb.get(accountSetting, 'mobile_button.position') || position
 		}
 
+		if (accountSetting && accountSetting.hide_agent_profile) {
+			agent = Object.assign({}, account, {
+				avatar_url: account.logo_url || require('../../assets/img/image_default.png'),
+				fullname: account.name || this.props.t('agent'),
+			})
+		}
+
 		let cls = 'widget-preview widget-preview--' + position
 		if (!this.state.displayPreview) cls += ' widget-preview--hidden'
 
@@ -206,13 +213,13 @@ export default class ChatButton extends Com {
 	}
 
 	onProfileReady() {
-		if (this.state.buttonLoaded) this.setState({opacity: 1})
-		this.setState({profileLoaded: true})
+		if (this._buttonLoaded) this.setState({opacity: 1})
+		this._profileLoaded = true
 	}
 
 	onButtonReady() {
-		if (this.state.profileLoaded) this.setState({opacity: 1})
-		this.setState({buttonLoaded: true})
+		if (this._profileLoaded) this.setState({opacity: 1})
+		this._buttonLoaded = true
 	}
 
 	renderButton() {

package/src/chatbox/Event.js

@@ -90,6 +90,15 @@ export default class Event extends Com {
 		let acc = this.props.store.matchAccount()
 		var uri = acc.logo_url || require('../../assets/img/image_default.png')
 
+		if (true || sb.get(this.props, 'chatbox.hide_agent_profile')) {
+			return (
+				<div class='message-sender'>
+					<img alt='sender' class='message-sender-avatar' src={this.props.store.replaceFileUrl(uri)} />
+					<p class='message-sender-name'>{acc.name}</p>
+				</div>
+			)
+		}
+
 		let agentM = this.props.store.matchAgent('*')
 		// should replace with subiz logo
 		if (byid !== 'system' || bytype !== 'dummy') {
@@ -130,7 +139,7 @@ export default class Event extends Com {
 					<AudioAttachments store={this.props.store} ev={ev} />
 					<VideoAttachments store={this.props.store} ev={ev} />
 					<FileAttachments store={this.props.store} ev={ev} />
-					<ButtonAttachments store={this.props.store} ev={ev} t={this.props.t}/>
+					<ButtonAttachments store={this.props.store} ev={ev} t={this.props.t} />
 					<FormAttachments
 						store={this.props.store}
 						onSubmit={this.props.onFormSubmit}
@@ -139,8 +148,18 @@ export default class Event extends Com {
 						t={this.props.t}
 					/>
 					<FormSubmitAttachments store={this.props.store} ev={ev} t={this.props.t} />
-					<GenericTemplateAttachments store={this.props.store} ev={ev} onSelect={(e) => this.choosePostbackBtn(e)} t={this.props.t}/>
-					<ProductAttachments t={this.props.t} onPostback={(e) => this.choosePostbackBtn(e)} store={this.props.store} ev={ev} />
+					<GenericTemplateAttachments
+						store={this.props.store}
+						ev={ev}
+						onSelect={(e) => this.choosePostbackBtn(e)}
+						t={this.props.t}
+					/>
+					<ProductAttachments
+						t={this.props.t}
+						onPostback={(e) => this.choosePostbackBtn(e)}
+						store={this.props.store}
+						ev={ev}
+					/>
 					<OrderAttachments t={this.props.t} store={this.props.store} ev={ev} />
 					<QuickReplies store={this.props.store} ev={ev} onSelect={(e) => this.chooseQuickReply(e)} />
 				</div>
@@ -182,7 +201,7 @@ export default class Event extends Com {
 					<AudioAttachments store={this.props.store} ev={ev} />
 					<VideoAttachments store={this.props.store} ev={ev} />
 					<FileAttachments store={this.props.store} ev={ev} />
-					<ButtonAttachments store={this.props.store} ev={ev} t={this.props.t}/>
+					<ButtonAttachments store={this.props.store} ev={ev} t={this.props.t} />
 					<FormAttachments store={this.props.store} onSubmit={this.props.onFormSubmit} ref={this.refForm} ev={ev} />
 					<ProductAttachments t={this.props.t} store={this.props.store} ev={ev} />
 					<FormSubmitAttachments store={this.props.store} ev={ev} />

package/src/chatbox/Events.js

@@ -57,6 +57,7 @@ export default class Events extends Com {
 
 		let $events = sb.map(events, (ev) => (
 			<Event
+				chatbox={this.props.chatbox}
 				onLink={this.props.onLink}
 				store={this.props.store}
 				onFormSubmit={this.props.onFormSubmit}
@@ -82,7 +83,8 @@ export default class Events extends Com {
 					style={style}
 					ref={(ref) => (this.refBody = ref)}
 					class='widget-body--events-container'
-					onMouseOver={this.checkAndSeen}>
+					onMouseOver={this.checkAndSeen}
+				>
 					<div class='widget-body--events'>{$events}</div>
 					<PoweredBy store={this.props.store} />
 				</div>

package/src/chatbox/MessageInput.js

@@ -21,7 +21,7 @@ export default class MessageInput extends Com {
 			this.forceUpdate()
 		}, 500)
 
-		this.resizeInput = sb.throttle(function() {
+		this.resizeInput = sb.throttle(function () {
 			// TODO: ctrl+A then press backspace dont reset size rightaway
 			const input = this.refMessageInput.current
 			input.style.setProperty('height', '1em', 'important')
@@ -30,6 +30,12 @@ export default class MessageInput extends Com {
 		}, 5)
 	}
 
+	blur() {
+		const $input = this.refMessageInput.current
+		if (!$input) return
+		$input.blur()
+	}
+
 	render() {
 		var buttons = (
 			<div class='d-flex flex-row align-self-end'>
@@ -37,7 +43,8 @@ export default class MessageInput extends Com {
 				<div
 					data-tooltip-poasition='top-left'
 					class='message-input--button message-input--attachment-button'
-					onClick={(e) => this.selectFile(e)}></div>
+					onClick={(e) => this.selectFile(e)}
+				></div>
 			</div>
 		)
 		var msg = sb.trim(this.refMessageInput.current && this.refMessageInput.current.value)
@@ -48,7 +55,8 @@ export default class MessageInput extends Com {
 					<div
 						data-tooltip-position='top-left'
 						class='message-input--button message-input--send-button'
-						onClick={() => this.submitMessage()}></div>
+						onClick={() => this.submitMessage()}
+					></div>
 				</div>
 			)
 		}
@@ -62,7 +70,8 @@ export default class MessageInput extends Com {
 				class={`message-input ${containercls}`}
 				onClick={(e) => {
 					this.refMessageInput.current && this.refMessageInput.current.focus()
-				}}>
+				}}
+			>
 				<input class='d-none' ref={this.refFileInput} type='file' onChange={(e) => this.sendFile(e)} multiple />
 				<textarea
 					disabled={disabled}
@@ -258,7 +267,7 @@ export default class MessageInput extends Com {
 		input.focus()
 	}
 
-	onEnter = sb.throttle(function() {
+	onEnter = sb.throttle(function () {
 		this.submitMessage()
 	}, 50)
 

package/src/chatbox/Typing.js

@@ -1,24 +1,23 @@
 import sb from '../util/index.js'
-import { Com } from '../common.js'
-import { h } from 'preact'
+import {Com} from '../common.js'
+import {h} from 'preact'
 
 export default class Typing extends Com {
-	constructor (props) {
+	constructor(props) {
 		super(props)
 	}
 
-	componentDidMount () {
+	componentDidMount() {
 		this.setState({
 			isShow: false,
 			ev: {},
 		})
 
-		this.props.store.onConvoEvent(this, ev => {
+		this.props.store.onConvoEvent(this, (ev) => {
 			if (sb.convoOfEv(ev) !== this.props.cid) return
 			let user = this.props.store.matchUser()
 			if (sb.get(ev, 'by.id') === user.id) return
 
-
 			let oldby = sb.get(this.state.ev, 'by.id')
 			if (oldby && sb.get(ev, 'by.id') !== oldby) return
 
@@ -26,27 +25,27 @@ export default class Typing extends Com {
 				// stop the typing
 				if (this.timer) clearTimeout(this.timer)
 				this.timer = null
-				this.setState({ isShow: false })
+				this.setState({isShow: false})
 				return
 			}
 
 			// dont show typing of agent, some agent dont like this
-			let ag = this.props.store.matchAgent(ev.by.id)
+			let ag = this.props.store.matchAgent(ev.by.id) || {}
 			if (ag.type == 'agent') return
 
 			if (sb.get(ev, 'type') !== 'conversation_typing') return
-			this.setState({ ev: ev, isShow: true })
+			this.setState({ev: ev, isShow: true})
 			if (this.timer) clearTimeout(this.timer)
 			this.timer = setTimeout(() => {
 				if (sb.convoOfEv(ev) !== this.props.cid) return
 
 				this.timer = null
-				this.setState({ isShow: false })
+				this.setState({isShow: false})
 			}, 5000)
 		})
 	}
 
-	render () {
+	render() {
 		let account = this.props.store.matchAccount()
 		var cls = this.state.isShow ? '' : 'typing--hidden'
 		let byid = sb.get(this.state.ev, 'by.display_id', sb.get(this.state.ev, 'by.id'))

package/src/chatbox/Widget.js

@@ -18,7 +18,7 @@ const defaultAvatar = 'https://file-subiz.com/fiqoahedjbgwclpouoml-avatar_defaul
 import Spinner from './spinner.js'
 import Time from './time.js'
 import {Com} from '../common.js'
-import {h} from 'preact'
+import {h, createRef} from 'preact'
 
 //  ['cid', 'view', 'isShow'], 	// view: chat, list
 export default class Widget extends Com {
@@ -36,6 +36,7 @@ export default class Widget extends Com {
 		this.props.store.onUpdate(this, (_) => this.forceUpdate())
 	}
 
+	msgInput = createRef()
 	componentDidMount() {
 		if (!this.props.store.isMobile()) this.focusInput()
 	}
@@ -148,9 +149,11 @@ export default class Widget extends Com {
 		let data = sb.cloneDeep(this.state.formData)
 		// update user info based on form data
 		let user = sb.cloneDeep(this.props.store.matchUser())
+		let is_lead = false
 		sb.map(data, (field, key) => {
 			if (!key.startsWith('attr:')) return
 			var attr = {key: key.substr(5)}
+			is_lead = is_lead || key == 'emails' || key == 'phones'
 			if (field.type === 'number') attr.number = parseInt(field.value)
 			if (field.type === 'datetime') attr.datetime = new sb.Date(field.value).toISOString()
 			if (field.type === 'list') attr.list = field.value
@@ -158,6 +161,8 @@ export default class Widget extends Com {
 			sb.setUserAttr(user, attr)
 		})
 
+		if (is_lead) sb.setUserAttr(user, {key: 'lead_source', text: 'widget'})
+
 		let firstmsg = sb.get(data, 'question.value')
 		let groupid = sb.get(data, 'group.value', '')
 
@@ -184,8 +189,8 @@ export default class Widget extends Com {
 		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)
 		const {error, convo} = await this.props.store.startConvo(req)
-		this.props.store.setUser(user)
 		if (error) {
 			this.setState({creating: false, creatingError: error})
 			return
@@ -269,7 +274,8 @@ export default class Widget extends Com {
 							value={field.value || ''}
 							onInput={(e) => this.onInputChange(key, e.target.value)}
 							row='4'
-							class='form-control'></textarea>
+							class='form-control'
+						></textarea>
 					)
 				} else {
 					$field = (
@@ -479,7 +485,7 @@ export default class Widget extends Com {
 
 	blur() {
 		if (this.props.store.isPreview) return
-		var $input = this.msgInput
+		var $input = this.msgInput.current
 		if (!$input) return
 		setTimeout(() => $input && $input.blur())
 		setTimeout(() => $input && $input.blur(), 300) // force lose focus
@@ -507,7 +513,7 @@ export default class Widget extends Com {
 			return
 		}
 
-		var $input = this.msgInput
+		var $input = this.msgInput.current
 		if (!$input) return
 		setTimeout(() => $input.focus())
 		setTimeout(() => $input.focus(), 300) // force focus
@@ -519,7 +525,7 @@ export default class Widget extends Com {
 		this.focusInput()
 	}
 
-	async sendMessage(message) {
+	sendMessage = async (message) => {
 		let text = message.text
 		if (!this.props.cid) {
 			this.creating = true
@@ -549,9 +555,9 @@ export default class Widget extends Com {
 		let $input = (
 			<MessageInput
 				store={this.props.store}
-				ref={(ref) => (this.msgInput = ref)}
+				ref={this.msgInput}
 				cid={this.props.cid}
-				onSend={(e) => this.sendMessage(e)}
+				onSend={this.sendMessage}
 				t={this.props.t}
 			/>
 		)
@@ -573,6 +579,7 @@ export default class Widget extends Com {
 						isShow={this.props.isShow}
 						onLink={this.onLink}
 						store={this.props.store}
+						chatbox={this.props.plugin.chatbox || {}}
 						onFormSubmit={(e) => this.onEventFormSubmit(e)}
 						ref={(ref) => (this.events = ref)}
 						cid={this.props.cid}
@@ -674,6 +681,7 @@ export default class Widget extends Com {
 	}
 
 	renderConvoSummary(convo) {
+		let accountSetting = this.props.plugin.chatbox || {}
 		let agentM = this.props.store.matchAgent('*')
 
 		let ags = sb.filter(convo.members, (m) => {
@@ -683,9 +691,8 @@ export default class Widget extends Com {
 		agentids = agentids || sb.agentsOfConvo(convo)[0]
 
 		let agents = sb.map(agentids, (id) => agentM[id] || {avatar_url: defaultAvatar, fullname: 'Offline Agent'})
-
 		var name = sb.each(agents, (ag) => ag.fullname).join(', ')
-		if (!name) name = this.props.store.matchAccount().name
+		if (accountSetting.hide_agent_profile || !name) name = this.props.store.matchAccount().name
 		if (!name) name = this.props.t('agent')
 
 		var $you = null
@@ -694,7 +701,6 @@ export default class Widget extends Com {
 		}
 
 		let seen = sb.isConvoSeen(convo, this.props.store.matchUser().id)
-
 		var lastmsg = this.renderMessagePreview(convo.last_message_sent || {data: {message: sb.get(convo, 'last_message')}})
 
 		var time =

package/src/chatbox/main.js

@@ -125,8 +125,15 @@ export default class Main extends Com {
 		}
 		p = p || {}
 
-		if (this.props.store.isMobile()) modifyViewport()
+		if (!p.view && !p.cid) {
+			let convoM = this.props.store.matchConvo('*')
+			let redconvo = sb.find(convoM, (convo) => !sb.isConvoSeen(convo, this.props.store.matchUser().id))
+			// try to show first convo
+			p.cid = sb.get(redconvo, 'id', sb.get(convoM, '0.id'))
+			p.view = 'chat'
+		}
 
+		if (this.props.store.isMobile()) modifyViewport()
 		this.setState({widgetConvoId: p.cid, widgetView: p.view})
 		this.props.store.setIsOpen(true)
 

package/src/popup/popup.js

@@ -156,7 +156,8 @@ export default class Popup extends Com {
 					height='24'
 					viewBox='0 0 24 24'
 					stroke-linecap='round'
-					stroke-linejoin='round'>
+					stroke-linejoin='round'
+				>
 					<line x1='17' y1='7' x2='7' y2='17' style='stroke-width: 3 !important;'></line>
 					<line x1='7' y1='7' x2='17' y2='17' style='stroke-width: 3 !important;'></line>
 				</svg>
@@ -213,12 +214,26 @@ export default class Popup extends Com {
 			var summitFields = []
 
 			let user = sb.cloneDeep(this.props.store.matchUser())
+			let is_lead = false
+
+			// modified pairs to convert data of multiple-choice value ['khu_vuc', '1'], ['khu_vuc', '2'] => ['khu_vuc', '1,2']
+			let modifiedPairs = {}
 			for (var pair of formData.entries()) {
+				if (modifiedPairs[pair[0]]) {
+					let currentValue = sb.get(modifiedPairs, `${pair[0]}.1`, '')
+					currentValue += `,${pair[1]}`
+					sb.set(modifiedPairs, `${pair[0]}.1`, currentValue)
+				} else {
+					modifiedPairs[pair[0]] = [pair[0], pair[1]]
+				}
+			}
+
+			for (const [_, pair] of Object.entries(modifiedPairs)) {
 				let page = sb.get(this.props.plugin.popup, `pages.${this.getPageIndex()}`)
 				let form = sb.find(page.components, (com) => com.type === 'form')
 				let fields = sb.get(form, 'form.fields', [])
 
-				let field = sb.find(fields, (field) => field.key === pair[0])
+				let field = sb.find(fields, (field) => field.key === pair[0]) || {}
 				if (!field.type) return
 
 				summitFields.push({key: pair[0], type: field.type, value: sb.stringify(pair[1])})
@@ -226,10 +241,12 @@ export default class Popup extends Com {
 				let key = pair[0]
 				if (key === 'email') key = 'emails'
 				if (key === 'phone') key = 'phones'
-
+				is_lead = is_lead || key == 'emails' || key == 'phones'
 				sb.setUserAttr(user, {key: key, text: pair[1]})
 			}
+			if (is_lead) sb.setUserAttr(user, {key: 'lead_source', text: 'plugin.' + this.props.plugin.id})
 			this.props.store.sendConversion(this.props.plugin.id, summitFields, this.impressionToken)
+
 			this.props.store.setUser(user)
 		}
 
@@ -277,7 +294,8 @@ export default class Popup extends Com {
 				<div
 					class={'btn btn__primary '}
 					style={this.js2css(primarystyle)}
-					onClick={(e) => this.onButtonClick(e, 'primary')}>
+					onClick={(e) => this.onButtonClick(e, 'primary')}
+				>
 					{this.props.t.i18n(com.buttons.i18n_primary_text) || com.buttons.primary_text}
 				</div>
 			)
@@ -290,7 +308,8 @@ export default class Popup extends Com {
 				<div
 					class={'btn btn__secondary'}
 					style={this.js2css(style)}
-					onClick={(e) => this.onButtonClick(e, 'secondary')}>
+					onClick={(e) => this.onButtonClick(e, 'secondary')}
+				>
 					{this.props.t.i18n(com.buttons.i18n_secondary_text) || com.buttons.secondary_text}
 				</div>
 			)
@@ -303,7 +322,8 @@ export default class Popup extends Com {
 					display: 'flex',
 					flex_direction: buttonsstyle.flex_direction,
 					align_items: buttonsstyle.align_items,
-				})}>
+				})}
+			>
 				{$primary}
 				<div style={this.js2css({width: '10px', height: '1px'})} />
 				{$secondary}
@@ -503,7 +523,8 @@ export default class Popup extends Com {
 						color: popup.text_color,
 						font_family: popup.font_family,
 						font_size: popup.font_size || '14px',
-					})}>
+					})}
+				>
 					{this.props.t.i18n(field.i18n_label) || field.label}
 				</div>
 			)
@@ -517,7 +538,8 @@ export default class Popup extends Com {
 				$error = (
 					<div
 						class='text__danger '
-						style={this.js2css({margin_top: '5px', font_family: popup.font_family, font_size: popup.font_size})}>
+						style={this.js2css({margin_top: '5px', font_family: popup.font_family, font_size: popup.font_size})}
+					>
 						{this.props.t('invalid_field')}
 					</div>
 				)
@@ -527,7 +549,8 @@ export default class Popup extends Com {
 				$error = (
 					<div
 						class='text__danger '
-						style={this.js2css({margin_top: '5px', font_family: popup.font_family, font_size: popup.font_size})}>
+						style={this.js2css({margin_top: '5px', font_family: popup.font_family, font_size: popup.font_size})}
+					>
 						{this.props.t('required')}
 					</div>
 				)
@@ -547,7 +570,8 @@ export default class Popup extends Com {
 				style={this.js2css(com.style)}
 				class='form popup_component'
 				ref={this._formRef}
-				onClick={(e) => e.stopPropagation()}>
+				onClick={(e) => e.stopPropagation()}
+			>
 				{$fields}
 			</form>
 		)
@@ -600,7 +624,8 @@ export default class Popup extends Com {
 					<span
 						style={this.js2css(
 							Object.assign({white_space: 'nowrap', overflow: 'hidden', text_overflow: 'ellipsis'}, textstyle),
-						)}>
+						)}
+					>
 						{this.props.t('follow_us_on_facebook')}
 					</span>
 				</div>
@@ -919,7 +944,7 @@ export default class Popup extends Com {
 			if (com.type === 'image') return this.renderImageComponent(com, i)
 		})
 
-    // fix bug image only popup has white block
+		// fix bug image only popup has white block
 		let formComponents = sb.filter(page.components, (com) => com.type !== 'image')
 		if (!formComponents.length) {
 			formcss.background = 'transparent'