@subiz/widget-v4 4.0.86 → 4.0.87

package/dist/screenshoot.js

@@ -2150,10 +2150,9 @@ function osName() {
 function check_frequently(freq, lastrun, store) {
   if (!lastrun) return true;
   if (op.get(freq, 'once_per_user')) return false;
-  var session = store.matchSession() || {};
 
   if (op.get(freq, 'once_per_session')) {
-    if (lastrun.session_id === session.id) return false;
+    if (sameDay(lastrun.created, Date.now())) return false;
   }
 
   if (op.get(freq, 'interval_sec')) {
@@ -2166,7 +2165,7 @@ function check_frequently(freq, lastrun, store) {
 
 function checkRunConditions(freq, conds, lastrun, store) {
   var acc = store.matchAccount() || {};
-  var session = store.matchSession() || {};
+  var location = store.matchLocation() || {};
   if (!check_frequently(freq, lastrun, store)) return false;
 
   for (var i = 0; i < size(conds); i++) {
@@ -2206,15 +2205,15 @@ function checkRunConditions(freq, conds, lastrun, store) {
         if (size(cond.exclude_locations) > 0) {
           let found = find(cond.exclude_locations, loc => {
             if (loc.city_name && loc.country_code) {
-              if (loc.city_name === session.city_name && loc.country_code === session.country_code) return true;
+              if (loc.city_name === location.city_name && loc.country_code === location.country_code) return true;
             }
 
             if (loc.city_name && !loc.country_code) {
-              if (loc.city_name === session.city_name) return true;
+              if (loc.city_name === location.city_name) return true;
             }
 
             if (!loc.city_name && loc.country_code) {
-              if (loc.country_code === session.country_code) return true;
+              if (loc.country_code === location.country_code) return true;
             }
           });
           if (found) return false;
@@ -2223,15 +2222,15 @@ function checkRunConditions(freq, conds, lastrun, store) {
         if (size(cond.locations) > 0) {
           let found = find(cond.locations, loc => {
             if (loc.city_name && loc.country_code) {
-              if (loc.city_name === session.city_name && loc.country_code === session.country_code) return true;
+              if (loc.city_name === location.city_name && loc.country_code === location.country_code) return true;
             }
 
             if (loc.city_name && !loc.country_code) {
-              if (loc.city_name === session.city_name) return true;
+              if (loc.city_name === location.city_name) return true;
             }
 
             if (!loc.city_name && loc.country_code) {
-              if (loc.country_code === session.country_code) return true;
+              if (loc.country_code === location.country_code) return true;
             }
           });
           if (!found) return false;
@@ -2295,7 +2294,8 @@ function checkRunConditions(freq, conds, lastrun, store) {
 
       case 'source':
         if (size(cond.sources) > 0) {
-          if (!find(cond.sources, src => norm(src) === norm(session.source))) return false;
+          let source = store.matchTrafficSource();
+          if (!find(cond.sources, src => norm(src) === norm(source))) return false;
         }
 
         break;
@@ -4184,8 +4184,6 @@ class Store {
 
     store_defineProperty(this, "suggest_addresses", keyword => this.api.suggest_address(keyword));
 
-    store_defineProperty(this, "matchSession", () => this.kv.match('session') || {});
-
     store_defineProperty(this, "matchAccount", () => this.cache.match('account'));
 
     store_defineProperty(this, "matchPaymentMethods", () => this.cache.match('payment_methods'));
@@ -4277,6 +4275,8 @@ class Store {
       };
     });
 
+    store_defineProperty(this, "matchLocation", () => this.cache.match('location') || {});
+
     store_defineProperty(this, "matchBot", () => this.cache.match('bot') || {});
 
     store_defineProperty(this, "readyGate", new util/* default.Gate */.Z.Gate());
@@ -4304,6 +4304,8 @@ class Store {
 
     store_defineProperty(this, "seenQueue", []);
 
+    store_defineProperty(this, "matchTrafficSource", () => this.kv.match('traffic_source'));
+
     store_defineProperty(this, "_typing", util/* default.throttle */.Z.throttle(convoid => this.api.sendTyping(convoid), 3000, {
       trailing: false
     }));
@@ -4411,7 +4413,7 @@ class Store {
   }
 
   isInsync(key) {
-    return util/* default.Date.now */.Z.Date.now() - (this.g_sync[key] || 0) < 300000;
+    return util/* default.Date.now */.Z.Date.now() - (this.g_sync[key] || 0) < 600000;
   }
 
   async fetchShippingAddresses() {
@@ -4682,24 +4684,6 @@ class Store {
 
     if (setting.user) {
       setting.user.account_id = setting.account.id;
-      let oldsession = this.matchSession();
-      let session = setting.user.session;
-
-      if (session) {
-        if (session.id === oldsession.id) {
-          session._urls = oldsession._urls;
-        } else {}
-      } else {
-        session = oldsession;
-      }
-
-      session._urls = session._urls || [];
-
-      session._urls.push(location.href);
-
-      while (session._urls.length > 1000) session._urls.shift();
-
-      this.kv.put('session', session);
       delete setting.user.session;
 
       this._setUser(setting.user);
@@ -4712,6 +4696,8 @@ class Store {
       delete setting.account;
     }
 
+    let location = util/* default.get */.Z.get(setting, 'location', []);
+    this.cache.put('location', location);
     let bots = util/* default.get */.Z.get(setting, 'bots', []);
     let botM = {};
     util/* default.map */.Z.map(bots, bot => {
@@ -4746,7 +4732,9 @@ class Store {
 
   async track() {
     let user = this.kv.match('user') || {};
-    await this.api.sendContentView(this.device, location.href, document.title, this._currentViewingProduct.id, this._currentViewingProduct.source_id, this._currentViewingProduct.sku);
+    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 = util/* default.get */.Z.get(out, 'body.by.device.source', '');
+    if (traffic_source) this.kv.put('traffic_source', traffic_source);
     this.sendPresence();
   }
 
@@ -5059,12 +5047,10 @@ class Store {
   }
 
   logBotRun(botid) {
-    let session = this.matchSession();
     let log = this.kv.match('bot_run_logs') || {};
     log[botid] = {
       bot_id: botid,
-      created: this.now(),
-      session_id: session.id
+      created: this.now()
     };
     this.kv.put('bot_run_logs', log);
   }
@@ -5072,11 +5058,9 @@ class Store {
   sendImpression(id) {
     let user = this.kv.match('user') || {};
     let log = this.kv.match('plugin_run_logs') || {};
-    let session = this.matchSession();
     log[id] = {
       web_plugin_id: id,
-      created: this.now(),
-      session_id: session.id
+      created: this.now()
     };
     this.kv.put('plugin_run_logs', log);
     return this.api.sendImpression({
@@ -5085,8 +5069,7 @@ class Store {
       web_plugin_id: id,
       user_id: user.id,
       url: window.location.href,
-      device: this.device,
-      session_id: session.id
+      device: this.device
     });
   }
 
@@ -5108,8 +5091,7 @@ class Store {
       url: window.location.href,
       device: this.device,
       submission,
-      impression_token: impressionToken,
-      session_id: this.matchSession().id
+      impression_token: impressionToken
     });
   }
 
@@ -5152,7 +5134,7 @@ class Store {
 
   async loopTime() {
     let startms = util/* default.Date.now */.Z.Date.now();
-    if (!util/* default.get */.Z.get(this.kv.match('user'), 'id')) return setTimeout(() => this.loopTime(), 120000);
+    if (!util/* default.get */.Z.get(this.kv.match('user'), 'id')) return setTimeout(() => this.loopTime(), 240000);
     let {
       body: t,
       error
@@ -5162,7 +5144,7 @@ class Store {
     var serverMs = new util/* default.Date */.Z.Date(t).getTime() + latences;
     var localMs = util/* default.Date.now */.Z.Date.now();
     this.timeDiff = Math.floor(serverMs - localMs);
-    setTimeout(() => this.loopTime(), 120000);
+    setTimeout(() => this.loopTime(), 240000);
   }
 
   replaceFileUrl(src) {

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.86",
+	"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.23.5",
+		"core-js": "^3.25.0",
 		"css-loader": "5.2.7",
 		"file-loader": "^6.2.0",
 		"less": "^4.1.3",
 		"less-loader": "^11.0.0",
-		"marked": "^4.0.18",
-		"preact": "^10.10.0"
+		"marked": "^4.0.19",
+		"preact": "^10.10.6"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.18.9",
-		"@babel/core": "^7.18.9",
+		"@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.6",
-		"@babel/preset-env": "^7.18.9",
+		"@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.7.1",
 		"puppeteer": "^15.4.0",
-		"webpack": "^5.73.0",
-		"webpack-bundle-analyzer": "^4.5.0",
+		"webpack": "^5.74.0",
+		"webpack-bundle-analyzer": "^4.6.1",
 		"webpack-cli": "^4.10.0",
-		"webpack-dev-server": "^4.9.3"
+		"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'
 

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/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()
 	}
@@ -484,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
@@ -512,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
@@ -524,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
@@ -554,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}
 			/>
 		)
@@ -578,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}
@@ -679,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) => {
@@ -688,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
@@ -699,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

@@ -215,12 +215,25 @@ export default class Popup extends Com {
 
 			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])})