@subiz/widget-v4 4.1.209 → 4.1.211

package/src/contact/contact.js

@@ -1,400 +0,0 @@
-import sb from '../util/index.js'
-import {render, h, createRef} from 'preact'
-import {Com} from '../common.js'
-// var Color = require('color')
-// import {Loader} from '@googlemaps/js-api-loader'
-
-let CSS = (() => import(/*webpackChunkName: "contact-css" */ './css.js'))()
-
-// props: ['mobile', 'plugin', 'frame', 'select'],
-export default class Contact extends Com {
-	state = {
-		map: false,
-		map_loading: false,
-		map_initialized: false,
-	}
-
-	constructor(props) {
-		super(props)
-
-		this.showMap = this.showMap.bind(this)
-		this.hideMap = this.hideMap.bind(this)
-	}
-
-	async initMap() {
-		if (this.map_initialized) return
-		this.setState({map_initialized: true, map_loading: true})
-		await new Loader({apiKey: 'YOUR_API_KEY', version: 'weekly'}).load()
-		this.gmap = new google.maps.Map(document.getElementById('map'))
-		this.setState({map_loading: false})
-	}
-
-	js2css(js, onlyProps) {
-		return sb.js2css(js, onlyProps, {
-			'@font_size': this.props.plugin.popup.font_size,
-			'@font_family': this.props.plugin.popup.font_family,
-			'@text_color': this.props.plugin.popup.text_color,
-			'@primary_color': this.props.plugin.popup.primary_color,
-			'@background': this.props.plugin.popup.background,
-			'@spacer0': spacer / 2 + 'px',
-			'@spacer': spacer + 'px',
-			'@spacer2': spacer * 2 + 'px',
-			'@spacer3': spacer * 3 + 'px',
-		})
-	}
-
-	renderMapButton(button) {
-		let icon = (
-			<svg
-				width="20px"
-				aria-hidden="true"
-				focusable="false"
-				data-prefix="fas"
-				data-icon="map-marker-alt"
-				role="img"
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 384 512"
-				class="svg-inline--fa fa-map-marker-alt fa-w-12 fa-3x">
-				<path
-					fill="red"
-					d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"
-					class=""></path>
-			</svg>
-		)
-
-		return (
-			<div class="contact_button" onClick={this.showMap}>
-				{this.renderMapModal(button)}
-				{icon}
-			</div>
-		)
-	}
-
-	async setMap(lat, lng) {
-		console.log('HEE')
-		await this.initMap()
-		console.log('HEE22')
-		window.gmap = this.gmap
-		this.gmap.map.setCenter(new google.maps.LatLng(lat, lng))
-	}
-
-	renderMapModal(button) {
-		let cls = 'map_modal'
-		if (this.state.map) cls += ' map_modal__show'
-		else cls += ' map_modal__hide'
-
-		let overlaycls = 'overlay'
-		if (!this.state.map) overlaycls += ' overlay__hidden'
-
-		let $locations = sb.map(button.map.locations, loc => {
-			return (
-				<div class="map_location" onClick={e => this.setMap(loc.latitude, loc.longitude)}>
-					<div>{loc.name}</div>
-					<div>{loc.latitude}</div>
-					<div>{loc.longitude}</div>
-				</div>
-			)
-		})
-
-		$locations.unshift(<div class="map_title">{button.map.title}</div>)
-
-		let $map = (
-			<div id="map" style="height: 100%; width: 100%">
-				{' '}
-			</div>
-		)
-		return (
-			<div class={overlaycls} onClick={this.hideMap}>
-				<div class={cls} onClick={e => e.stopPropagation()}>
-					<div class="map_body">
-						<div class="map_locations">{$locations}</div>
-						{$map}
-
-						<div class="mapouter">
-							<div class="gmap_canvas">
-								<iframe
-									width="300"
-									height="400"
-									id="gmap_canvas"
-									src="https://maps.google.com/maps?q=2880%20Broadway,%20New%20York&t=&z=13&ie=UTF8&iwloc=&output=embed"
-									frameborder="0"
-									scrolling="no"
-									marginheight="0"
-									marginwidth="0"></iframe>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		)
-	}
-
-	hideMap(e) {
-		e.stopPropagation()
-		this.setState({map: false})
-	}
-
-	showMap() {
-		this.setState({map: true})
-	}
-
-	renderZaloButton(button) {
-		let icon = (
-			<svg
-				width="20px "
-				aria-hidden="true"
-				focusable="false"
-				data-prefix="fab"
-				data-icon="facebook-f"
-				role="img"
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 320 512"
-				class="svg-inline--fa fa-facebook-f fa-w-10 fa-5x">
-				<path
-					fill="currentColor"
-					d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"
-					class=""></path>
-			</svg>
-		)
-		return <div class="contact_button">{icon}</div>
-	}
-
-	renderFacebookButton(button) {
-		let icon = (
-			<svg
-				width="20px "
-				aria-hidden="true"
-				focusable="false"
-				data-prefix="fab"
-				data-icon="facebook-f"
-				role="img"
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 320 512"
-				class="svg-inline--fa fa-facebook-f fa-w-10 fa-5x">
-				<path
-					fill="currentColor"
-					d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"
-					class=""></path>
-			</svg>
-		)
-		return <div class="contact_button">{icon}</div>
-	}
-
-	renderChatButton() {
-		return <div>Chat</div>
-	}
-
-	renderCallButton() {
-		let icon = (
-			<svg
-				width="20px"
-				aria-hidden="true"
-				focusable="false"
-				data-prefix="fas"
-				data-icon="phone"
-				role="img"
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 512 512"
-				class="svg-inline--fa fa-phone fa-w-16 fa-7x">
-				<path
-					fill="currentColor"
-					d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z"
-					class=""></path>
-			</svg>
-		)
-
-		return <div>{icon}</div>
-	}
-
-	// default render for component
-	renderButtons(buttons) {
-		if (sb.size(buttons) === 0) return null
-
-		return sb.map(buttons, button => {
-			if (button.type === 'map') return this.renderMapButton(button)
-			if (button.type === 'zalo') return this.renderZaloButton(button)
-			if (button.type === 'facebook') return this.renderFacebookButton(button)
-			if (button.type === 'call') return this.renderCallButton(button)
-			if (button.type === 'chat') return this.renderChatButton(button)
-			return null
-		})
-	}
-
-	renderByLayoutSideByStandard() {
-		let $buttons = this.renderButtons(this.props.plugin.contact.buttons)
-		return <div>{$buttons}</div>
-	}
-
-	renderLineComponent(com) {
-		let style = Object.assign({}, com.style, this.props.mobile ? com.mobile_style : {})
-		return <div style={this.js2css(style)}></div>
-	}
-
-	renderTextComponent(com) {
-		let style = Object.assign({}, com.style, this.props.mobile ? com.mobile_style : {})
-		return (
-			<div class="text" style={this.js2css(style)} dangerouslySetInnerHTML={{__html: sb.get(com, 'text.html')}}></div>
-		)
-	}
-
-	async refreshCSS() {
-		let css = (await CSS).default.default.toString()
-
-		var outcss = replaceCssVariable(css, this.props.plugin.popup)
-		sb.setCss(this.props.plugin.id, this.$cssStyleDiv, outcss)
-		this.setState({cssready: true})
-	}
-
-	componentDidMount() {
-		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.refreshCSS()
-		let pluginstringify = JSON.stringify(this.props.plugin)
-		this.setState({pluginjson: pluginstringify})
-	}
-
-	render() {
-		if (!this.state.cssready) return null
-		let pluginstringify = JSON.stringify(this.props.plugin)
-
-		if (this.state.pluginjson !== pluginstringify) {
-			this.refreshCSS()
-			sb.setTimeout(() => this.setState({pluginjson: pluginstringify}))
-		}
-
-		if (this.state.close) return null
-
-		let containercss = ''
-		let bodycss = ''
-
-		let layout = sb.get(this.props.plugin, 'contact.layout', 'standard')
-
-		let $body = null
-		if (layout === 'standard' || !layout) {
-			$body = this.renderByLayoutSideByStandard()
-		}
-
-		if (layout === 'footer') {
-			$body = this.renderByLayoutFooter(sb.get(this.props.plugin, `popup.pages.${this.state.pageIndex}`))
-		}
-
-		if (layout === 'mini') {
-			$body = this.renderByLayoutMini(sb.get(this.props.plugin, `popup.pages.${this.state.pageIndex}`))
-		}
-
-		if (layout === 'docked') {
-			$body = this.renderByLayoutDocked(sb.get(this.props.plugin, `popup.pages.${this.state.pageIndex}`))
-		}
-
-		let left, right, bottom, top, transform
-		let position = sb.get(this.props.plugin, 'contact.position', 'bottom-left')
-
-		if (position === 'center-left') {
-			left = '0'
-			top = '50%'
-			transform = 'translateY(-50%)'
-		} else if (position === 'top-left') {
-			left = '0'
-			top = '20px'
-		} else if (position === 'bottom-right') {
-			right = '0'
-			bottom = '20px'
-		} else if (position === 'center-right') {
-			right = '0'
-			top = '50%'
-			transform = 'translateY(-50%)'
-		} else if (position === 'top-right') {
-			right = '0'
-			top = '20px'
-		} else {
-			// default bottom left
-			left = '0'
-			bottom = '20px'
-		}
-
-		return (
-			<div
-				style={sb.js2css({
-					position: 'absolute',
-					left,
-					right,
-					bottom,
-					top,
-					transform,
-					display: 'flex',
-					align_items: 'center',
-					justify_content: 'center',
-					overflow: 'hidden',
-				})}
-				onClick={e => e.stopPropagation()}>
-				{$body}
-			</div>
-		)
-	}
-}
-
-function isEmpty(value) {
-	return value === undefined || value === null || value === ''
-}
-
-async function runCampaign(byTrigger) {
-	// only run once per pageview (except for area clicked)
-	if (ran && byTrigger !== 'area_clicked') return
-	ran = true
-
-	pageIndex = 0
-	let page = sb.get(camp, `pages.${pageIndex}`) || {}
-
-	// show page
-	showPage(page)
-
-	triggerType = byTrigger
-	let {body: impression} = await store.sendImpression(camp.id, byTrigger)
-	impressionToken = sb.get(impression, 'impression_token') || ''
-}
-
-function eq(a, b) {
-	return JSON.stringify(a) === JSON.stringify(b)
-}
-
-export function replaceCssVariable(css, setting) {
-	// tokenize
-	var tokens = [css]
-
-	// popup
-	tokens = sb.tokenize(tokens, "'@font_family'")
-	tokens = sb.tokenize(tokens, "'@font_size'")
-	tokens = sb.tokenize(tokens, "'@text_color'")
-	tokens = sb.tokenize(tokens, "'@primary_color'")
-	tokens = sb.tokenize(tokens, "'@background'")
-	tokens = sb.tokenize(tokens, "'@spacer'")
-	tokens = sb.tokenize(tokens, "'@spacer0'")
-	tokens = sb.tokenize(tokens, "'@spacer2'")
-	tokens = sb.tokenize(tokens, "'@spacer3'")
-
-	var ret = []
-	for (var i = 0; i < tokens.length; i++) {
-		var item = tokens[i]
-		if (typeof item === 'string') {
-			ret.push(item)
-			continue
-		}
-
-		// remove @''
-		var path = item.type.substr(2, item.type.length - 3)
-		var val = sb.get(setting, path) || sb.get(DEFVAL, path) || ''
-		ret.push(val)
-	}
-
-	return ret.join('')
-}
-
-export const DEFVAL = {
-	font_size: '16px',
-	font_family: 'roboto',
-	text_color: '#333',
-	primary_color: '#333',
-}

