@subiz/widget-v4 4.0.81 → 4.0.85

package/src/chatbox/ShadowDomRoot.js

@@ -21,8 +21,7 @@ img { max-width: 100%; display: block; margin: 10px auto; }
 * { white-space: normal }
 ul > li { margin-bottom: 5px }
 ul:last-child { margin-bottom: 0 }
-p:first-child { margin-top: 0;}
-p:last-child { margin-bottom: 0;}
+p { margin-bottom: 0; margin-top: 0;}
 </style>
 <div>${html}</div>`
 		let links = this.shadowRoot.querySelectorAll('a')

package/src/chatbox/TextMessage.js

@@ -22,7 +22,11 @@ export default class TextMessage extends Com {
 	render() {
 		var format = sb.get(this.props.ev, 'data.message.format', 'plaintext')
 		if (format === 'markdown') return this.renderMarkdown()
+		if (format === 'delta') return this.renderDelta()
+		return this.renderPlainText()
+	}
 
+	renderPlainText() {
 		var text = sb.get(this.props.ev, 'data.message.text')
 		text = sb.trim(text)
 		if (sb.size(text) === 0) return null
@@ -60,8 +64,27 @@ export default class TextMessage extends Com {
 		return <div class='message-user message-text--user'>{tags}</div>
 	}
 
-	renderMarkdown() {
-		var text = sb.get(this.props.ev, 'data.message.text')
+	renderDelta() {
+		let deltas = sb.get(this.props.ev, 'data.message.quill_delta')
+		deltas = sb.parseJSON(deltas) || {}
+		deltas = deltas.ops || []
+		let isMarkdown = sb.find(
+			deltas,
+			(delta) =>
+				sb.get(delta, 'attributes.bold') ||
+				sb.get(delta, 'attributes.italic') ||
+				sb.get(delta, 'attributes.underline') ||
+				sb.get(delta, 'insert.emoji'),
+		)
+		if (isMarkdown) {
+			var text = deltaToMarkdown(deltas)
+			return this.renderMarkdown(text)
+		}
+		return this.renderPlainText()
+	}
+
+	renderMarkdown(text) {
+		if (!text) text = sb.get(this.props.ev, 'data.message.text')
 		if (sb.size(text) === 0) return null
 
 		let byType = sb.get(this.props.ev, 'by.type')
@@ -86,3 +109,48 @@ export default class TextMessage extends Com {
 		)
 	}
 }
+
+function deltaToMarkdown(deltas) {
+	let output = ''
+	sb.each(deltas, (delta, idx) => {
+		let text = ''
+		let insert = delta.insert
+		let attributes = delta.attributes
+		// emoji
+		if (insert.emoji) text = emojiCodes[insert.emoji] || ''
+		// insert bold, italic, underline
+		if (attributes) {
+			if (attributes.italic && attributes.bold) text = `*__${insert}__*`
+			else if (attributes.italic) text = `*${insert}*`
+			else if (attributes.bold) text = `**${insert}**`
+			else text = insert
+		}
+		if (insert.dynamicField) text = `${sb.get(insert, 'dynamicField.text', '')}`
+		if (!insert.emoji && !attributes && !insert.dynamicField) {
+			text = insert || ''
+			// markdown need newline to <br/> characters to newline
+			text = text.replace(/\n/g, '<br/>')
+		}
+
+		output += text
+	})
+	return output
+}
+
+const emojiCodes = {
+	like: '👍',
+	unlike: '👎',
+	angry: '😠',
+	confused: '😕',
+	crying: '😢',
+	grinning: '😀',
+	'heart-eyes': '😍',
+	neutral: '😐',
+	sleepy: '😪',
+	sad: '😞',
+	smiling: '😄',
+	'tongue-out': '😛',
+	tired: '😩',
+	surprised: '😮',
+	wink: '😉',
+}

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

@@ -148,9 +148,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 +160,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 +188,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 +273,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 = (

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,6 +214,7 @@ export default class Popup extends Com {
 			var summitFields = []
 
 			let user = sb.cloneDeep(this.props.store.matchUser())
+			let is_lead = false
 			for (var pair of formData.entries()) {
 				let page = sb.get(this.props.plugin.popup, `pages.${this.getPageIndex()}`)
 				let form = sb.find(page.components, (com) => com.type === 'form')
@@ -226,10 +228,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 +281,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 +295,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 +309,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 +510,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 +525,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 +536,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 +557,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 +611,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 +931,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'

package/src/store/store.js

@@ -704,7 +704,7 @@ export default class Store {
 			sb.map(pongs, (pong) => {
 				if (pong.member_id == user.id && pong.type === 'seen') {
 					let mem = sb.find(convo.members, (mem) => mem.id === user.id)
-					mem.seen_at = pong.created
+					if (mem) mem.seen_at = pong.created
 				}
 			})
 			this.chain.put(cid, oldev.id, sb.getMs(oldev.created), oldev)

package/dist/0b82fa7e5c3b07b40a44.png

@@ -1 +0,0 @@
-module.exports = __webpack_public_path__ + "assets/img/emoji/messenger/sub_58.824_78.431.f910f2a.png";

package/dist/0f4af006e38ee8b93633.png

@@ -1 +0,0 @@
-module.exports = __webpack_public_path__ + "assets/img/emoji/messenger/sub_60.784_29.412.e36d284.png";