@subiz/widget-v4 4.1.209 → 4.1.211

package/src/util/common.js

@@ -197,7 +197,13 @@ export function pipeExtracts(text, extractors) {
 }
 
 export function extractText(text) {
-	var link = extractLinks
+	var link = (value) => {
+		const emails = extractEmails(value)
+		return extractLinks(value).map((span) => {
+			const matched = value.substr(span.index, span.length)
+			return {...span, length: matched.replace(/[.,;!?]+$/, '').length}
+		}).filter((span) => !emails.some((email) => span.index >= email.index && span.index + span.length <= email.index + email.length))
+	}
 	link.type = 'link'
 
 	var email = extractEmails
@@ -209,7 +215,8 @@ export function extractText(text) {
 	var emoji = extractEmojis
 	emoji.type = 'emoji'
 
-	// extractLinks prefered over extractEmails becase some link is https://example.com/@something.vn would detect this is email over link
+	// Keep full URLs containing @ ahead of email extraction, while allowing
+	// standalone email addresses to become mailto links.
 	return pipeExtracts(text, [link, email, phone, emoji])
 }
 
@@ -526,8 +533,15 @@ export function orderByF(a, f, d) {
 }
 
 export function isPhone(phone) {
-	var re = /^[\+]?[(]?[0-9]{2,3}[)]?[-\s\.]?[0-9]{3,4}[-\s\.]?[0-9]{4,6}$/im
-	return re.test(String(phone))
+	if (typeof phone !== 'string' && typeof phone !== 'number') return false
+	const value = String(phone).trim()
+	// Allow common display separators, but validate the entire value (no multiline matches).
+	const ungrouped = value.replace(/\((\d+)\)/g, '$1')
+	if (!/^\+?\d+(?:[ .-]\d+)*$/.test(ungrouped)) return false
+	const digits = value.replace(/\D/g, '')
+	if (digits.length < 7 || digits.length > 15 || /^(\d)\1+$/.test(digits)) return false
+	if (value.startsWith('+') && digits.startsWith('0')) return false
+	return true
 }
 
 export function isURL(url) {
@@ -541,9 +555,18 @@ export function isNumber(num) {
 }
 
 export function isEmail(email) {
+	if (typeof email !== 'string') return false
+	const value = email.trim()
+	if (value.length > 254) return false
+	const at = value.lastIndexOf('@')
+	const local = value.slice(0, at)
+	const domain = value.slice(at + 1)
+	if (!local || local.length > 64) return false
+	if (!local.startsWith('"') && (local.startsWith('.') || local.endsWith('.') || local.includes('..'))) return false
+	if (!domain.startsWith('[') && domain.split('.').some(label => label.length > 63 || !/^[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/i.test(label))) return false
 	const re =
 		/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
-	return re.test(String(email).toLowerCase())
+	return re.test(value.toLowerCase())
 }
 
 export function last(array) {
@@ -888,7 +911,7 @@ export function js2css(js, onlyprops, variables) {
 
 function browserName() {
 	// Opera 8.0+
-	var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0
+	var isOpera = (!!window.opr && !!window.opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0
 
 	// Firefox 1.0+
 	var isFirefox = typeof InstallTrigger !== 'undefined'
@@ -1040,11 +1063,11 @@ export function checkRunConditions(freq, conds, lastrun, store) {
 				let attributes = op.get(store.matchUser(), 'attributes', [])
 				let emailAttr = find(
 					attributes,
-					(att) => att.key === 'emails' && attr.text && att.key === 'related_email' && attr.text,
+					(att) => (att.key === 'emails' || att.key === 'related_email') && att.text,
 				)
 				let phoneAttr = find(
 					attributes,
-					(att) => att.key === 'phones' && attr.text && att.key === 'related_phone' && attr.text,
+					(att) => (att.key === 'phones' || att.key === 'related_phone') && att.text,
 				)
 				let hasContact = emailAttr || phoneAttr
 				if (cond.user_is_a_contact) {
@@ -1397,8 +1420,7 @@ export function unicodeToAscii(str) {
 	return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
 }
 
-export function scrollIntoViewIfNeeded($ele) {
-	centerIfNeeded = arguments.length === 0 ? true : !!centerIfNeeded
+export function scrollIntoViewIfNeeded($ele, centerIfNeeded = true) {
 
 	var parent = $ele.parentNode
 	var parentComputedStyle = window.getComputedStyle(parent, null)
@@ -1445,31 +1467,16 @@ export function blockToText(block) {
 }
 
 export function isBlockEmpty(block) {
-	return _isBlockEmpty(block)
-}
-
-function _isBlockEmpty(block = {}) {
-	if (!size(block.content)) {
-		if ((block.text || '').trim()) return false
-		return true
-	}
-	let result = true
-	map(block.content, (content) => {
-		result = result && _isBlockEmpty(content)
-	})
-	return result
+	return isEmptyBlock(block)
 }
 
 function _blockToText(block) {
-	if (!block || !block.type) return ''
+	if (!block) return ''
 	let out = ''
 	if (block.type == 'bullet_list' || block.type == 'ordered_list') {
-		map(block.content, (item) => {
-			preifx = '\n* '
-			if (block.type == 'ordered_list') {
-				prefix = i + '\n. '
-			}
-			out += prefix + blockToText(item).trim()
+		map(block.content, (item, i) => {
+			let prefix = block.type == 'ordered_list' ? '\n' + (Number(i) + 1) + '. ' : '\n* '
+			out += prefix + _blockToText(item).trim()
 		})
 		return out
 	}
@@ -1483,26 +1490,20 @@ function _blockToText(block) {
 		block.type == 'text' ||
 		block.type == 'link' ||
 		block.type == 'mention-agent' ||
+		block.type == 'mention' ||
 		block.type == 'dynamic-field'
 	) {
-		return out + block.text
+		if (!size(block.content)) return out + (block.text || '')
 	}
 
 	if (block.type == 'horizontal_rule') return out + '\n---\n'
 	if (block.type == 'emoji') {
-		let code
-		if (size(block.attrs) > 0) code = block.attrs['code']
-		if (code == '') code = block.text
-
-		if (code != '') {
-			let emoji = find(LEXICAL_EMOJI_LIST, (emoji) => emoji.code === code)
-			out + op.get(emoji, 'text', code)
-		}
-		return out
+		return out + (op.get(block, 'attrs.code') || block.text || block.Text || '')
 	}
 
-	map(block.content, (block) => {
-		out += blockToText(block)
+	if (!size(block.content)) return out + (block.text || '')
+	map(block.content, (child) => {
+		out += _blockToText(child)
 	})
 	return out
 }
@@ -1573,7 +1574,10 @@ function absLink(url) {
 }
 
 export function isEmptyBlock(block) {
-	if (!block || !block.type) return true
+	if (!block) return true
+	if (block.type === 'image' && op.get(block, 'image.url')) return false
+	if (block.type === 'emoji' && (op.get(block, 'attrs.code') || block.Text)) return false
+	if (block.type === 'horizontal_rule') return false
 	let hasContent =
 		size(
 			filter(
@@ -1586,6 +1590,7 @@ export function isEmptyBlock(block) {
 
 export function isEmptyMessage(msg) {
 	if (!msg) return true
+	if (msg.deleted) return false
 	if (!msg.text && isEmptyBlock(msg.block) && isEmptyAttachment(msg)) return true
 	return false
 }

package/src/util/event.js

@@ -0,0 +1,7 @@
+export function normalizeCdpEvent(type, payload, options) {
+	if (type && typeof type === 'object') return type
+	let data = {type}
+	if (payload !== undefined) data.payload = payload
+	if (options && typeof options === 'object') data = Object.assign({}, options, data)
+	return data
+}

package/src/util/pubsub.js

@@ -1,17 +1,36 @@
-var { filter, map } = require('./common.js')
-
 export default class Pubsub {
-	constructor () {
+	constructor() {
 		this.listeners = {}
 	}
 
-	publish (topic, payload, payload2, payload3) {
-		this.listeners[topic] = filter(this.listeners[topic], sub => sub.obj._isMounted)
-		map(this.listeners[topic], ({ cb }) => cb(payload, payload2, payload3))
+	publish(topic, ...payload) {
+		const subscriptions = (this.listeners[topic] || []).slice()
+		for (const subscription of subscriptions) {
+			if (!subscription.obj._isMounted) subscription.unsubscribe()
+			if (subscription.active) subscription.cb(...payload)
+		}
 	}
 
-	on2 (obj, topic, cb) {
+	on2(obj, topic, cb) {
+		const subscription = {obj, cb, active: true}
+		let release = () => {}
+		const unsubscribe = () => {
+			if (!subscription.active) return
+			subscription.active = false
+			this.listeners[topic] = (this.listeners[topic] || []).filter((sub) => sub !== subscription)
+			if (!this.listeners[topic].length) delete this.listeners[topic]
+			release()
+		}
+		subscription.unsubscribe = unsubscribe
 		if (!this.listeners[topic]) this.listeners[topic] = []
-		this.listeners[topic].push({ obj, cb })
+		this.listeners[topic].push(subscription)
+		if (typeof obj.onDispose === 'function') release = obj.onDispose(unsubscribe)
+		return unsubscribe
+	}
+
+	clear() {
+		for (const subscriptions of Object.values(this.listeners)) {
+			for (const subscription of subscriptions.slice()) subscription.unsubscribe()
+		}
 	}
 }

package/src/util/url.js

@@ -0,0 +1,14 @@
+// Check protocols before a URL reaches an anchor. Keep relative URLs usable
+// on embedded sites, but reject executable and unknown schemes.
+export function safeUrl(value, image = false) {
+	if (typeof value !== 'string') return ''
+	const url = value.trim()
+	const normalized = url.replace(/[\u0000-\u0020\u007f]/g, '')
+	const scheme = normalized.match(/^([a-z][a-z0-9+.-]*):/i)
+	if (!scheme) return url
+	if (/^https?$/i.test(scheme[1])) return url
+	if (!image && /^(mailto|tel)$/i.test(scheme[1])) return url
+	if (image && /^blob$/i.test(scheme[1])) return url
+	if (image && /^data:image\/(png|jpe?g|gif|webp|avif);base64,/i.test(normalized)) return url
+	return ''
+}

package/test.cjs

@@ -0,0 +1,59 @@
+const fs = require('node:fs')
+const path = require('node:path')
+const Module = require('node:module')
+const babel = require('@babel/core')
+const {JSDOM} = require('jsdom')
+
+// Utilities deliberately get native browser APIs from an iframe. Exercise
+// that same setup in tests rather than maintaining a fake copy of the APIs.
+const dom = new JSDOM('<!doctype html><html><head></head><body></body></html>', {
+	url: 'https://widget.test/',
+	pretendToBeVisual: true,
+})
+global.window = dom.window
+global.document = dom.window.document
+for (const key of ['navigator', 'localStorage', 'XMLHttpRequest', 'Image', 'FileReader', 'CustomEvent']) {
+	Object.defineProperty(global, key, {configurable: true, value: dom.window[key]})
+}
+
+const source = path.resolve(__dirname, 'src')
+const originalCompile = Module._extensions['.js']
+Module._extensions['.js'] = (module, filename) => {
+	if (!filename.startsWith(source + path.sep)) return originalCompile(module, filename)
+	const {code} = babel.transformFileSync(filename, {
+		configFile: false,
+		babelrc: false,
+		presets: [['@babel/preset-env', {targets: {node: 'current'}, modules: 'commonjs'}]],
+		plugins: [['@babel/plugin-transform-react-jsx', {pragma: 'h'}], '@babel/plugin-proposal-class-properties'],
+	})
+	module._compile(code, filename)
+}
+
+// Webpack resolves these assets in production. Tests only need stable URLs
+// and an empty stylesheet; they do not compile a second application bundle.
+const originalLoad = Module._load
+Module._load = function(request, parent, isMain) {
+	if (request.startsWith('css-loader!')) return {default: {toString: () => ''}}
+	return originalLoad.call(this, request, parent, isMain)
+}
+for (const extension of ['.svg', '.png', '.jpg', '.gif', '.mp3', '.ogg']) {
+	Module._extensions[extension] = (module, filename) => {module.exports = filename}
+}
+
+const test = require('tape')
+test.onFinish(() => dom.window.close())
+function loadTests(directory) {
+	for (const entry of fs.readdirSync(directory, {withFileTypes: true})) {
+		const filename = path.join(directory, entry.name)
+		if (entry.isDirectory()) loadTests(filename)
+		else if (/\.test(?:2)?\.js$/.test(entry.name)) require(filename)
+	}
+}
+
+try {
+	loadTests(source)
+} catch (error) {
+	dom.window.close()
+	console.error(error)
+	process.exitCode = 1
+}

package/webpack.prod.js

@@ -27,6 +27,9 @@ webpackconfig.output.chunkFilename = HASH + '.[name].js'
 webpackconfig.output.filename = HASH + '.[name].js'
 
 webpackconfig.optimization.minimize = true
+// HtmlWebpackPlugin already minifies its output. Webpack's HTML minimizer
+// forwards inline-script metadata to Terser, which rejects the `as` option.
+webpackconfig.optimization.minimizeOptions = {html: false}
 webpackconfig.mode = 'production'
 webpackconfig.plugins = [
 	new HtmlWebpackPlugin({

package/assets/less/contact.less

@@ -1,126 +0,0 @@
-@spacer: '@spacer';
-@spacer0: '@spacer0';
-@spacer2: '@spacer2';
-@spacer3: '@spacer3';
-
-@primary_color: '@primary_color';
-@text_color: '@text_color';
-@font_family: '@font_family';
-@font_size: '@font_size';
-@background: '@background';
-
-@z-index: 2000000000;
-
-// stop client css rule on all elements inside #subiz
-/*
-#sbz92 * {
-	all: unset !important;
-}
-
-#sbz92 {
-	z-index: @z-index + 100 !important;
-	#makeImportant() !important;
-}
-
-// prevent #subiz inheriting client site styles
-div#sbz92 {
-	all: initial;
-}
-
-// prevent #subiz inheriting client site !important styles
-body div#sbz92 {
-	all: initial !important;
-}
-
-body div#sbz92 .overlay {
-	position: fixed !important;
-	user-select: none !important;
-}
-*/
-
-#sbz92 {
-	z-index: @z-index + 100 !important;
-	#makeImportant();
-}
-#makeImportant() {
-	@import './base.less';
-
-	.overlay {
-		// must change to absolute so we can display in a box inside dashboard editor
-		// widget will override this to be 'fixed'
-		position: fixed;
-		top: 0;
-		left: 0;
-		bottom: 0;
-		right: 0;
-		background: #000c; //@overlay;
-		z-index: 20000000000100;
-		overflow: auto;
-		display: flex; // so .container's margin auto can work
-		justify-content: center;
-		align-items: center;
-	}
-
-	.overlay.overlay__hidden {
-		display: none;
-	}
-
-	.map_modal {
-		max-with: 80%;
-		max-height: 80%;
-		width: 400px;
-		height: 400px;
-		background: white;
-	}
-
-	.map_body {
-		width: 100%;
-		height: 100%;
-		display: flex;
-
-	}
-
-	.map_location {
-		border-bottom: 1px solid lightgray;
-		padding: 20px;
-		font-size: 16px;
-		font-family: 'roboto';
-	}
-
-	.map_title {
-		font-size: 18px;
-		font-weight: 500;
-		padding: 10px;
-		text-align: center;
-		border-bottom: 1px solid lightgray;
-		font-family: 'roboto';
-	}
-
-	.map_locations {
-		border-right: 1px solid lightgray;
-		width: 200px;
-		height: 100%;
-	}
-
-	.sm.contact_button {
-		width: 40px;
-		height: 40px;
-	}
-
-	.lg.contact_button {
-		width: 60px;
-		height: 60px;
-	}
-
-	.contact_button {
-		width: 50px;
-		height: 50px;
-
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-radius: 50%;
-		background: pink;
-	}
-
-}