package/src/contact/css.js

@@ -1 +0,0 @@
-export default require('css-loader!less-loader!../../assets/less/contact.less')

package/src/util/common.test.js

@@ -1,301 +0,0 @@
-import {createRequire} from 'module'
-const require = createRequire(import.meta.url)
-global.require = require
-global.XMLHttpRequest = {
-	prototype: {
-		open: function () {},
-	},
-}
-global.document = {
-	JSON: JSON,
-	// document.documentElement.appendChild
-	// f.contentDocument.createElement
-	body: {
-		appendChild: function () {},
-	},
-	documentElement: {
-		appendChild: function () {},
-	},
-	createElement: function () {
-		return {
-			contentWindow: global,
-			contentDocument: global.document,
-			style: {display: false},
-		}
-	},
-}
-const test = require('tape')
-const util = require('./common.js')
-
-test('util.checkUrlCondition', (t) => {
-	var tcs = [
-		{
-			name: 'minvoice',
-			cond: {
-				key: 'url',
-				urls: ['qlhd.minvoice.com.vn'],
-				exclude_urls: ['minvoice.com.vn', 'minvoice.net', 'hdt.minvoice.com.vn'],
-			},
-			href: 'https://qlhd.minvoice.com.vn/#/login',
-			pass: true,
-		},
-	]
-
-	tcs.map((tc) => {
-		// if (tc.desc !== 'multiple attachemnts') return
-		var out = util.checkUrlCondition(tc.cond, tc.href)
-		t.equal(out, tc.pass)
-	})
-	t.end()
-})
-
-test('util.randomString', (t) => {
-	t.equal(10, util.randomString(10).length)
-	t.equal(11, util.randomString(11).length)
-	t.equal(12, util.randomString(12).length)
-	t.end()
-})
-
-test('replaceCssVariable mobile height', (t) => {
-	let css = "height: '@mobile_height';"
-	t.equal(util.replaceCssVariable(css, {}), 'height: 100%;', 'defaults to full mobile height')
-	t.equal(util.replaceCssVariable(css, {mobile_height: '50%'}), 'height: 50%;', 'uses configured mobile height')
-	t.end()
-})
-
-test('convert message event first msg send', (t) => {
-	var events = [
-		{by: {id: 1}, type: 'message_sent', created: 1100},
-		{by: {id: 1}, type: 'message_sent', created: 1200},
-		{by: {id: 1}, type: 'message_sent', created: 1300},
-	]
-
-	var expect = [
-		{by: {id: 1}, type: 'message_sent', created: 1100, mode: 'lead', show_time: true},
-		{by: {id: 1}, type: 'message_sent', created: 1200, mode: 'follow', show_time: false},
-		{by: {id: 1}, type: 'message_sent', created: 1300, mode: 'follow', show_time: false},
-	]
-
-	util.convertMessageEvent(events, 0)
-	util.convertMessageEvent(events, 1)
-	util.convertMessageEvent(events, 2)
-
-	t.equal(JSON.stringify(events), JSON.stringify(expect))
-	t.end()
-})
-
-test('convert message event message tag', (t) => {
-	var events = [
-		{type: 'conversation_state_updated'},
-		{type: 'conversation_tagged'},
-		{type: 'conversation_tagged'},
-		{type: 'conversation_tagged'},
-		{type: 'conversation_state_updated'},
-	]
-
-	var expect = [
-		{type: 'conversation_state_updated'},
-		{type: 'conversation_tagged', mode: 'hide'},
-		{type: 'conversation_tagged', mode: 'hide'},
-		{type: 'conversation_tagged', mode: 'combine'},
-		{type: 'conversation_state_updated'},
-	]
-
-	events.map((_, i) => util.convertMessageEvent(events, i))
-
-	t.equal(JSON.stringify(events), JSON.stringify(expect))
-
-	var events = [{type: 'conversation_tagged'}, {type: 'conversation_tagged'}, {type: 'conversation_tagged'}]
-
-	var expect = [
-		{type: 'conversation_tagged', mode: 'hide'},
-		{type: 'conversation_tagged', mode: 'hide'},
-		{type: 'conversation_tagged', mode: 'combine'},
-	]
-
-	events.map((_, i) => util.convertMessageEvent(events, i))
-
-	t.end()
-})
-
-test('convert message event message tag, msg_sent mixup', (t) => {
-	var events = [
-		{type: 'conversation_state_updated'},
-		{type: 'conversation_tagged'},
-		{by: {id: 1}, type: 'message_sent'},
-		{by: {id: 2}, type: 'message_sent'},
-		{type: 'conversation_tagged'},
-		{type: 'conversation_tagged'},
-		{type: 'conversation_state_updated'},
-	]
-
-	var expect = [
-		{type: 'conversation_state_updated'},
-		{type: 'conversation_tagged', mode: 'combine'},
-		{by: {id: 1}, type: 'message_sent', mode: 'lead', show_time: false},
-		{by: {id: 2}, type: 'message_sent', mode: 'lead', show_time: false},
-		{type: 'conversation_tagged', mode: 'hide'},
-		{type: 'conversation_tagged', mode: 'combine'},
-		{type: 'conversation_state_updated'},
-	]
-
-	events.map((_, i) => util.convertMessageEvent(events, i))
-
-	t.equal(JSON.stringify(events), JSON.stringify(expect))
-	t.end()
-})
-
-test('test insert message', (t) => {
-	var events = [
-		{type: 'conversation_state_updated'},
-		{id: 1, type: 'conversation_tagged'},
-		{by: {id: 1}, type: 'message_sent'},
-		{by: {id: 2}, type: 'message_sent'},
-		{type: 'conversation_tagged'},
-		{type: 'conversation_tagged'},
-		{type: 'conversation_state_updated'},
-	]
-
-	events.map((_, i) => util.convertMessageEvent(events, i))
-
-	events.splice(2, 0, {id: 2, type: 'conversation_tagged'})
-	util.convertUpdatedOrDeletedMessageEvent(events, 2)
-	var expect = [
-		{type: 'conversation_state_updated'},
-		{id: 1, type: 'conversation_tagged', mode: 'hide'},
-		{id: 2, type: 'conversation_tagged', mode: 'combine'},
-		{by: {id: 1}, type: 'message_sent', mode: 'lead', show_time: false},
-		{by: {id: 2}, type: 'message_sent', mode: 'lead', show_time: false},
-		{type: 'conversation_tagged', mode: 'hide'},
-		{type: 'conversation_tagged', mode: 'combine'},
-		{type: 'conversation_state_updated'},
-	]
-
-	t.equal(JSON.stringify(events), JSON.stringify(expect))
-	t.end()
-})
-
-test('mapizeDeep a map', (t) => {
-	var topicM = {
-		0: {
-			topic: 'account.acqcsmrppbftadjzxnvo.conversation.csqlxnairroppcktrg',
-			read: false,
-			updated: 1570586074000,
-		},
-		1: {
-			topic: 'account.acqcsmrppbftadjzxnvo.conversation.csqlxmkozwryrgjvag',
-			read: false,
-			updated: 1570551305000,
-		},
-		2: {
-			topic: 'account.acqcsmrppbftadjzxnvo.conversation.csqlvkqgspihkfzsnm',
-			read: false,
-			updated: 1570289320000,
-		},
-	}
-
-	var out = util.mapizeDeep(topicM, 'topic')
-	topicM['0'].topic = 't3'
-	t.deepEqual(out, {
-		'account.acqcsmrppbftadjzxnvo.conversation.csqlxnairroppcktrg': {
-			topic: 'account.acqcsmrppbftadjzxnvo.conversation.csqlxnairroppcktrg',
-			read: false,
-			updated: 1570586074000,
-		},
-		'account.acqcsmrppbftadjzxnvo.conversation.csqlxmkozwryrgjvag': {
-			topic: 'account.acqcsmrppbftadjzxnvo.conversation.csqlxmkozwryrgjvag',
-			read: false,
-			updated: 1570551305000,
-		},
-		'account.acqcsmrppbftadjzxnvo.conversation.csqlvkqgspihkfzsnm': {
-			topic: 'account.acqcsmrppbftadjzxnvo.conversation.csqlvkqgspihkfzsnm',
-			read: false,
-			updated: 1570289320000,
-		},
-	})
-	t.end()
-})
-
-test('mapize a map', (t) => {
-	var topicM = {
-		0: {topic: 't1', updated: 157},
-		1: {topic: 't2', updated: 158},
-	}
-
-	var out = util.mapize(topicM, 'topic')
-	t.deepEqual(out, {t1: {topic: 't1', updated: 157}, t2: {topic: 't2', updated: 158}})
-	t.end()
-})
-
-test('mapize', (t) => {
-	var arr = [
-		{id: 0, value: 0},
-		{id: 1, value: 1},
-		{id: 2, value: 2},
-		{id: 3, value: 3},
-		{id: 4, value: 4},
-	]
-	var m = util.mapize(arr, 'id')
-	for (var i = 0; i < arr.length; i++) {
-		t.equal(m[i], arr[i])
-	}
-	t.end()
-})
-
-test('convo id from topic', (t) => {
-	t.equal('csqldpucwamyuaetjf', util.convoIdFromTopic('account.acqcsmrppbftadjzxnvo.conversation.csqldpucwamyuaetjf'))
-	t.end()
-})
-
-test('user of convo', (t) => {
-	var convo = {
-		id: 'csqlmhetrpccwprnms',
-		account_id: 'acqcsmrppbftadjzxnvo',
-		created: 1568970100964184000,
-		members: [
-			{
-				type: 'bot',
-				id: 'agqhgvgtbwhsbolwtp',
-				name: 'Automation bot',
-				membership: 'active',
-			},
-			{
-				type: 'user',
-				id: 'usqlmfpdhxmajzggsjosw',
-				name: '',
-				membership: 'active',
-			},
-			{
-				type: 'agent',
-				id: 'agqcsmrppbfqstjwen',
-				name: 'Thành',
-				membership: 'active',
-			},
-			{
-				type: 'user',
-				id: 'usqlmfpdhxmajzgasdf',
-				name: '',
-				membership: 'active',
-			},
-			{
-				type: 'agent',
-				id: 'agqczwdrggvdnlbuom',
-				name: 'THanh',
-				membership: 'observer',
-			},
-		],
-		ended: 1569004072969908700,
-		state: 'ended',
-		accepted: 1568970101938098700,
-		actived: 1568974069989570300,
-		response_sec: 0,
-		first_message: 'sdfg',
-		subject: 'sdfg',
-	}
-
-	var users = util.usersOfConvo(convo)
-	t.equal(users.length, 2)
-	t.equal(users[0], 'usqlmfpdhxmajzggsjosw')
-	t.equal(users[1], 'usqlmfpdhxmajzgasdf')
-	t.end()
-})