@adlfe/campaign-management-library 2.10.2 → 2.10.4

package/projects/adl-campaign-management-library-internal/src/assets/flowbuilder/flowbuilder.js

@@ -1,4588 +0,0 @@
-class FlowBuilder {
-	onCreate = null;
-	onSelect = null;
-
-	constructor(canvas) {
-		this.canvas = canvas;
-		this.readOnly = false;
-
-		this.classMap = new Map();
-		this.classMap['FlowStart'] = FlowStart;
-		this.classMap['FlowEnd'] = FlowEnd;
-		this.classMap['FlowSendMsg'] = FlowSendMsg;
-		this.classMap['FlowSendButton'] = FlowSendButton;
-		this.classMap['FlowSendEmail'] = FlowSendEmail;
-		this.classMap['FlowSendList'] = FlowSendList;
-		this.classMap['FlowWaitResponse'] = FlowWaitResponse;
-		this.classMap['FlowValidation'] = FlowValidation;
-		this.classMap['FlowBranch'] = FlowBranch;
-		this.classMap['FlowHttpCall'] = FlowHttpCall;
-		this.classMap['FlowSendMedia'] = FlowSendMedia;
-		this.classMap['FlowSendTemplate'] = FlowSendTemplate;
-		this.classMap['FlowChatAgent'] = FlowChatAgent;
-		this.classMap['FlowSendCatalog'] = FlowSendCatalog;
-		this.classMap['FlowSubFlow'] = FlowSubFlow;
-		this.classMap['FlowReplyButton'] = FlowReplyButton;
-		this.classMap['FlowAssignVar'] = FlowAssignVar;
-		this.classMap['FlowReceiveOrder'] = FlowReceiveOrder;
-		this.classMap['FlowProductInquery'] = FlowProductInquery;
-		this.classMap['FlowSendLocation'] = FlowSendLocation;
-
-		this.canvas.style.overflow = 'scroll';
-		this.canvas.style.position = 'absolute';
-
-		var obj = this;
-
-		canvas.onmousedown = function (e) {
-			var posX =
-				parseFloat(
-					e.clientX -
-						obj.canvas.getBoundingClientRect().left *
-							(obj.zoom / 100) +
-						obj.canvas.scrollLeft
-				) *
-				(100 / obj.zoom);
-			var posY =
-				parseFloat(
-					e.clientY -
-						obj.canvas.getBoundingClientRect().top *
-							(obj.zoom / 100) +
-						obj.canvas.scrollTop
-				) *
-				(100 / obj.zoom);
-
-			if (e.srcElement == obj.canvas) {
-				if (!obj.readOnly) {
-					if (obj.currentComponent != 'pointer')
-						obj.addComponent(posX, posY);
-				}
-			} else {
-				var target = obj.getCompononentByPos(posX, posY);
-
-				if (target != undefined) {
-					if (obj.selectedComp != undefined) {
-						obj.selectedComp.unselect();
-					}
-					obj.selectedComp = target;
-
-					if (!obj.readOnly) {
-						target.select();
-					}
-
-					if (obj.onSelect != undefined) {
-						obj.onSelect(target);
-					}
-				}
-			}
-		};
-
-		canvas.onmousemove = function (e) {
-			if (!obj.readOnly) {
-				if (obj.moveComponent != undefined) {
-					obj.moveComponent.frame.style.left =
-						parseFloat(obj.moveComponent.frame.style.left) +
-						(e.pageX - obj.moveX) * (100 / obj.zoom) +
-						'px';
-					obj.moveComponent.frame.style.top =
-						parseFloat(obj.moveComponent.frame.style.top) +
-						(e.pageY - obj.moveY) * (100 / obj.zoom) +
-						'px';
-
-					obj.moveComponent.updateLink(undefined);
-
-					for (var i in obj.componentList) {
-						if (obj.componentList[i] != obj.moveComponent)
-							obj.componentList[i].updateLink(obj.moveComponent);
-					}
-
-					obj.moveX = e.pageX;
-					obj.moveY = e.pageY;
-				} else if (obj.linkComponent != undefined) {
-					var posX = (e.pageX - obj.linkX) * (100 / obj.zoom);
-					var posY = (e.pageY - obj.linkY) * (100 / obj.zoom);
-
-					obj.linkComponent.renderLink(obj.linkPoint, posX, posY);
-				}
-			}
-		};
-
-		canvas.onmouseup = function (e) {
-			if (!obj.readOnly) {
-				var posX =
-					parseFloat(
-						e.clientX -
-							obj.canvas.getBoundingClientRect().left *
-								(obj.zoom / 100) +
-							obj.canvas.scrollLeft
-					) *
-					(100 / obj.zoom);
-				var posY =
-					parseFloat(
-						e.clientY -
-							obj.canvas.getBoundingClientRect().top *
-								(obj.zoom / 100) +
-							obj.canvas.scrollTop
-					) *
-					(100 / obj.zoom);
-
-				if (obj.linkComponent != undefined) {
-					var target = obj.getCompononentByPos(posX, posY);
-
-					obj.linkComponent.setLink(obj.linkPoint, target);
-				}
-			}
-
-			obj.moveComponent = undefined;
-			obj.linkComponent = undefined;
-		};
-
-		this.init();
-	}
-
-	init() {
-		this.inInit = true;
-		this.selectedComp = undefined;
-
-		this.canvas.innerHTML = '';
-		this.setActiveComponent('pointer');
-
-		this.variableList = [];
-
-		this.componentList = [];
-		this.canvas.innerHTML =
-			"<div id='dynamic-height' style='position: absolute; left: 4000px; top: 2000px'>&nbsp;</div>";
-
-		this.currentComponent = 'FlowStart';
-		this.addComponent(20, 20);
-
-		this.currentComponent = 'FlowEnd';
-		this.addComponent(220, 120);
-
-		this.canvas.style.zoom = '100%';
-		this.zoom = 100;
-
-		this.currentComponent = null;
-		this.inInit = false;
-	}
-
-	resetZoom() {
-		this.zoom = 100;
-		this.canvas.style.marginTop = '0';
-		this.canvas.style.marginLeft = '0';
-		this.canvas.style.zoom = this.zoom + '%';
-	}
-
-	zoomIn() {
-		if (this.zoom < 100) {
-			this.zoom += 10;
-		} else {
-			this.zoom += 10;
-		}
-
-		if (this.zoom === 10) {
-			this.canvas.style.marginLeft = '3170px';
-			this.canvas.style.marginTop = '635px';
-		} else if (this.zoom === 20) {
-			this.canvas.style.marginLeft = '1440px';
-			this.canvas.style.marginTop = '280px';
-		} else if (this.zoom === 30) {
-			this.canvas.style.marginLeft = '840px';
-			this.canvas.style.marginTop = '165px';
-		} else if (this.zoom === 40) {
-			this.canvas.style.marginLeft = '540px';
-			this.canvas.style.marginTop = '105px';
-		} else if (this.zoom === 50) {
-			this.canvas.style.marginLeft = '360px';
-			this.canvas.style.marginTop = '70px';
-		} else if (this.zoom === 60) {
-			this.canvas.style.marginLeft = '240px';
-			this.canvas.style.marginTop = '45px';
-		} else if (this.zoom === 70) {
-			this.canvas.style.marginLeft = '155px';
-			this.canvas.style.marginTop = '30px';
-		} else if (this.zoom === 80) {
-			this.canvas.style.marginLeft = '90px';
-			this.canvas.style.marginTop = '17px';
-		} else if (this.zoom === 90) {
-			this.canvas.style.marginLeft = '40px';
-			this.canvas.style.marginTop = '8px';
-		} else if (this.zoom === 100) {
-			this.canvas.style.marginLeft = '15px';
-			this.canvas.style.marginTop = '0px';
-		}
-
-		if (this.zoom === 110) {
-			this.canvas.style.marginLeft = '-35px';
-			this.canvas.style.marginTop = '-7px';
-		} else if (this.zoom === 120) {
-			this.canvas.style.marginLeft = '-60px';
-			this.canvas.style.marginTop = '-13px';
-		} else if (this.zoom === 130) {
-			this.canvas.style.marginLeft = '-85px';
-			this.canvas.style.marginTop = '-15px';
-		} else if (this.zoom === 140) {
-			this.canvas.style.marginLeft = '-105px';
-			this.canvas.style.marginTop = '-22px';
-		} else if (this.zoom === 150) {
-			this.canvas.style.marginLeft = '-120px';
-			this.canvas.style.marginTop = '-24px';
-		} else if (this.zoom === 160) {
-			this.canvas.style.marginLeft = '-140px';
-			this.canvas.style.marginTop = '-27px';
-		} else if (this.zoom === 170) {
-			this.canvas.style.marginLeft = '-150px';
-			this.canvas.style.marginTop = '-30px';
-		} else if (this.zoom === 180) {
-			this.canvas.style.marginLeft = '-160px';
-			this.canvas.style.marginTop = '-32px';
-		} else if (this.zoom === 190) {
-			this.canvas.style.marginLeft = '-170px';
-			this.canvas.style.marginTop = '-35px';
-		} else if (this.zoom === 200) {
-			this.canvas.style.marginLeft = '-170px';
-			this.canvas.style.marginTop = '-35px';
-		}
-
-		if (this.zoom > 200) {
-			this.resetZoom();
-		}
-
-		localStorage.setItem('zoom', this.zoom);
-
-		console.log(this.zoom);
-		this.canvas.style.zoom = this.zoom + '%';
-	}
-
-	zoomOut() {
-		if (this.zoom > 10) {
-			if (this.zoom <= 100) {
-				this.zoom -= 10;
-			} else {
-				this.zoom -= 10;
-			}
-
-			console.log(this.zoom);
-
-			if (this.zoom === 10) {
-				this.canvas.style.marginLeft = '3170px';
-				this.canvas.style.marginTop = '635px';
-			} else if (this.zoom === 20) {
-				this.canvas.style.marginLeft = '1440px';
-				this.canvas.style.marginTop = '280px';
-			} else if (this.zoom === 30) {
-				this.canvas.style.marginLeft = '840px';
-				this.canvas.style.marginTop = '165px';
-			} else if (this.zoom === 40) {
-				this.canvas.style.marginLeft = '540px';
-				this.canvas.style.marginTop = '105px';
-			} else if (this.zoom === 50) {
-				this.canvas.style.marginLeft = '360px';
-				this.canvas.style.marginTop = '70px';
-			} else if (this.zoom === 60) {
-				this.canvas.style.marginLeft = '240px';
-				this.canvas.style.marginTop = '45px';
-			} else if (this.zoom === 70) {
-				this.canvas.style.marginLeft = '155px';
-				this.canvas.style.marginTop = '30px';
-			} else if (this.zoom === 80) {
-				this.canvas.style.marginLeft = '90px';
-				this.canvas.style.marginTop = '17px';
-			} else if (this.zoom === 90) {
-				this.canvas.style.marginLeft = '40px';
-				this.canvas.style.marginTop = '8px';
-			} else if (this.zoom === 100) {
-			}
-
-			localStorage.setItem('zoom', this.zoom);
-
-			this.canvas.style.zoom = this.zoom + '%';
-		}
-	}
-
-	delete(comp) {
-		this.selectedComp = undefined;
-
-		if (this.onSelect != undefined) {
-			this.onSelect(undefined);
-		}
-
-		var newArr = new Array();
-
-		for (var i in this.componentList) {
-			if (this.componentList[i] != comp) {
-				newArr.push(this.componentList[i]);
-			}
-		}
-
-		this.componentList = newArr;
-
-		for (var i in this.componentList) {
-			this.componentList[i].updateLink(undefined);
-		}
-	}
-
-	addVariable(VarName, Type, Def) {
-		if (this.variableList.indexOf(VarName) < 0) {
-			this.variableList.push({
-				variableName: VarName,
-				type: Type,
-				default: Def,
-			});
-		}
-	}
-
-	delVariable(varName) {
-		var pos = '';
-		this.variableList.forEach((each, index) => {
-			if (each.variableName === varName) {
-				pos = index;
-			}
-		});
-		console.log('ini variable', varName);
-		if (pos >= 0) {
-			this.variableList.splice(pos, 1);
-		}
-		console.log('ini variable list', this.variableList);
-	}
-
-	getVariables() {
-		return this.variableList;
-	}
-
-	clearVariables() {
-		this.variableList = [];
-	}
-
-	escapeStr(str) {
-		if (!str) {
-			return '';
-		}
-
-		return str
-			.replace(/[\\]/g, '\\\\')
-			.replace(/[\"]/g, '\\"')
-			.replace(/[\b]/g, '\\b')
-			.replace(/[\f]/g, '\\f')
-			.replace(/[\n]/g, '\\n')
-			.replace(/[\r]/g, '\\r')
-			.replace(/[\t]/g, '\\t');
-
-		//.replace(/[\/]/g, "\\/")
-	}
-
-	getScript() {
-		var varString = '';
-		for (var i in this.variableList) {
-			varString +=
-				`,
-		` +
-				JSON.stringify(this.variableList[i]) +
-				`
-		`;
-		}
-
-		if (varString != '') {
-			varString = varString.substr(1);
-		}
-		var ret =
-			`
-				{
-			"variables" : [` +
-			varString +
-			`],
-					"flow" : [
-			`;
-
-		var cmpScript = '';
-
-		for (var i in this.componentList) {
-			cmpScript +=
-				`, 
-				` + this.componentList[i].getScript();
-		}
-
-		if (cmpScript != '') {
-			cmpScript = cmpScript.substring(1);
-		}
-
-		ret +=
-			cmpScript +
-			`
-					]
-				}
-			`;
-
-		return ret;
-	}
-
-	loadScript(script) {
-		var ret = false;
-		this.init();
-
-		try {
-			var obj = JSON.parse(script);
-			var varNode = obj['variables'];
-			if (varNode != null) {
-				for (var i in varNode) {
-					if (varNode[i]?.variableName) {
-						this.addVariable(
-							varNode[i].variableName,
-							varNode[i].type,
-							varNode[i].default
-						);
-					} else {
-						this.addVariable(varNode[i], null, null);
-					}
-				}
-			}
-
-			var flowNode = obj['flow'];
-
-			for (var i in flowNode) {
-				var comp = undefined;
-
-				if (flowNode[i]['type'] == 'FlowStart') {
-					comp = this.getComponentById('START');
-				} else if (flowNode[i]['type'] == 'FlowEnd') {
-					comp = this.getComponentById('END');
-				} else {
-					this.currentComponent = flowNode[i]['type'];
-					comp = this.addComponent(0, 0);
-				}
-
-				if (comp != undefined) {
-					comp.loadData(flowNode[i]);
-				}
-			}
-
-			for (var i in this.componentList) {
-				this.componentList[i].updateLink(undefined);
-			}
-
-			ret = true;
-		} catch (e) {
-			console.log(e);
-		}
-
-		return ret;
-	}
-
-	startMove(component, e) {
-		if (!this.readOnly) {
-			this.moveX = e.pageX;
-			this.moveY = e.pageY;
-
-			this.moveComponent = component;
-		}
-	}
-
-	startLink(component, point, e) {
-		if (!this.readOnly) {
-			this.linkComponent = component;
-			this.linkPoint = point;
-
-			this.linkX = e.pageX - e.layerX + 10;
-			this.linkY = e.pageY - e.layerY + 5;
-		}
-	}
-
-	setActiveComponent(componentClass) {
-		this.currentComponent = componentClass;
-	}
-
-	addComponent(x, y) {
-		var component = undefined;
-		var cls = this.classMap[this.currentComponent];
-
-		if (cls != undefined) {
-			component = new cls(this, x, y);
-			this.componentList.push(component);
-
-			if (!this.inInit) {
-				if (this.onCreate != undefined) {
-					this.onCreate(component);
-				}
-			}
-		}
-
-		return component;
-	}
-
-	getCompononentByPos(x, y) {
-		var ret = undefined;
-
-		for (var i = this.componentList.length - 1; i >= 0; i--) {
-			if (
-				x > this.componentList[i].frame.offsetLeft &&
-				x <
-					this.componentList[i].frame.offsetLeft +
-						this.componentList[i].frame.offsetWidth &&
-				y > this.componentList[i].frame.offsetTop &&
-				y <
-					this.componentList[i].frame.offsetTop +
-						this.componentList[i].frame.offsetHeight
-			) {
-				ret = this.componentList[i];
-				break;
-			}
-		}
-
-		return ret;
-	}
-
-	getComponentById(id) {
-		var ret = undefined;
-
-		for (var i in this.componentList) {
-			if (this.componentList[i].id == id) {
-				ret = this.componentList[i];
-				break;
-			}
-		}
-
-		return ret;
-	}
-
-	setReadOnly(readOnly) {
-		this.readOnly = readOnly;
-
-		if (readOnly) {
-			this.moveComponent = undefined;
-
-			if (this.linkComponent != undefined) {
-				this.linkComponent.setLink(this.linkPoint, undefined);
-			}
-
-			this.linkComponent = undefined;
-
-			if (this.selectedComp != undefined) {
-				this.selectedComp.unselect();
-			}
-
-			this.selectedComp = undefined;
-		}
-	}
-}
-
-class FlowBaseComponent {
-	constructor(fb, x, y) {
-		this.fb = fb;
-		this.id = this.UUID();
-
-		this.outPointList = new Array();
-
-		this.frame = document.createElement('DIV');
-		this.frame.style = `position: absolute; 
-							width: ${this.getType() === 'FlowAssignVar' ? '280px' : '210px'}; 
-							background: #FFFFFF; 
-							border-radius: 5px;
-							padding: 10px;
-							box-shadow: 9px 9px 14px rgba(44, 59, 113, 0.04);
-							border-radius: 8px;
-			`;
-
-		this.frame.style.left = x + 'px';
-		this.frame.style.top = y + 'px';
-		fb.canvas.appendChild(this.frame);
-
-		this.titleDiv = document.createElement('DIV');
-		this.titleDiv.style = `
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								font-weight: bold;
-								cursor: move;
-								user-select: none; 
-								line-height: 20px;
-			`;
-
-		this.titleDiv.innerHTML =
-			`
-				<div>
-					<img width="20" height="20" style="user-select: none; vertical-align: top; margin-right: 3px" src="` +
-			flowAsset[this.getType()] +
-			`">
-					<span style="vertical-align: top;user-select: none;">` +
-			this.getTitle() +
-			`<span>
-				</div>
-			`;
-
-		var obj = this;
-		this.titleDiv.onmousedown = function (e) {
-			obj.fb.startMove(obj, e);
-		};
-
-		this.frame.appendChild(this.titleDiv);
-
-		this.closeImg = document.createElement('IMG');
-		this.closeImg.width = 32;
-		this.closeImg.height = 32;
-		this.closeImg.src = flowAsset['close'];
-		this.closeImg.style = `position: absolute; 
-									left: ${this.getType() === 'FlowAssignVar' ? '240px' : '190px'};
-									top: -16px;
-									cursor: pointer;
-									display: none;
-			`;
-
-		var obj = this;
-		this.closeImg.onclick = function (e) {
-			obj.fb.delete(obj);
-			obj.frame.remove();
-		};
-
-		this.frame.appendChild(this.closeImg);
-	}
-
-	select() {
-		this.closeImg.style.display = '';
-	}
-
-	unselect() {
-		this.closeImg.style.display = 'none';
-	}
-
-	getType() {
-		return 'FlowBaseComponent';
-	}
-
-	loadData(data) {
-		this.frame.style.left = data['left'] + 'px';
-		this.frame.style.top = data['top'] + 'px';
-
-		this.id = data['id'];
-
-		this.loadDetailData(data['data']);
-	}
-
-	loadDetailData(data) {}
-
-	UUID() {
-		console.log('ini nyampe untuk uuid');
-		var nbr,
-			randStr = '';
-		do {
-			randStr += (nbr = Math.random()).toString(16).substr(3, 6);
-		} while (randStr.length < 30);
-		return (
-			randStr.substr(0, 8) +
-			'-' +
-			randStr.substr(8, 4) +
-			'-4' +
-			randStr.substr(12, 3) +
-			'-' +
-			(((nbr * 4) | 0) + 8).toString(16) + // [89ab]
-			randStr.substr(15, 3) +
-			'-' +
-			randStr.substr(18, 12)
-		);
-	}
-
-	getTitle() {
-		return 'Component';
-	}
-
-	getNodePosition(node) {
-		var ret = {
-			x: parseInt(node.offsetLeft),
-			y: parseInt(node.offsetTop),
-		};
-
-		if (node.parentElement != null && node.parentElement != this.frame) {
-			var parPos = this.getNodePosition(node.parentElement);
-
-			ret.x = ret.x + parPos.x;
-			ret.y = ret.y + parPos.y;
-		}
-
-		return ret;
-	}
-
-	addOutPoint(parent) {
-		var point = {};
-
-		point.frame = document.createElement('DIV');
-		point.frame.style = `
-								position: absolute;
-								width: 10px;
-								height: 10px;
-								top: calc(50% - 5px);
-								left: calc(100% - 15px);
-								border: 1p solid #FFFFFF;
-								border-radius: 5px;
-								background: #49CCD9; 
-								user-select: none; 
-								cursor: pointer;
-			`;
-
-		parent.appendChild(point.frame);
-
-		point.frame.innerHTML = `
-				<div style='position: absolute; display: none'>&nbsp;</div>
-				<div style='position: absolute; display: none'>&nbsp;</div>
-				<div style='position: absolute; display: none'>&nbsp;</div>
-				<div style='position: absolute; display: none'>&nbsp;</div>
-				<div style='position: absolute; display: none'>&nbsp;</div>
-			`;
-
-		var obj = this;
-		point.frame.onmousedown = function (e) {
-			obj.fb.startLink(obj, point, e);
-		};
-
-		this.outPointList.push(point);
-
-		return point;
-	}
-
-	getInPoint() {
-		var ret = {
-			x: parseInt(this.frame.style.left),
-			y: parseInt(this.frame.style.top) + 15,
-		};
-
-		return ret;
-	}
-
-	updateLink(target) {
-		for (var i in this.outPointList) {
-			if (target == undefined) {
-				this.setLink(
-					this.outPointList[i],
-					this.fb.getComponentById(this.outPointList[i].targetId)
-				);
-			} else if (this.outPointList[i].targetId == target.id) {
-				this.setLink(this.outPointList[i], target);
-			}
-		}
-	}
-
-	setLink(point, target) {
-		if (target == undefined || target == this) {
-			point.targetId = undefined;
-
-			var box1 = point.frame.firstElementChild;
-			var box2 = box1.nextElementSibling;
-			var box3 = box2.nextElementSibling;
-			var box4 = box3.nextElementSibling;
-			var box5 = box4.nextElementSibling;
-
-			box1.style.display = 'none';
-			box2.style.display = 'none';
-			box3.style.display = 'none';
-			box4.style.display = 'none';
-			box5.style.display = 'none';
-		} else {
-			point.targetId = target.id;
-
-			var targetPoint = target.getInPoint();
-
-			var pointPos = this.getNodePosition(point.frame);
-
-			pointPos.x = pointPos.x + parseInt(this.frame.style.left);
-			pointPos.y = pointPos.y + parseInt(this.frame.style.top);
-
-			targetPoint.x = targetPoint.x - pointPos.x - 10;
-			targetPoint.y = targetPoint.y - pointPos.y - 5;
-
-			this.renderLink(point, targetPoint.x, targetPoint.y);
-		}
-	}
-
-	renderLink(point, posX, posY) {
-		var box1 = point.frame.firstElementChild;
-		var box2 = box1.nextElementSibling;
-		var box3 = box2.nextElementSibling;
-		var box4 = box3.nextElementSibling;
-		var box5 = box4.nextElementSibling;
-
-		if (posX > 5 && posY < 0) {
-			// top right
-			box1.style.display = '';
-			box1.style.left = '10px';
-			box1.style.top = '5px';
-			box1.style.width = posX / 2 + 'px';
-			box1.style.height = '1px';
-
-			box1.style.borderLeft = '1px solid rgba(0, 0, 0, 0)';
-			box1.style.borderTop = '2px solid rgba(73,204,217,1)';
-			box1.style.borderRight = '1px solid rgba(0, 0, 0, 0)';
-			box1.style.borderBottom = '1px solid rgba(0, 0, 0, 0)';
-
-			box2.style.display = '';
-			box2.style.left = posX / 2 + 11 + 'px';
-			box2.style.top = posY + 5 + 'px';
-			box2.style.width = '1px';
-			box2.style.height = -posY - 1 + 'px';
-
-			box2.style.borderLeft = '2px solid rgba(73,204,217,1)';
-			box2.style.borderTop = '1px solid rgba(0, 0, 0, 0)';
-			box2.style.borderRight = '1px solid rgba(0, 0, 0, 0)';
-			box2.style.borderBottom = '1px solid rgba(0, 0, 0, 0)';
-
-			box3.style.display = '';
-			box3.style.left = box2.style.left;
-			box3.style.top = box2.style.top;
-			box3.style.width = posX / 2 + 'px';
-			box3.style.height = '1px';
-
-			box3.style.borderLeft = '1px solid rgba(0, 0, 0, 0)';
-			box3.style.borderTop = '2px solid rgba(73,204,217,1)';
-			box3.style.borderRight = '1px solid rgba(0, 0, 0, 0)';
-			box3.style.borderBottom = '1px solid rgba(0, 0, 0, 0)';
-
-			box3.className = 'arrow';
-
-			console.log('ini atas');
-
-			box4.style.display = 'none';
-			box5.style.display = 'none';
-		} else if (posX > 5 && posY > 0) {
-			// bottom right
-
-			box1.style.display = '';
-			box1.style.left = '10px';
-			box1.style.top = '5px';
-			box1.style.width = posX / 2 + 'px';
-			box1.style.height = '1px';
-
-			box1.style.borderLeft = '1px solid rgba(0, 0, 0, 0)';
-			box1.style.borderTop = '2px solid rgba(73,204,217,1)';
-			box1.style.borderRight = '1px solid rgba(0, 0, 0, 0)';
-			box1.style.borderBottom = '1px solid rgba(0, 0, 0, 0)';
-
-			box2.style.display = '';
-			box2.style.left = posX / 2 + 11 + 'px';
-			box2.style.top = '5px';
-			box2.style.width = '1px';
-			box2.style.height = posY - 1 + 'px';
-
-			box2.style.borderLeft = '2px solid rgba(73,204,217,1)';
-			box2.style.borderTop = '1px solid rgba(0, 0, 0, 0)';
-			box2.style.borderRight = '1px solid rgba(0, 0, 0, 0)';
-			box2.style.borderBottom = '1px solid rgba(0, 0, 0, 0)';
-
-			box3.style.display = '';
-			box3.style.left = box2.style.left;
-			box3.style.top = posY + 5 + 'px';
-			box3.style.width = posX / 2 + 'px';
-			box3.style.height = '1px';
-
-			box3.style.borderLeft = '1px solid rgba(0, 0, 0, 0)';
-			box3.style.borderTop = '2px solid rgba(73,204,217,1)';
-			box3.style.borderRight = '1px solid rgba(0, 0, 0, 0)';
-			box3.style.borderBottom = '1px solid rgba(0, 0, 0, 0)';
-
-			console.log('bawah', posX);
-
-			if (posX <= 20) {
-				box3.className = 'none';
-			} else {
-				box3.className = 'arrow';
-			}
-
-			// box3.className = "arrow";
-
-			box4.style.display = 'none';
-			box5.style.display = 'none';
-		} else if (posX <= 5 && posY < 0) {
-			// top left
-
-			box1.style.display = '';
-			box1.style.left = '10px';
-			box1.style.top = '5px';
-			box1.style.width = '20px';
-			box1.style.height = '1px';
-
-			box1.style.borderLeft = '1px solid rgba(0, 0, 0, 0)';
-			box1.style.borderTop = '2px solid rgba(73,204,217,1)';
-			box1.style.borderRight = '1px solid rgba(0, 0, 0, 0)';
-			box1.style.borderBottom = '1px solid rgba(0, 0, 0, 0)';
-
-			box2.style.display = '';
-			box2.style.left = '32px';
-			box2.style.top = posY / 2 + 'px';
-			box2.style.width = '1px';
-			box2.style.height = -(posY / 2) + 4 + 'px';
-
-			box2.style.borderLeft = '2px solid rgba(73,204,217,1)';
-			box2.style.borderTop = '1px solid rgba(0, 0, 0, 0)';
-			box2.style.borderRight = '1px solid rgba(0, 0, 0, 0)';
-			box2.style.borderBottom = '1px solid rgba(0, 0, 0, 0)';
-
-			box3.style.display = '';
-			box3.style.left = posX + 10 - 20 + 'px';
-			box3.style.top = posY / 2 + 'px';
-			box3.style.width = -posX + 40 + 'px';
-			box3.style.height = '1px';
-
-			box3.style.borderLeft = '1px solid rgba(0, 0, 0, 0)';
-			box3.style.borderTop = '2px solid rgba(73,204,217,1)';
-			box3.style.borderRight = '1px solid rgba(0, 0, 0, 0)';
-			box3.style.borderBottom = '1px solid rgba(0, 0, 0, 0)';
-
-			box4.style.display = '';
-			box4.style.left = posX + 10 - 20 + 'px';
-			box4.style.top = posY + 4 + 'px';
-			box4.style.width = '20px';
-			box4.style.height = -(posY / 2) - 5 + 'px';
-
-			box4.style.borderLeft = '2px solid rgba(73,204,217,1)';
-			box4.style.borderTop = '1px solid rgba(0, 0, 0, 0)';
-			box4.style.borderRight = '1px solid rgba(0, 0, 0, 0)';
-			box4.style.borderBottom = '1px solid rgba(0, 0, 0, 0)';
-
-			box5.style.display = '';
-			box5.style.left = box4.style.left;
-			box5.style.top = box4.style.top;
-			box5.style.width = '20px';
-			box5.style.height = '1px';
-
-			box5.style.borderLeft = '1px solid rgba(0, 0, 0, 0)';
-			box5.style.borderTop = '2px solid rgba(73,204,217,1)';
-			box5.style.borderRight = '1px solid rgba(0, 0, 0, 0)';
-			box5.style.borderBottom = '1px solid rgba(0, 0, 0, 0)';
-
-			//box5.className = "arrow";
-
-			console.log('ini kiri', posX);
-
-			if (posX <= 20 || posX <= -300 || posX <= -350) {
-				box5.className = 'arrow';
-			} else {
-				box5.className = 'none';
-			}
-		} else if (posX <= 5 && posY > 0) {
-			// bottom left
-
-			box1.style.display = '';
-			box1.style.left = '10px';
-			box1.style.top = '5px';
-			box1.style.width = '20px';
-			box1.style.height = '1px';
-
-			box1.style.borderLeft = '1px solid rgba(0, 0, 0, 0)';
-			box1.style.borderTop = '2px solid rgba(73,204,217,1)';
-			box1.style.borderRight = '1px solid rgba(0, 0, 0, 0)';
-			box1.style.borderBottom = '1px solid rgba(0, 0, 0, 0)';
-
-			box2.style.display = '';
-			box2.style.left = '32px';
-			box2.style.top = box1.style.top;
-			box2.style.width = '1px';
-			box2.style.height = posY / 2 + 'px';
-
-			box2.style.borderLeft = '2px solid rgba(73,204,217,1)';
-			box2.style.borderTop = '1px solid rgba(0, 0, 0, 0)';
-			box2.style.borderRight = '1px solid rgba(0, 0, 0, 0)';
-			box2.style.borderBottom = '1px solid rgba(0, 0, 0, 0)';
-
-			box3.style.display = '';
-			box3.style.left = posX + 10 - 20 + 'px';
-			box3.style.top = posY / 2 + 6 + 'px';
-			box3.style.width = -posX + 40 + 'px';
-			box3.style.height = '1px';
-
-			box3.style.borderLeft = '1px solid rgba(0, 0, 0, 0)';
-			box3.style.borderTop = '2px solid rgba(73,204,217,1)';
-			box3.style.borderRight = '1px solid rgba(0, 0, 0, 0)';
-			box3.style.borderBottom = '1px solid rgba(0, 0, 0, 0)';
-
-			box4.style.display = '';
-			box4.style.left = box3.style.left;
-			box4.style.top = box3.style.top;
-			box4.style.width = '1px';
-			box4.style.height = posY / 2 - 2 + 'px';
-
-			box4.style.borderLeft = '2px solid rgba(73,204,217,1)';
-			box4.style.borderTop = '1px solid rgba(0, 0, 0, 0)';
-			box4.style.borderRight = '1px solid rgba(0, 0, 0, 0)';
-			box4.style.borderBottom = '1px solid rgba(0, 0, 0, 0)';
-
-			box5.style.display = '';
-			box5.style.left = box4.style.left;
-			box5.style.top = posY + 5 + 'px';
-			box5.style.width = '20px';
-			box5.style.height = '1px';
-
-			box5.style.borderLeft = '1px solid rgba(0, 0, 0, 0)';
-			box5.style.borderTop = '2px solid rgba(73,204,217,1)';
-			box5.style.borderRight = '1px solid rgba(0, 0, 0, 0)';
-			box5.style.borderBottom = '1px solid rgba(0, 0, 0, 0)';
-
-			box5.className = 'arrow';
-		}
-	}
-
-	makeHTMLText(text) {
-		var result = '' + text;
-
-		result = result.replaceAll('\r\n', '<br>');
-		result = result.replaceAll('\r', '<br>');
-		result = result.replaceAll('\n', '<br>');
-
-		return result;
-	}
-
-	escapeStr(str) {
-		if (!str) {
-			return '';
-		}
-
-		return str
-			.replace(/[\\]/g, '\\\\')
-			.replace(/[\"]/g, '\\"')
-			.replace(/[\b]/g, '\\b')
-			.replace(/[\f]/g, '\\f')
-			.replace(/[\n]/g, '\\n')
-			.replace(/[\r]/g, '\\r')
-			.replace(/[\t]/g, '\\t');
-
-		//.replace(/[\/]/g, "\\/")
-	}
-
-	canReceiveFlow() {
-		return true;
-	}
-
-	getScript() {
-		console.log('ini id', this.id);
-		var ret =
-			`{
-					"type" : "` +
-			this.getType() +
-			`",
-					"id" : "` +
-			this.id +
-			`",
-					"left" : ` +
-			this.frame.offsetLeft +
-			`,
-					"top" : ` +
-			this.frame.offsetTop +
-			`,
-					"data" : ` +
-			this.getDetailScript() +
-			`
-				}`;
-
-		return ret;
-	}
-
-	getDetailScript() {
-		return `""`;
-	}
-
-	getPointTargetId(idx) {
-		var ret = '';
-		var point = this.outPointList[idx];
-
-		if (point != undefined) {
-			if (point.targetId != undefined) {
-				ret = point.targetId;
-			}
-		}
-
-		return ret;
-	}
-}
-
-class FlowStart extends FlowBaseComponent {
-	constructor(fb, x, y) {
-		super(fb, x, y);
-
-		this.id = 'START';
-		this.addOutPoint(this.frame);
-	}
-
-	getType() {
-		return 'FlowStart';
-	}
-
-	getTitle() {
-		return 'Start';
-	}
-
-	canReceiveFlow() {
-		return false;
-	}
-
-	select() {}
-
-	getDetailScript() {
-		return (
-			`{
-						"next" : "` +
-			this.getPointTargetId(0) +
-			`"
-					}`
-		);
-	}
-
-	loadDetailData(data) {
-		this.outPointList[0].targetId = data['next'];
-	}
-}
-
-class FlowEnd extends FlowBaseComponent {
-	constructor(fb, x, y) {
-		super(fb, x, y);
-
-		this.id = 'END';
-		this.intervalTime = '0';
-		this.message = '';
-	}
-
-	getType() {
-		return 'FlowEnd';
-	}
-
-	getTitle() {
-		return 'End';
-	}
-
-	select() {}
-
-	getIntervalTime() {
-		return this.intervalTime;
-	}
-
-	setIntervalTime(intervalTime) {
-		this.intervalTime = intervalTime;
-	}
-
-	getMessage() {
-		return this.message;
-	}
-
-	setMessage(message) {
-		this.message = message;
-	}
-
-	getDetailScript() {
-		return (
-			`{
-			"intervalTime" : "` +
-			this.intervalTime +
-			`",
-			"message" : "` +
-			this.escapeStr(this?.message || '') +
-			`"
-		}`
-		);
-	}
-
-	loadDetailData(data) {
-		this.setIntervalTime(data['intervalTime']);
-		this.setMessage(data['message']);
-	}
-}
-
-class FlowReplyButton extends FlowBaseComponent {
-	constructor(fb, x, y) {
-		super(fb, x, y);
-
-		this.to = 'Customer';
-		this.headerType = 'Text';
-		this.body = '';
-		this.footer = '';
-		this.listTitle = 'List';
-		this.mediaURL = '';
-		this.headerText = '';
-		this.list = [];
-		this.fileName = '';
-
-		this.lblTo = document.createElement('DIV');
-		this.lblTo.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 10px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.lblTo.innerHTML = '<b>To : </b>' + this.makeHTMLText(this.to);
-		this.frame.appendChild(this.lblTo);
-
-		this.lblHeader = document.createElement('DIV');
-		this.lblHeader.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 10px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.lblHeader.innerHTML =
-			'<b>Header Type : </b>' + this.makeHTMLText(this.headerType);
-		this.frame.appendChild(this.lblHeader);
-
-		this.lblText = document.createElement('DIV');
-		this.lblText.style = `
-			position: relative;
-			width: 100%;
-			padding-right: 10px;
-			margin-top: 10px;
-			font-family: Helvetica, Arial, Sans-Serif;
-			font-size: 13px;
-			user-select: none; 
-		`;
-
-		this.lblText.innerHTML =
-			'<b>Text : </b>' + this.makeHTMLText(this.headerText);
-		this.frame.appendChild(this.lblText);
-
-		this.img = document.createElement('DIV');
-		this.img.style = `
-			width: 180px;
-			user-select: none; 
-			margin-bottom: -22px;
-		`;
-
-		this.img.innerHTML = '&nbsp;';
-		this.frame.appendChild(this.img);
-		this.lblBody = document.createElement('DIV');
-		this.lblBody.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 10px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.lblBody.innerHTML =
-			'<b>Body : </b>' + this.makeHTMLText(this.body);
-		this.frame.appendChild(this.lblBody);
-
-		this.lblFooter = document.createElement('DIV');
-		this.lblFooter.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 10px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.lblFooter.innerHTML =
-			'<b>Footer : </b>' + this.makeHTMLText(this.footer);
-		this.frame.appendChild(this.lblFooter);
-
-		this.lblButtons = document.createElement('DIV');
-		this.lblButtons.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 20px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.frame.appendChild(this.lblButtons);
-
-		this.setList([]);
-	}
-
-	getType() {
-		return 'FlowReplyButton';
-	}
-
-	getTitle() {
-		return "Reply Button <br><br><div style='border-bottom: 1px solid #ebedf3;'></div>";
-	}
-
-	getDetailScript() {
-		var btnString = '';
-
-		for (var i in this.list) {
-			var idx = parseInt(i);
-
-			btnString +=
-				`,{
-								"title" : "` +
-				this.list[i] +
-				`",
-								"next" : "` +
-				this.getPointTargetId(idx) +
-				`"
-							}`;
-		}
-
-		if (btnString != '') {
-			btnString = btnString.substr(1);
-		}
-
-		return (
-			`{
-						"to" : "` +
-			this.to +
-			`",
-						"headerType" : "` +
-			this.headerType +
-			`",
-						"headerText" : "` +
-			this.headerText +
-			`",
-
-						"text" : "` +
-			this.escapeStr(this.body) +
-			`",
-						"fileName" : "` +
-			this.escapeStr(this.fileName || '') +
-			`"
-		,
-						"mediaURL" : "` +
-			this.escapeStr(this.mediaURL) +
-			`",
-						"footer" : "` +
-			this.footer +
-			`",
-						"list" : [
-							` +
-			btnString +
-			`
-						],
-						"defaultNext" : "` +
-			this.getPointTargetId(this.list.length) +
-			`"
-					}`
-		);
-	}
-
-	loadDetailData(data) {
-		var buttons = [];
-
-		for (var i in data['list']) {
-			buttons.push(data['list'][parseInt(i)]['title']);
-		}
-
-		this.setList(buttons);
-
-		for (var i in data['list']) {
-			this.outPointList[parseInt(i)].targetId =
-				data['list'][parseInt(i)]['next'];
-		}
-
-		this.setTo(data['to']);
-		this.setHeaders(data['headerType']);
-		this.setText(data['headerText']);
-		this.setBody(data['text'], data['headerType']);
-		this.setFooter(data['footer']);
-		this.setFileName(data['fileName']);
-
-		if (data['headerType'] !== 'Text') {
-			this.setMediaURL(data['mediaURL']);
-		}
-
-		this.outPointList[this.list.length].targetId = data['defaultNext'];
-	}
-
-	getTo() {
-		return this.to;
-	}
-
-	setTo(to) {
-		this.to = to;
-		this.lblTo.innerHTML = '<b>To : </b>' + this.makeHTMLText(this.to);
-	}
-
-	setFileName(fileName) {
-		this.fileName = fileName;
-	}
-	getFileName() {
-		return this.fileName;
-	}
-	getHeaders() {
-		return this.headerType;
-	}
-	setHeaders(headerType) {
-		this.headerType = headerType;
-		this.lblHeader.innerHTML =
-			'<b>Header Type : </b>' + this.makeHTMLText(this.headerType);
-	}
-
-	getText() {
-		return this.headerText;
-	}
-
-	setText(text) {
-		if (!text) {
-			return;
-		}
-
-		this.headerText = text;
-		this.lblText.innerHTML =
-			'<b>Text : </b>' + this.makeHTMLText(this.headerText);
-	}
-
-	getBody() {
-		return this.body;
-	}
-
-	setBody(body, type) {
-		if (type === 'Document') {
-			this.body = '';
-			this.lblBody.remove();
-		} else {
-			this.body = body;
-			this.lblBody.innerHTML =
-				'<b>Body : </b>' + this.makeHTMLText(this.body);
-		}
-	}
-
-	getFooter() {
-		return this.footer;
-	}
-
-	setFooter(footer) {
-		this.footer = footer;
-		this.lblFooter.innerHTML =
-			'<b>Footer : </b>' + this.makeHTMLText(this.footer);
-	}
-
-	getList() {
-		return this.list;
-	}
-
-	setList(list) {
-		this.list = list;
-
-		this.lblButtons.innerHTML = '';
-
-		var defaultNext = undefined;
-
-		var oldNext = [];
-
-		if (this.outPointList.length > 0) {
-			for (var i = 0; i < this.outPointList.length - 1; i++) {
-				oldNext.push(this.outPointList[i].targetId);
-			}
-
-			defaultNext =
-				this.outPointList[this.outPointList.length - 1].targetId;
-		}
-
-		this.outPointList = [];
-
-		for (var i in this.list) {
-			var btn = document.createElement('DIV');
-			btn.style = `
-									position: relative;
-									width: 100%;
-									padding: 8px;
-									font-family: Helvetica, Arial, Sans-Serif;
-									font-size: 13px;
-									user-select: none; 
-									background: #ED3D80;
-									border-radius: 4px; 
-									box-shadow: 0px 1px 2px #AAAAAA;
-									width: calc(100% - -16px);
-									margin-bottom: 5px;
-									color: #FFFFFF;
-				`;
-
-			btn.innerHTML = this.makeHTMLText(this.list[i]);
-			this.lblButtons.appendChild(btn);
-
-			this.addOutPoint(btn);
-
-			if (i < oldNext.length) {
-				this.outPointList[i].targetId = oldNext[i];
-			}
-		}
-
-		var btn = document.createElement('DIV');
-		btn.style = `
-								position: relative;
-								width: 100%;
-								padding: 8px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-								background: #D63A7B;
-								border-radius: 4px; 
-								box-shadow: 0px 1px 2px #AAAAAA;
-								width: calc(100% - -16px);
-								margin-bottom: 5px;
-								color: #FFFFFF;
-			`;
-
-		btn.innerHTML = this.makeHTMLText('Default');
-		this.lblButtons.appendChild(btn);
-
-		this.addOutPoint(btn);
-
-		this.outPointList[this.outPointList.length - 1].targetId = defaultNext;
-
-		this.updateLink(undefined);
-	}
-
-	updateImg() {
-		if (this.headerType === 'Text') {
-			this.mediaURL = '';
-		}
-
-		if (this.headerType == 'Image') {
-			if (this.mediaURL == '') {
-				this.img.style = `
-				  width: 180px;
-				  user-select: none; 
-				  margin-bottom: -22px;
-			  `;
-
-				// this.img.style.background =
-				//   `center no-repeat url('` + flowAsset["image"] + `')`;
-			} else {
-				this.img.style = `
-					width: 180px;
-					height: 100px;
-					margin-top: 10px;
-					margin-bottom: 10px;
-					background-size: contain;
-					user-select: none; 
-				`;
-
-				this.img.style.background =
-					`center no-repeat url('` + this.mediaURL + `')`;
-			}
-		} else if (this.headerType === 'Audio') {
-			this.img.style.background =
-				`center no-repeat url('` + flowAsset['audioIcon'] + `')`;
-		} else if (this.headerType === 'Video') {
-			this.img.style = `
-				width: 180px;
-				height: 100px;
-				margin-top: 10px;
-				margin-bottom: 10px;
-				background-size: contain;
-				user-select: none; 
-			`;
-			this.img.style.background =
-				`center no-repeat url('` + flowAsset['videoIcon'] + `')`;
-		} else if (this.headerType === 'Document') {
-			this.img.style = `
-				width: 180px;
-				height: 100px;
-				margin-top: 10px;
-				margin-bottom: 10px;
-				background-size: contain;
-				user-select: none; 
-			`;
-			this.img.style.background =
-				`center no-repeat url('` + flowAsset['documentIcon'] + `')`;
-		} else {
-			this.img.style = `
-				  width: 180px;
-				  user-select: none; 
-				  margin-bottom: -22px;
-			  `;
-
-			//   this.img.style.background =
-			// 	`center no-repeat url('` + flowAsset[this.headerType] + `')`;
-		}
-
-		this.img.style.backgroundSize = 'contain';
-	}
-
-	getMediaURL() {
-		return this.mediaURL;
-	}
-
-	setMediaURL(mediaURL) {
-		this.mediaURL = mediaURL;
-
-		this.updateImg();
-	}
-}
-
-class FlowReceiveOrder extends FlowBaseComponent {
-	constructor(fb, x, y) {
-		super(fb, x, y);
-		this.addOutPoint(this.frame);
-	}
-
-	getType() {
-		return 'FlowReceiveOrder';
-	}
-
-	getTitle() {
-		return 'Receive Order</div>';
-	}
-
-	getDetailScript() {
-		return (
-			`{
-								"next" : "` +
-			this.getPointTargetId(0) +
-			`"
-							}`
-		);
-	}
-
-	loadDetailData(data) {
-		this.outPointList[0].targetId = data['next'];
-	}
-}
-
-class FlowProductInquery extends FlowBaseComponent {
-	constructor(fb, x, y) {
-		super(fb, x, y);
-		this.addOutPoint(this.frame);
-	}
-
-	getType() {
-		return 'FlowProductInquery';
-	}
-
-	getTitle() {
-		return 'Receive Product Inquery</div>';
-	}
-
-	getDetailScript() {
-		return (
-			`{
-								"next" : "` +
-			this.getPointTargetId(0) +
-			`"
-							}`
-		);
-	}
-
-	loadDetailData(data) {
-		this.outPointList[0].targetId = data['next'];
-	}
-}
-
-class FlowSendMsg extends FlowBaseComponent {
-	constructor(fb, x, y) {
-		super(fb, x, y);
-
-		this.to = 'Customer';
-		this.msg = '';
-
-		this.lblTo = document.createElement('DIV');
-		this.lblTo.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 10px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.lblTo.innerHTML = '<b>To : </b>' + this.makeHTMLText(this.to);
-		this.frame.appendChild(this.lblTo);
-
-		this.lblMsg = document.createElement('DIV');
-		this.lblMsg.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 20px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-								overflow-wrap: break-word;
-			`;
-
-		this.lblMsg.innerHTML = this.makeHTMLText(this.msg);
-		this.frame.appendChild(this.lblMsg);
-
-		this.addOutPoint(this.frame);
-	}
-
-	getType() {
-		return 'FlowSendMsg';
-	}
-
-	getDetailScript() {
-		return (
-			`{
-						"next" : "` +
-			this.getPointTargetId(0) +
-			`",
-						"to" : "` +
-			this.to +
-			`",
-						"msg" : "` +
-			this.escapeStr(this.msg) +
-			`"
-					}`
-		);
-	}
-
-	loadDetailData(data) {
-		this.outPointList[0].targetId = data['next'];
-
-		this.setTo(data['to']);
-		this.setMsg(data['msg']);
-	}
-
-	getTitle() {
-		return "Send Whatsapp Message <br><br><div style='border-bottom: 1px solid #ebedf3;'></div>";
-	}
-
-	getTo() {
-		return this.to;
-	}
-
-	setTo(to) {
-		this.to = to;
-		this.lblTo.innerHTML = '<b>To : </b>' + this.makeHTMLText(this.to);
-	}
-
-	getMsg() {
-		return this.msg;
-	}
-
-	setMsg(msg) {
-		this.msg = msg;
-		this.lblMsg.innerHTML = this.makeHTMLText(this.msg);
-	}
-}
-class FlowSubFlow extends FlowBaseComponent {
-	constructor(fb, x, y) {
-		super(fb, x, y);
-
-		this.lisVarIn = '';
-		this.lisVarOut = '';
-		this.listIn = [];
-		this.listOut = [];
-		this.typeIn = [];
-		this.typeOut = [];
-		this.lblIN = '';
-
-		this.flow = 'Example Flow';
-		this.idFlow = '';
-		this.variable = '';
-
-		this.lblFlow = document.createElement('DIV');
-		this.lblFlow.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 10px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.lblFlow.innerHTML =
-			'<b>Flow : </b>' + this.makeHTMLText(this.flow);
-		this.frame.appendChild(this.lblFlow);
-		this.addOutPoint(this.frame);
-
-		this.lblButtons = document.createElement('DIV');
-		this.lblButtons.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 20px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.frame.appendChild(this.lblButtons);
-
-		this.lblButtonsOut = document.createElement('DIV');
-		this.lblButtonsOut.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 20px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.frame.appendChild(this.lblButtonsOut);
-
-		this.setVarIn([]);
-		this.setVarOut([]);
-	}
-
-	getType() {
-		return 'FlowSubFlow';
-	}
-
-	getDetailScript() {
-		var varStringIn = '';
-		var varStringOut = '';
-		var typeStringIn = '';
-		var typeStringOut = '';
-		for (var i in this.listIn) {
-			var idx = parseInt(i);
-			let dataListIn = this.listIn[i]?.value
-				? this.listIn[i]?.value
-				: this.listIn[i];
-			varStringIn +=
-				`,{
-								  "var" : "` +
-				this.typeIn[i] +
-				`", 
-									"value" : ` +
-				JSON.stringify(dataListIn) +
-				`
-							  }`;
-		}
-		if (varStringIn != '') {
-			varStringIn = varStringIn.substr(1);
-		}
-		for (var i in this.listOut) {
-			var idx = parseInt(i);
-			let dataListOut = this.listOut[i]?.value
-				? this.listOut[i]?.value
-				: this.listOut[i];
-			varStringOut +=
-				`,{
-									"var" : "` +
-				this.typeOut[i] +
-				`", 
-			  						"value" : ` +
-				JSON.stringify(dataListOut) +
-				`
-								}`;
-		}
-		if (varStringOut != '') {
-			varStringOut = varStringOut.substr(1);
-		}
-		for (var i in this.typeIn) {
-			var idx = parseInt(i);
-			typeStringIn +=
-				`,{
-									"type" : "` +
-				this.typeIn[i] +
-				`"
-								}`;
-		}
-		if (typeStringIn != '') {
-			typeStringIn = typeStringIn.substr(1);
-		}
-		for (var i in this.typeOut) {
-			var idx = parseInt(i);
-			typeStringOut +=
-				`,{
-									"type" : "` +
-				this.typeOut[i] +
-				`"
-								}`;
-		}
-		if (typeStringOut != '') {
-			typeStringOut = typeStringOut.substr(1);
-		}
-		return (
-			`{
-						  "next" : "` +
-			this.getPointTargetId(0) +
-			`",
-						  "flow" : "` +
-			this.idFlow +
-			`",
-		  				   "name" : "` +
-			this.flow +
-			`",
-		  					"in" : [
-			  ` +
-			varStringIn +
-			`
-		  ],
-		  					"out" : [
-			` +
-			varStringOut +
-			`
-		  ]
-					  }`
-		);
-	}
-
-	loadDetailData(data) {
-		this.outPointList[0].targetId = data['next'];
-		this.setFlow(data['name'], data['flow']);
-		this.setVariable(data['variable']);
-		this.setVarIn(data['in']);
-		this.setVarOut(data['out']);
-	}
-
-	getTitle() {
-		return "Call Subflow <br><br><div style='border-bottom: 1px solid #ebedf3;'></div>";
-	}
-	getVarIn() {
-		return this.lisVarIn;
-	}
-	setTypeIn(type) {
-		this.typeIn = type;
-	}
-	setVarIn(varIn) {
-		this.listIn = varIn;
-		this.lblButtons.innerHTML = "";
-		let dataTypeIn = [];
-		// var defaultNext = undefined;
-	
-		// var oldNext = [];
-	
-		// if (this.outPointList.length > 0) {
-		//   for (var i = 0; i < this.outPointList.length - 1; i++) {
-		// 	oldNext.push(this.outPointList[i].targetId);
-		//   }
-	
-		//   defaultNext = this.outPointList[this.outPointList.length - 1].targetId;
-		// }
-		var btn = document.createElement("DIV");
-		btn.innerHTML = this.makeHTMLText("<b>IN :<b>");
-		this.lblButtons.appendChild(btn);
-		
-			for (var i in this.listIn) {
-			var idx = parseInt(i) + 1;
-				if(this.listIn[i].var) {
-					dataTypeIn.push(this.listIn[i].var)
-				}
-				console.log('ini varin23232', this.listIn?.[i].value);
-			if (this.listIn?.[i].var !== 'undefined') {
-				console.log('ini 2324234', this.listIn?.[i].var);
-				var btn = document.createElement("DIV");
-				btn.innerHTML = "<b>Var &nbsp</b>" + idx + "<b>&nbsp : </b>&nbsp;" +  this.makeHTMLText(this.listIn?.[i].value != undefined ? this.listIn?.[i].value : this.listIn[i]);
-				this.lblButtons.appendChild(btn);
-			}
-			}
-		if(dataTypeIn !== []) {
-			this.setTypeIn(dataTypeIn)
-		}
-		// this.updateLink(undefined);
-	}
-	getVarOut() {
-		return this.lisVarIn;
-	}
-	setTypeOut(type) {
-		this.typeOut = type;
-	}
-	setVarOut(varOut) {
-		this.listOut = varOut;
-		let dataTypeOut = [];
-		this.lblButtonsOut.innerHTML = '';
-
-		// var defaultNext = undefined;
-
-		// var oldNext = [];
-
-		// if (this.outPointList.length > 0) {
-		//   for (var i = 0; i < this.outPointList.length - 1; i++) {
-		// 	oldNext.push(this.outPointList[i].targetId);
-		//   }
-
-		//   defaultNext = this.outPointList[this.outPointList.length - 1].targetId;
-		// }
-		var btn = document.createElement('DIV');
-		btn.innerHTML = this.makeHTMLText('<b>Out :<b>');
-		this.lblButtonsOut.appendChild(btn);
-		for (var i in this.listOut) {
-			var idx = parseInt(i) + 1;
-			if (this.listOut?.[i]?.var) {
-				dataTypeOut.push(this.listOut[i].var);
-			}
-			var btn = document.createElement('DIV');
-			btn.innerHTML =
-				'<b>Var &nbsp</b>' +
-				idx +
-				'<b>&nbsp : </b>&nbsp;' +
-				this.makeHTMLText(
-					this.listOut?.[i].value != undefined
-						? this.listOut?.[i].value
-						: this.listOut[i]
-				);
-			this.lblButtonsOut.appendChild(btn);
-		}
-		if (dataTypeOut !== []) {
-			this.setTypeOut(dataTypeOut);
-		}
-		// this.updateLink(undefined);
-	}
-	getFlow() {
-		return this.idFlow;
-	}
-	setVariable(variable) {
-		this.variable = variable;
-	}
-
-	setFlow(name, flow) {
-		this.flow = name;
-		this.idFlow = flow;
-		this.lblFlow.innerHTML =
-			'<b>Flow : </b>' + this.makeHTMLText(this.flow);
-	}
-	setId(idFlow) {
-		this.idFlow = idFlow;
-	}
-}
-class FlowChatAgent extends FlowBaseComponent {
-	constructor(fb, x, y) {
-		super(fb, x, y);
-
-		this.topic = '';
-		this.agent = '';
-		this.agentName = '';
-		this.msg = '';
-		this.idTopic = '';
-		this.lblTopic = document.createElement('DIV');
-		this.lblTopic.style = `
-									position: relative;
-									width: 100%;
-									padding-right: 10px;
-									margin-top: 10px;
-									font-family: Helvetica, Arial, Sans-Serif;
-									font-size: 13px;
-									user-select: none; 
-				`;
-
-		this.lblTopic.innerHTML =
-			'<b>Topic : </b>' + this.makeHTMLText(this.topic);
-		this.frame.appendChild(this.lblTopic);
-
-		this.lblAgent = document.createElement('DIV');
-		this.lblAgent.style = `
-					position: relative;
-					width: 100%;
-					padding-right: 20px;
-					margin-top: 10px;
-					font-family: Helvetica, Arial, Sans-Serif;
-					font-size: 13px;
-					user-select: none;
-					word-break: break-word 
-					overflow-wrap: break-word;
-				`;
-
-		this.lblAgent.innerHTML =
-			'<b>Agent: </b>' + this.makeHTMLText(this.agentName);
-
-		this.frame.appendChild(this.lblAgent);
-
-		this.lblMsg = document.createElement('DIV');
-		this.lblMsg.style = `
-					position: relative;
-					width: 100%;
-					padding-right: 20px;
-					margin-top: 10px;
-					font-family: Helvetica, Arial, Sans-Serif;
-					font-size: 13px;
-					user-select: none;
-					word-break: break-word 
-					overflow-wrap: break-word;
-				`;
-
-		this.lblMsg.innerHTML =
-			'<b>Message: </b> </br>' + this.makeHTMLText(this.msg);
-		this.frame.appendChild(this.lblMsg);
-
-		this.addOutPoint(this.frame);
-	}
-
-	getType() {
-		return 'FlowChatAgent';
-	}
-
-	getDetailScript() {
-		return (
-			`{
-							"next" : "` +
-			this.getPointTargetId(0) +
-			`",
-							"topic" : "` +
-			this.topic +
-			`",
-							"idTopic" : "` +
-			this.idTopic +
-			`",
-							"agentId" : "` +
-			this.agent +
-			`",
-							"agentName" : "` +
-			this.agentName +
-			`",
-			
-							"message" : "` +
-			this.escapeStr(this.msg) +
-			`"
-						}`
-		);
-	}
-
-	loadDetailData(data) {
-		this.outPointList[0].targetId = data['next'];
-		this.setIdTopic(data['idTopic']);
-		this.setTopic(data['topic']);
-		this.setMsg(data['message']);
-		this.setAgentId(data['agentId']);
-		this.setAgentName(data['agentName']);
-	}
-
-	getTitle() {
-		return "Chat To Agent <br><br><div style='border-bottom: 1px solid #ebedf3;'></div>";
-	}
-
-	getTopic() {
-		return this.topic;
-	}
-	getAgent() {
-		return this.agent;
-	}
-
-	setAgentId(agent) {
-		this.agent = agent;
-	}
-
-	getAgentName() {
-		return this.agentName;
-	}
-
-	setAgentName(agent) {
-		this.agentName = agent;
-		this.lblAgent.innerHTML =
-			'<b>Agent: </b>' + this.makeHTMLText(agent || '');
-	}
-
-	setTopic(topic) {
-		this.topic = topic;
-		this.lblTopic.innerHTML =
-			'<b>Topic : </b>' + this.makeHTMLText(this.topic);
-	}
-
-	getIdTopic() {
-		return this.idTopic;
-	}
-
-	setIdTopic(id) {
-		this.idTopic = id;
-	}
-
-	getMsg() {
-		return this.msg;
-	}
-
-	setMsg(msg) {
-		this.msg = msg;
-		this.lblMsg.innerHTML =
-			'<b>Message: </b> </br>' + this.makeHTMLText(this.msg);
-	}
-}
-
-class FlowSendCatalog extends FlowBaseComponent {
-	constructor(fb, x, y) {
-		super(fb, x, y);
-
-		this.category = '-';
-		this.catalog = '-';
-		this.msg = '-';
-		this.body = '';
-		this.footer = '';
-		this.headerType = 'Text';
-		this.listProduct = '-';
-		this.listProductMulti = '-';
-		this.listSection = '-';
-		this.type = '';
-		this.catalogId = '';
-		this.footer = '';
-		this.product = new Array();
-		this.section = new Array();
-		this.lblCategory = document.createElement('DIV');
-		this.lblCategory.style = `
-									position: relative;
-									width: 100%;
-									padding-right: 10px;
-									margin-top: 10px;
-									font-family: Helvetica, Arial, Sans-Serif;
-									font-size: 13px;
-									user-select: none; 
-				`;
-
-		this.lblCategory.innerHTML =
-			'<b>Category : </b> </br>' + this.makeHTMLText(this.category);
-		this.frame.appendChild(this.lblCategory);
-
-		this.lblCatalog = document.createElement('DIV');
-		this.lblCatalog.style = `
-					position: relative;
-					width: 100%;
-					padding-right: 20px;
-					margin-top: 10px;
-					font-family: Helvetica, Arial, Sans-Serif;
-					font-size: 13px;
-					user-select: none;
-					word-break: break-word 
-					overflow-wrap: break-word;
-				`;
-
-		this.lblCatalog.innerHTML =
-			'<b>Catalog : </b> </br>' + this.makeHTMLText(this.catalog);
-		this.frame.appendChild(this.lblCatalog);
-
-		this.lblProduct = document.createElement('DIV');
-		this.lblProduct.style = `
-									position: relative;
-									width: 100%;
-									padding-right: 10px;
-									margin-top: 10px;
-									font-family: Helvetica, Arial, Sans-Serif;
-									font-size: 13px;
-									user-select: none; 
-				`;
-
-		this.lblProduct.innerHTML =
-			'<b>Product : </b> </br>' + this.makeHTMLText(this.listProduct);
-		this.frame.appendChild(this.lblProduct);
-
-		this.addOutPoint(this.frame);
-	}
-
-	getType() {
-		return 'FlowSendCatalog';
-	}
-
-	getDetailScript() {
-		var headerSection = '';
-		var idx = parseInt(i);
-		if (this.category !== 'Single Product') {
-			console.log('section data', this.listSection);
-			for (var i in this.listSection) {
-				const products = [];
-				const keyTitle = this.listSection[i]?.['sectionName']
-					? this.listSection[i]?.['sectionName']
-					: this.listSection[i]['title'];
-				if (this.listSection?.[i]?.['product']) {
-					this.listSection[i]['product'].forEach(each => {
-						products.push(each.name);
-					});
-				} else {
-					this.listSection[i]['products'].forEach(each => {
-						products.push(each);
-					});
-				}
-
-				headerSection +=
-					`,{
-											"title" : "` +
-					keyTitle +
-					`",	
-											"products" : ` +
-					JSON.stringify(products) +
-					`
-										}`;
-			}
-		}
-		if (headerSection != '') {
-			headerSection = headerSection.substr(1);
-		}
-		return (
-			`{
-							"next" : "` +
-			this.getPointTargetId(0) +
-			`",
-							"category" : "` +
-			this.category +
-			`",
-							"type" : "` +
-			this.type +
-			`",
-							"header" : "` +
-			this.text +
-			`",
-							"catalogId" : "` +
-			this.catalog +
-			`",
-							"productId" : "` +
-			this.listProduct +
-			`",
-					
-							"body" : "` +
-			this.escapeStr(this.body) +
-			`",
-							"footer" : "` +
-			this.footer +
-			`",
-							"section" : [
-			` +
-			headerSection +
-			`
-			]
-			}`
-		);
-	}
-
-	loadDetailData(data) {
-		console.log('ini data', data);
-		this.outPointList[0].targetId = data['next'];
-		this.setCategory(data['category']);
-		this.setCatalog(data['catalogId']);
-		this.setBody(data['body']);
-		this.setFooter(data['footer'] === 'null' ? '' : data['footer']);
-		this.setButtonText(data['header']);
-		if (data['category'] === 'Single Product') {
-			this.setListProduct(data['productId']);
-		} else {
-			this.setListSection(data['section']);
-		}
-	}
-
-	getTitle() {
-		return "Send Catalog <br><br><div style='border-bottom: 1px solid #ebedf3;'></div>";
-	}
-
-	getCategory() {
-		return this.category;
-	}
-
-	setCategory(category) {
-		this.category = category;
-		this.lblCategory.innerHTML =
-			'<b>Category :</b> </br>' + this.makeHTMLText(this.category);
-	}
-
-	getCatalog() {
-		return this.catalog;
-	}
-	getHeaders() {
-		return this.headerType;
-	}
-	setCatalog(catalog) {
-		this.catalog = catalog;
-		this.lblCatalog.innerHTML =
-			'<b>Catalog :</b> </br>' + this.makeHTMLText(this.catalog);
-	}
-	setType(type) {
-		this.type = type;
-		console.log('ini type', type);
-	}
-	getText() {
-		return this.text;
-	}
-	setButtonText(text) {
-		this.text = text;
-	}
-	setBody(body) {
-		this.body = body;
-	}
-	getBody() {
-		return this.body;
-	}
-	setFooter(footer) {
-		this.footer = footer;
-	}
-	getFooter() {
-		return this.footer;
-	}
-	getListProduct() {
-		return this.listProduct;
-	}
-
-	setListProduct(product) {
-		console.log('productz', product);
-		this.listProduct = product;
-		this.lblProduct.innerHTML = '<b>Product : </b> </br>' + product;
-	}
-	setListProductMulti(product) {
-		console.log('product datassss', product);
-		let resultProduct = '';
-		for (let x in product) {
-			resultProduct = `${resultProduct} ${
-				product[x].name || product[x].title
-			} </br> `;
-		}
-		console.log('resultz', resultProduct);
-		this.listProductMulti = product;
-		this.lblProduct.innerHTML = '<b>Product : </b> </br>' + resultProduct;
-	}
-	setListSection(section) {
-		let resultProduct = '';
-		for (let x in section) {
-			resultProduct = `${resultProduct} ${
-				section[x].name || section[x].title || section[x].sectionName
-			} </br> `;
-		}
-
-		this.listSection = section;
-		this.lblProduct.innerHTML = '<b>Product : </b> </br>' + resultProduct;
-	}
-
-	getListSection() {
-		return this.listSection;
-	}
-
-	getProduct() {
-		return this.listProduct;
-	}
-	getProductMulti() {
-		return this.listProductMulti;
-	}
-	getMsg() {
-		return this.msg;
-	}
-
-	setMsg(msg) {
-		this.msg = msg;
-		this.lblMsg.innerHTML =
-			'<b>Message: </b> </br>' + this.makeHTMLText(this.msg);
-	}
-}
-
-class FlowSendMedia extends FlowBaseComponent {
-	constructor(fb, x, y) {
-		super(fb, x, y);
-
-		this.to = 'Customer';
-		this.msg = '';
-		this.mediaType = 'image';
-		this.mediaURL = '';
-		this.fileName = '';
-		this.body = '';
-
-		this.lblTo = document.createElement('DIV');
-		this.lblTo.style = `
-			position: relative;
-			width: 100%;
-			padding-right: 10px;
-			margin-top: 10px;
-			font-family: Helvetica, Arial, Sans-Serif;
-			font-size: 13px;
-			user-select: none; 
-	`;
-
-		this.lblTo.innerHTML = '<b>To : </b>' + this.makeHTMLText(this.to);
-		this.frame.appendChild(this.lblTo);
-
-		this.lblMediaType = document.createElement('DIV');
-		this.lblMediaType.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 10px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.lblMediaType.innerHTML =
-			'<b>Type : </b>' + this.makeHTMLText(this.mediaType);
-		this.frame.appendChild(this.lblMediaType);
-
-		this.img = document.createElement('DIV');
-		this.img.style =
-			`
-								width: 100%;
-								height: 100px;
-								margin-top: 10px;
-								margin-bottom: 10px;
-								background:center no-repeat url('` +
-			flowAsset['image'] +
-			`');
-								background-size: contain;
-								user-select: none; 
-			`;
-
-		this.img.innerHTML = '&nbsp;';
-		this.frame.appendChild(this.img);
-
-		this.lblMsg = document.createElement('DIV');
-		this.lblMsg.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 20px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-								overflow-wrap: break-word;
-			`;
-
-		this.lblMsg.innerHTML = this.makeHTMLText(this.msg);
-		this.frame.appendChild(this.lblMsg);
-
-		this.addOutPoint(this.frame);
-	}
-	setFileName(fileName) {
-		this.fileName = fileName;
-	}
-	getFileName() {
-		return this.fileName;
-	}
-	setBody(body) {
-		this.msg = body;
-		this.lblMsg.innerHTML = this.makeHTMLText(this.msg);
-	}
-	getBody() {
-		return this.msg;
-	}
-	getType() {
-		return 'FlowSendMedia';
-	}
-
-	getDetailScript() {
-		return (
-			`{
-						"next" : "` +
-			this.getPointTargetId(0) +
-			`",
-						"to" : "` +
-			this.to +
-			`",
-						"msg" : "` +
-			this.escapeStr(this.msg) +
-			`",
-						"mediaType" : "` +
-			this.escapeStr(this.mediaType) +
-			`",
-						"mediaURL" : "` +
-			this.escapeStr(this.mediaURL) +
-			`",
-						"fileName" : "` +
-			this.escapeStr(this.fileName) +
-			`",
-						"text" : "` +
-			this.body +
-			`"
-					}`
-		);
-	}
-
-	loadDetailData(data) {
-		this.outPointList[0].targetId = data['next'];
-
-		this.setTo(data['to']);
-		this.setMsg(data['msg']);
-		this.setMediaType(data['mediaType']);
-		this.setMediaURL(data['mediaURL']);
-		this.setFileName(data['fileName']);
-		this.setBody(data['msg']);
-	}
-
-	getTitle() {
-		return "Send Media Message <br><br><div style='border-bottom: 1px solid #ebedf3;'></div>";
-	}
-
-	getTo() {
-		return this.to;
-	}
-
-	setTo(to) {
-		this.to = to;
-		this.lblTo.innerHTML = '<b>To : </b>' + this.makeHTMLText(this.to);
-	}
-
-	updateImg() {
-		if (this.mediaType == 'Image') {
-			if (this.mediaURL == '') {
-				this.img.style.background =
-					`center no-repeat url('` + flowAsset['image'] + `')`;
-			} else {
-				this.img.style.background =
-					`center no-repeat url('` + this.mediaURL + `')`;
-			}
-		} else if (this.mediaType === 'Audio') {
-			this.img.style.background =
-				`center no-repeat url('` + flowAsset['audioIcon'] + `')`;
-		} else if (this.mediaType === 'Video') {
-			this.img.style.background =
-				`center no-repeat url('` + flowAsset['videoIcon'] + `')`;
-		} else if (this.mediaType === 'Document') {
-			this.img.style.background =
-				`center no-repeat url('` + flowAsset['documentIcon'] + `')`;
-		} else {
-			this.img.style.background =
-				`center no-repeat url('` + flowAsset[this.mediaType] + `')`;
-		}
-
-		this.img.style.backgroundSize = 'contain';
-	}
-
-	getMediaType() {
-		return this.mediaType;
-	}
-
-	setMediaType(mediaType) {
-		this.mediaType = mediaType;
-		this.lblMediaType.innerHTML =
-			'<b>Type : </b>' + this.makeHTMLText(this.mediaType);
-
-		this.updateImg();
-	}
-
-	getMediaURL() {
-		return this.mediaURL;
-	}
-
-	setMediaURL(mediaURL) {
-		this.mediaURL = mediaURL;
-
-		this.updateImg();
-	}
-
-	getMsg() {
-		return this.msg;
-	}
-
-	setMsg(msg) {
-		this.msg = msg;
-		this.lblMsg.innerHTML = this.makeHTMLText(this.msg);
-	}
-}
-
-class FlowHttpCall extends FlowBaseComponent {
-	constructor(fb, x, y) {
-		super(fb, x, y);
-
-		this.method = 'POST';
-		this.url = 'www.server.com';
-		this.bodyType = 'JSON';
-		this.body = '';
-		this.authType = 'NONE';
-		this.authToken = '';
-		this.authUser = '';
-		this.authPass = '';
-
-		this.headers = new Array();
-		this.responseMap = new Array();
-
-		this.lblMethod = document.createElement('DIV');
-		this.lblMethod.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 10px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.lblMethod.innerHTML =
-			'<b>Method : </b>' + this.makeHTMLText(this.method);
-		this.frame.appendChild(this.lblMethod);
-
-		this.lblUrl = document.createElement('DIV');
-		this.lblUrl.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 20px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.lblUrl.innerHTML = '<b>URL : </b>' + this.makeHTMLText(this.url);
-		this.frame.appendChild(this.lblUrl);
-
-		this.lblBodyType = document.createElement('DIV');
-		this.lblBodyType.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 20px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.lblBodyType.innerHTML =
-			'<b>Format : </b>' + this.makeHTMLText(this.bodyType);
-		this.frame.appendChild(this.lblBodyType);
-
-		this.lblBody = document.createElement('DIV');
-		this.lblBody.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 20px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-								overflow-wrap: break-word;
-			`;
-
-		this.lblBody.innerHTML = '<pre>' + this.body + '</pre>';
-		this.frame.appendChild(this.lblBody);
-
-		this.lblButtons = document.createElement('DIV');
-		this.lblButtons.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 20px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.frame.appendChild(this.lblButtons);
-
-		this.btnValid = document.createElement('DIV');
-		this.btnValid.style = `
-								position: relative;
-								width: 100%;
-								padding: 8px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-								background: #6B6FAC;
-								border-radius: 4px; 
-								box-shadow: 0px 1px 2px #AAAAAA;
-								width: calc(100% - -16px);
-								margin-bottom: 5px;
-								color: #FFFFFF;
-			`;
-
-		this.btnValid.innerHTML = this.makeHTMLText('Success');
-		this.lblButtons.appendChild(this.btnValid);
-
-		this.addOutPoint(this.btnValid);
-
-		this.btnInvalid = document.createElement('DIV');
-		this.btnInvalid.style = `
-								position: relative;
-								width: 100%;
-								padding: 8px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-								background: #D63A7B;
-								border-radius: 4px; 
-								box-shadow: 0px 1px 2px #AAAAAA;
-								width: calc(100% - -16px);
-								margin-bottom: 5px;
-								color: #FFFFFF;
-			`;
-
-		this.btnInvalid.innerHTML = this.makeHTMLText('Error');
-		this.lblButtons.appendChild(this.btnInvalid);
-
-		this.addOutPoint(this.btnInvalid);
-	}
-
-	getType() {
-		return 'FlowHttpCall';
-	}
-
-	getDetailScript() {
-		var headerString = '';
-
-		for (var i in this.headers) {
-			headerString +=
-				`,{
-								"name" : "` +
-				this.headers[i]['name'] +
-				`",
-								"value" : "` +
-				this.headers[i]['value'] +
-				`"
-							}`;
-		}
-
-		if (headerString != '') {
-			headerString = headerString.substr(1);
-		}
-
-		var responseString = '';
-
-		for (var i in this.responseMap) {
-			responseString +=
-				`,{
-								"variable" : "` +
-				this.responseMap[i]['variable'] +
-				`",
-								"path" : "` +
-				this.responseMap[i]['path'] +
-				`"
-							}`;
-		}
-
-		if (responseString != '') {
-			responseString = responseString.substr(1);
-		}
-
-		return (
-			`{
-						"errorNext" : "` +
-			this.getPointTargetId(1) +
-			`",
-						"next" : "` +
-			this.getPointTargetId(0) +
-			`",
-						"method" : "` +
-			this.method +
-			`",
-						"url" : "` +
-			this.url +
-			`",
-						"authType" : "` +
-			this.authType +
-			`",
-						"authToken" : "` +
-			this.authToken +
-			`",
-						"authUser" : "` +
-			this.authUser +
-			`",
-						"authPass" : "` +
-			this.authPass +
-			`",
-						"headers" : [
-							` +
-			headerString +
-			`
-						],
-						"responseMap" : [
-							` +
-			responseString +
-			`
-						],
-						"bodyType" : "` +
-			this.bodyType +
-			`",
-						"body" : "` +
-			this.escapeStr(this.body) +
-			`"
-					}`
-		);
-
-		return ret;
-	}
-
-	loadDetailData(data) {
-		this.outPointList[0].targetId = data['next'];
-		this.outPointList[1].targetId = data['errorNext'];
-
-		this.setMethod(data['method']);
-		this.setUrl(data['url']);
-		this.setBody(data['body']);
-		this.setBodyType(data['bodyType']);
-		this.setAuthType(data['authType']);
-		this.setAuthUser(data['authUser']);
-		this.setAuthPass(data['authPass']);
-		this.setAuthToken(data['authToken']);
-
-		var headers = [];
-
-		for (var i in data['headers']) {
-			headers.push({
-				name: data['headers'][parseInt(i)]['name'],
-				value: data['headers'][parseInt(i)]['value'],
-			});
-		}
-		this.setHeaders(headers);
-
-		var responseMap = [];
-
-		for (var i in data['responseMap']) {
-			responseMap.push({
-				variable: data['responseMap'][parseInt(i)]['variable'],
-				path: data['responseMap'][parseInt(i)]['path'],
-			});
-		}
-		this.setResponseMap(responseMap);
-	}
-
-	getTitle() {
-		return 'HTTP Request';
-	}
-
-	getHeaders() {
-		return this.headers;
-	}
-
-	setHeaders(headers) {
-		this.headers = headers;
-	}
-
-	getResponseMap() {
-		return this.responseMap;
-	}
-
-	setResponseMap(data) {
-		this.responseMap = data;
-	}
-
-	getAuthType() {
-		return this.authType;
-	}
-
-	setAuthType(data) {
-		this.authType = data;
-	}
-
-	getAuthToken() {
-		return this.authToken;
-	}
-
-	setAuthToken(data) {
-		this.authToken = data;
-	}
-
-	getAuthUser() {
-		return this.authUser;
-	}
-
-	setAuthUser(data) {
-		this.authUser = data;
-	}
-
-	getAuthPass() {
-		return this.authPass;
-	}
-
-	setAuthPass(data) {
-		this.authPass = data;
-	}
-
-	getMethod() {
-		return this.method;
-	}
-
-	setMethod(method) {
-		this.method = method;
-		this.lblMethod.innerHTML =
-			'<b>Method : </b>' + this.makeHTMLText(this.method);
-	}
-
-	getUrl() {
-		return this.url;
-	}
-
-	setUrl(url) {
-		this.url = url;
-		this.lblUrl.innerHTML =
-			'<b>URL : </b>' +
-			"<div style='word-wrap: break-word;'>" +
-			this.makeHTMLText(this.url);
-		('</div>');
-	}
-
-	getBody() {
-		return this.body;
-	}
-
-	setBody(body) {
-		this.body = body;
-		this.lblBody.innerHTML = '<pre>' + this.body + '</pre>';
-	}
-
-	getBodyType() {
-		return this.bodyType;
-	}
-
-	setBodyType(bodyType) {
-		this.bodyType = bodyType;
-		this.lblBodyType.innerHTML =
-			'<b>Format : </b>' + this.makeHTMLText(this.bodyType);
-	}
-}
-
-class FlowWaitResponse extends FlowBaseComponent {
-	constructor(fb, x, y) {
-		super(fb, x, y);
-
-		this.variable = 'response';
-		this.duration = '2';
-
-		this.lblTo = document.createElement('DIV');
-		this.lblTo.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 10px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.lblTo.innerHTML =
-			'<b>Var : </b>' + this.makeHTMLText(this.variable);
-		this.frame.appendChild(this.lblTo);
-
-		this.lblDur = document.createElement('DIV');
-		this.lblDur.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 10px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.lblDur.innerHTML =
-			'<b>Duration : </b>' +
-			this.makeHTMLText(this.duration) +
-			' Minutes';
-		this.frame.appendChild(this.lblDur);
-
-		this.addOutPoint(this.frame);
-	}
-
-	getType() {
-		return 'FlowWaitResponse';
-	}
-
-	getTitle() {
-		return "Wait Response <br><br><div style='border-bottom: 1px solid #ebedf3;'></div>";
-	}
-
-	getDetailScript() {
-		return (
-			`{
-						"next" : "` +
-			this.getPointTargetId(0) +
-			`",
-						"variable" : "` +
-			this.variable +
-			`",
-						"duration" : ` +
-			this.duration +
-			`
-					}`
-		);
-	}
-
-	loadDetailData(data) {
-		this.outPointList[0].targetId = data['next'];
-
-		this.setVariable(data['variable']);
-		this.setDuration(data['duration']);
-	}
-
-	getVariable() {
-		return this.variable;
-	}
-
-	setVariable(variable) {
-		this.variable = variable;
-		this.lblTo.innerHTML =
-			'<b>Var: </b>' + this.makeHTMLText(this.variable);
-	}
-
-	getDuration() {
-		return this.duration;
-	}
-
-	setDuration(duration) {
-		this.duration = duration;
-		this.lblDur.innerHTML =
-			'<b>Dur: </b>' + this.makeHTMLText(this.duration) + ' Minutes';
-	}
-}
-
-class FlowValidation extends FlowBaseComponent {
-	constructor(fb, x, y) {
-		super(fb, x, y);
-
-		this.to = 'Validation';
-		this.pattern = 'PhoneNo';
-		this.variable = 'response';
-		this.customPattern = '';
-
-		this.lblTo = document.createElement('DIV');
-		this.lblTo.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 10px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.lblTo.innerHTML =
-			'<b>Var : </b>' + this.makeHTMLText(this.variable);
-		this.frame.appendChild(this.lblTo);
-
-		this.lblPattern = document.createElement('DIV');
-		this.lblPattern.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 10px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.lblPattern.innerHTML =
-			'<b>Ptrn : </b>' + this.makeHTMLText(this.pattern);
-		this.frame.appendChild(this.lblPattern);
-
-		this.lblButtons = document.createElement('DIV');
-		this.lblButtons.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 20px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.frame.appendChild(this.lblButtons);
-
-		this.btnValid = document.createElement('DIV');
-		this.btnValid.style = `
-								position: relative;
-								width: 100%;
-								padding: 8px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-								background: #6B6FAC;
-								border-radius: 4px; 
-								box-shadow: 0px 1px 2px #AAAAAA;
-								width: calc(100% - -16px);
-								margin-bottom: 5px;
-								color: #FFFFFF;
-			`;
-
-		this.btnValid.innerHTML = this.makeHTMLText('Valid');
-		this.lblButtons.appendChild(this.btnValid);
-
-		this.addOutPoint(this.btnValid);
-
-		this.btnInvalid = document.createElement('DIV');
-		this.btnInvalid.style = `
-								position: relative;
-								width: 100%;
-								padding: 8px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-								background: #D63A7B;
-								border-radius: 4px; 
-								box-shadow: 0px 1px 2px #AAAAAA;
-								width: calc(100% - -16px);
-								margin-bottom: 5px;
-								color: #FFFFFF;
-			`;
-
-		this.btnInvalid.innerHTML = this.makeHTMLText('Invalid');
-		this.lblButtons.appendChild(this.btnInvalid);
-
-		this.addOutPoint(this.btnInvalid);
-	}
-
-	getType() {
-		return 'FlowValidation';
-	}
-
-	getTitle() {
-		return "Validation <br><br><div style='border-bottom: 1px solid #ebedf3;'></div>";
-	}
-
-	getDetailScript() {
-		return (
-			`{
-						"validNext" : "` +
-			this.getPointTargetId(0) +
-			`",
-						"invalidNext" : "` +
-			this.getPointTargetId(1) +
-			`",
-						"variable" : "` +
-			this.variable +
-			`",
-						"pattern" : "` +
-			this.pattern +
-			`",
-						"customPattern" : "` +
-			this.customPattern +
-			`"
-					}`
-		);
-	}
-
-	loadDetailData(data) {
-		this.outPointList[0].targetId = data['validNext'];
-		this.outPointList[1].targetId = data['invalidNext'];
-
-		this.setVariable(data['variable']);
-		this.setPattern(data['pattern']);
-		this.setCustomPattern(data['customPattern']);
-	}
-
-	getVariable() {
-		return this.variable;
-	}
-
-	setVariable(variable) {
-		this.variable = variable;
-		this.lblTo.innerHTML =
-			'<b>Var : </b>' + this.makeHTMLText(this.variable);
-	}
-
-	getPattern() {
-		return this.pattern;
-	}
-
-	setPattern(pattern) {
-		this.pattern = pattern;
-
-		var html = '<b>Ptrn : </b>' + this.makeHTMLText(this.pattern);
-
-		if (this.pattern == 'Custom') {
-			html += ' (' + this.customPattern + ')';
-		}
-
-		this.lblPattern.innerHTML = html;
-	}
-
-	getCustomPattern() {
-		return this.pattern;
-	}
-
-	setCustomPattern(pattern) {
-		this.customPattern = pattern;
-		this.setPattern(this.pattern);
-	}
-}
-
-class FlowSendTemplate extends FlowBaseComponent {
-	constructor(fb, x, y) {
-		super(fb, x, y);
-
-		this.to = 'Customer';
-		this.templateName = '';
-		this.parameters = [];
-
-		this.lblTo = document.createElement('DIV');
-		this.lblTo.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 10px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		// this.lblTo.innerHTML = "<b>To : </b>" + this.makeHTMLText(this.to);
-		this.frame.appendChild(this.lblTo);
-
-		this.lblTemplateName = document.createElement('DIV');
-		this.lblTemplateName.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 20px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-								overflow-wrap: break-word;
-			`;
-
-		this.lblTemplateName.innerHTML =
-			'<b>Template : </b>' + this.makeHTMLText(this.templateName);
-		this.frame.appendChild(this.lblTemplateName);
-
-		this.lblParams = document.createElement('DIV');
-		this.lblParams.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 20px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.frame.appendChild(this.lblParams);
-
-		this.setParameters(this.parameters);
-
-		var point = this.addOutPoint(this.frame);
-		point.frame.style.top = '65px';
-	}
-
-	getType() {
-		return 'FlowSendTemplate';
-	}
-
-	getTitle() {
-		return "Send Whatsapp Template <br><br><div style='border-bottom: 1px solid #ebedf3;'></div>";
-	}
-
-	getDetailScript() {
-		var paramString = '';
-
-		for (var i in this.parameters) {
-			var idx = parseInt(i);
-
-			paramString += `,"` + this.escapeStr(this.parameters[i]) + `"`;
-		}
-
-		if (paramString != '') {
-			paramString = paramString.substr(1);
-		}
-
-		return (
-			`{
-						"next" : "` +
-			this.getPointTargetId(0) +
-			`",
-						"to" : "` +
-			this.to +
-			`",
-						"templateName" : "` +
-			this.escapeStr(this.templateName) +
-			`",
-						"parameters" : [` +
-			paramString +
-			`]
-			}`
-		);
-	}
-
-	loadDetailData(data) {
-		var parameters = [];
-
-		for (var i in data['parameters']) {
-			parameters.push(data['parameters'][parseInt(i)]);
-		}
-
-		this.setParameters(parameters);
-
-		this.setTo(data['to']);
-		this.setTemplateName(data['templateName']);
-		this.outPointList[0].targetId = data['next'];
-	}
-
-	getTemplateName() {
-		return this.templateName;
-	}
-
-	setTemplateName(templateName) {
-		this.templateName = templateName;
-		this.lblTemplateName.innerHTML =
-			'<b>Template : </b>' + this.makeHTMLText(this.templateName);
-	}
-
-	getTo() {
-		return this.to;
-	}
-
-	setTo(to) {
-		this.to = to;
-		// this.lblTo.innerHTML = "<b>To : </b>" + this.makeHTMLText(this.to);
-	}
-
-	getParameters() {
-		return this.parameters;
-	}
-
-	setParameters(parameters) {
-		this.parameters = parameters;
-		this.lblParams.innerHTML = '';
-
-		var no = 1;
-
-		for (var i in this.parameters) {
-			var btn = document.createElement('DIV');
-			btn.style = `
-									position: relative;
-									width: 100%;
-									padding: 8px;
-									font-family: Helvetica, Arial, Sans-Serif;
-									font-size: 13px;
-									user-select: none; 
-									background: #6B6FAC;
-									border-radius: 4px; 
-									box-shadow: 0px 1px 2px #AAAAAA;
-									width: calc(100% - -16px);
-									margin-bottom: 5px;
-									color: #FFFFFF;
-				`;
-
-			btn.innerHTML =
-				'Param ' + no + ' : ' + this.makeHTMLText(this.parameters[i]);
-			this.lblParams.appendChild(btn);
-
-			no++;
-		}
-	}
-}
-
-class FlowSendButton extends FlowBaseComponent {
-	constructor(fb, x, y) {
-		super(fb, x, y);
-
-		this.to = 'Customer';
-		this.msg = 'Hello!';
-		this.variable = 'response';
-		this.buttons = [];
-
-		this.lblTo = document.createElement('DIV');
-		this.lblTo.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 10px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.lblTo.innerHTML = '<b>To : </b>' + this.makeHTMLText(this.to);
-		this.frame.appendChild(this.lblTo);
-
-		this.lblVariable = document.createElement('DIV');
-		this.lblVariable.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 10px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.lblVariable.innerHTML =
-			'<b>Var : </b>' + this.makeHTMLText(this.variable);
-		this.frame.appendChild(this.lblVariable);
-
-		this.lblMsg = document.createElement('DIV');
-		this.lblMsg.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 20px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-								overflow-wrap: break-word;
-			`;
-
-		this.lblMsg.innerHTML = this.makeHTMLText(this.msg);
-		this.frame.appendChild(this.lblMsg);
-
-		this.lblButtons = document.createElement('DIV');
-		this.lblButtons.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 20px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.frame.appendChild(this.lblButtons);
-
-		this.setButtons(['Opt 1']);
-	}
-
-	getType() {
-		return 'FlowSendButton';
-	}
-
-	getTitle() {
-		return "Send whatsapp Button <br><br><div style='border-bottom: 1px solid #ebedf3;'></div>";
-	}
-
-	getDetailScript() {
-		var btnString = '';
-
-		for (var i in this.buttons) {
-			var idx = parseInt(i);
-
-			btnString +=
-				`,{
-								"title" : "` +
-				this.buttons[i] +
-				`",
-								"next" : "` +
-				this.getPointTargetId(idx) +
-				`"
-							}`;
-		}
-
-		if (btnString != '') {
-			btnString = btnString.substr(1);
-		}
-
-		return (
-			`{
-						"to" : "` +
-			this.to +
-			`",
-						  "variable" : "` +
-			this.variable +
-			`",
-						"msg" : "` +
-			this.escapeStr(this.msg) +
-			`",
-						"buttons" : [
-							` +
-			btnString +
-			`
-						],
-						"defaultNext" : "` +
-			this.getPointTargetId(this.buttons.length) +
-			`"
-					}`
-		);
-	}
-
-	loadDetailData(data) {
-		var buttons = [];
-
-		for (var i in data['buttons']) {
-			buttons.push(data['buttons'][parseInt(i)]['title']);
-		}
-
-		this.setButtons(buttons);
-
-		for (var i in data['buttons']) {
-			this.outPointList[parseInt(i)].targetId =
-				data['buttons'][parseInt(i)]['next'];
-		}
-
-		this.setTo(data['to']);
-		this.setMsg(data['msg']);
-		this.setVariable(data['variable']);
-
-		this.outPointList[this.buttons.length].targetId = data['defaultNext'];
-	}
-
-	getVariable() {
-		return this.variable;
-	}
-
-	setVariable(variable) {
-		this.variable = variable;
-		this.lblVariable.innerHTML =
-			'<b>Var : </b>' + this.makeHTMLText(this.variable);
-	}
-
-	getTo() {
-		return this.to;
-	}
-
-	setTo(to) {
-		this.to = to;
-		this.lblTo.innerHTML = '<b>To : </b>' + this.makeHTMLText(this.to);
-	}
-
-	getMsg() {
-		return this.msg;
-	}
-
-	setMsg(msg) {
-		this.msg = msg;
-		this.lblMsg.innerHTML = this.makeHTMLText(this.msg);
-	}
-
-	getButtons() {
-		return this.buttons;
-	}
-
-	setButtons(buttons) {
-		this.buttons = buttons;
-
-		this.lblButtons.innerHTML = '';
-
-		var defaultNext = undefined;
-
-		var oldNext = [];
-
-		if (this.outPointList.length > 0) {
-			for (var i = 0; i < this.outPointList.length - 1; i++) {
-				oldNext.push(this.outPointList[i].targetId);
-			}
-
-			defaultNext =
-				this.outPointList[this.outPointList.length - 1].targetId;
-		}
-
-		this.outPointList = [];
-
-		for (var i in this.buttons) {
-			var btn = document.createElement('DIV');
-			btn.style = `
-									position: relative;
-									width: 100%;
-									padding: 8px;
-									font-family: Helvetica, Arial, Sans-Serif;
-									font-size: 13px;
-									user-select: none; 
-									background: #6B6FAC;
-									border-radius: 4px; 
-									box-shadow: 0px 1px 2px #AAAAAA;
-									width: calc(100% - -16px);
-									margin-bottom: 5px;
-									color: #FFFFFF;
-				`;
-
-			btn.innerHTML = this.makeHTMLText(this.buttons[i]);
-			this.lblButtons.appendChild(btn);
-
-			this.addOutPoint(btn);
-
-			if (i < oldNext.length) {
-				this.outPointList[i].targetId = oldNext[i];
-			}
-		}
-
-		var btn = document.createElement('DIV');
-		btn.style = `
-								position: relative;
-								width: 100%;
-								padding: 8px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-								background: #D63A7B;
-								border-radius: 4px; 
-								box-shadow: 0px 1px 2px #AAAAAA;
-								width: calc(100% - -16px);
-								margin-bottom: 5px;
-								color: #FFFFFF;
-			`;
-
-		btn.innerHTML = this.makeHTMLText('Default');
-		this.lblButtons.appendChild(btn);
-
-		this.addOutPoint(btn);
-
-		this.outPointList[this.outPointList.length - 1].targetId = defaultNext;
-
-		this.updateLink(undefined);
-	}
-}
-
-class FlowSendList extends FlowBaseComponent {
-	constructor(fb, x, y) {
-		super(fb, x, y);
-
-		this.to = 'Customer';
-		this.msg = '';
-		this.variable = 'response';
-		this.sectionTitle = '';
-		this.listMsg = '';
-		this.listTitle = '';
-		this.list = [];
-		this.desc = [];
-
-		this.lblTo = document.createElement('DIV');
-		this.lblTo.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 10px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.lblTo.innerHTML = '<b>To : </b>' + this.makeHTMLText(this.to);
-		this.frame.appendChild(this.lblTo);
-
-		this.lblVariable = document.createElement('DIV');
-		this.lblVariable.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 10px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.lblVariable.innerHTML =
-			'<b>Var: </b>' + this.makeHTMLText(this.variable);
-		this.frame.appendChild(this.lblVariable);
-
-		this.lblMsg = document.createElement('DIV');
-		this.lblMsg.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 20px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-								overflow-wrap: break-word;
-			`;
-
-		this.lblMsg.innerHTML = this.makeHTMLText(this.msg);
-		this.frame.appendChild(this.lblMsg);
-
-		this.lblTitle = document.createElement('DIV');
-		this.lblTitle.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 10px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.lblTitle.innerHTML =
-			'<b>List Title : </b>' + this.makeHTMLText(this.listTitle);
-		this.frame.appendChild(this.lblTitle);
-
-		this.lblButtons = document.createElement('DIV');
-		this.lblButtons.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 20px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.frame.appendChild(this.lblButtons);
-
-		this.setList([]);
-	}
-
-	getType() {
-		return 'FlowSendList';
-	}
-
-	getTitle() {
-		return "Send Whatsapp List <br><br><div style='border-bottom: 1px solid #ebedf3;'></div>";
-	}
-
-	getDetailScript() {
-		var btnString = '';
-
-		for (var i in this.list) {
-			var idx = parseInt(i);
-			const handleDesc =
-				this.desc?.[i] || this.desc[i] !== '' ? this.desc[i] : '';
-			btnString +=
-				`,{
-								"title" : "` +
-				this.list[i] +
-				`",
-		  						"description" : "` +
-				handleDesc +
-				`",
-								"next" : "` +
-				this.getPointTargetId(idx) +
-				`"
-							}`;
-		}
-
-		if (btnString != '') {
-			btnString = btnString.substr(1);
-		}
-
-		return (
-			`{
-						"to" : "` +
-			this.to +
-			`",
-						  "sectionTitle" : "` +
-			this.sectionTitle +
-			`",
-		"msg" : "` +
-			this.escapeStr(this.msg) +
-			`",
-							"variable" : "` +
-			this.variable +
-			`",
-				  
-							
-	 
-						"listTitle" : "` +
-			this.listTitle +
-			`",
-						"list" : [
-							` +
-			btnString +
-			`
-						],
-						"defaultNext" : "` +
-			this.getPointTargetId(this.list.length) +
-			`"
-					}`
-		);
-	}
-
-	loadDetailData(data) {
-		var buttons = [];
-		let description = [];
-		for (var i in data['list']) {
-			buttons.push(data['list'][parseInt(i)]['title']);
-			description.push(data['list'][i]['description']);
-		}
-		this.setList(buttons);
-
-		for (var i in data['list']) {
-			this.outPointList[parseInt(i)].targetId =
-				data['list'][parseInt(i)]['next'];
-		}
-
-		this.setTo(data['to']);
-		this.setMsg(data['msg']);
-		this.setVariable(data['variable']);
-		this.setSectionTitles(data['sectionTitle']);
-		this.setListTitle(data['listTitle']);
-		this.setDesc(description);
-
-		this.outPointList[this.list.length].targetId = data['defaultNext'];
-	}
-
-	getTo() {
-		return this.to;
-	}
-
-	setTo(to) {
-		console.log('resultz', to);
-		this.to = to;
-		this.lblTo.innerHTML = '<b>To : </b>' + this.makeHTMLText(this.to);
-	}
-
-	getSectionTitle() {
-		return this.sectionTitle;
-	}
-	setSectionTitles(sectionTitle) {
-		this.sectionTitle = sectionTitle;
-		this.lblVariable.innerHTML =
-			'<b>Section Titles: : </b>' + this.makeHTMLText(this.sectionTitle);
-	}
-	getVariable() {
-		return this.variable;
-	}
-
-	setVariable(variable) {
-		this.variable = variable;
-		this.lblVariable.innerHTML =
-			'<b>Var : </b>' + this.makeHTMLText(this.variable);
-	}
-
-	getMsg() {
-		return this.msg;
-	}
-
-	setMsg(msg) {
-		console.log('ini msg', msg);
-		this.msg = msg;
-		this.lblMsg.innerHTML = this.makeHTMLText(this.msg);
-	}
-
-	getListTitle() {
-		return this.listTitle;
-	}
-
-	setListTitle(listTitle) {
-		this.listTitle = listTitle;
-		this.lblTitle.innerHTML =
-			'<b>List Title : </b>' + this.makeHTMLText(this.listTitle);
-	}
-
-	getList() {
-		return this.list;
-	}
-	setDesc(desc) {
-		this.desc = desc;
-	}
-	getDesc() {
-		return this.desc;
-	}
-	setList(list) {
-		this.list = list;
-
-		this.lblButtons.innerHTML = '';
-
-		var defaultNext = undefined;
-
-		var oldNext = [];
-
-		if (this.outPointList.length > 0) {
-			for (var i = 0; i < this.outPointList.length - 1; i++) {
-				oldNext.push(this.outPointList[i].targetId);
-			}
-
-			defaultNext =
-				this.outPointList[this.outPointList.length - 1].targetId;
-		}
-
-		this.outPointList = [];
-
-		for (var i in this.list) {
-			var btn = document.createElement('DIV');
-			btn.style = `
-									position: relative;
-									width: 100%;
-									padding: 8px;
-									font-family: Helvetica, Arial, Sans-Serif;
-									font-size: 13px;
-									user-select: none; 
-									background: #6B6FAC;
-									border-radius: 4px; 
-									box-shadow: 0px 1px 2px #AAAAAA;
-									width: calc(100% - -16px);
-									margin-bottom: 5px;
-									color: #FFFFFF;
-				`;
-
-			btn.innerHTML = this.makeHTMLText(this.list[i]);
-			this.lblButtons.appendChild(btn);
-
-			this.addOutPoint(btn);
-
-			if (i < oldNext.length) {
-				this.outPointList[i].targetId = oldNext[i];
-			}
-		}
-
-		var btn = document.createElement('DIV');
-		btn.style = `
-								position: relative;
-								width: 100%;
-								padding: 8px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-								background: #D63A7B;
-								border-radius: 4px; 
-								box-shadow: 0px 1px 2px #AAAAAA;
-								width: calc(100% - -16px);
-								margin-bottom: 5px;
-								color: #FFFFFF;
-			`;
-
-		btn.innerHTML = this.makeHTMLText('Default');
-		this.lblButtons.appendChild(btn);
-
-		this.addOutPoint(btn);
-
-		this.outPointList[this.outPointList.length - 1].targetId = defaultNext;
-
-		this.updateLink(undefined);
-	}
-}
-
-class FlowAssignVar extends FlowBaseComponent {
-	constructor(fb, x, y) {
-		super(fb, x, y);
-
-		// this.frame.style = `position: absolute;
-		// 				width: 280px;
-		// 				background: #FFFFFF;
-		// 				border-radius: 5px;
-		// 				padding: 10px;
-		// 				box-shadow: 9px 9px 14px rgba(44, 59, 113, 0.04);
-		// 				border-radius: 8px;
-		// `;
-
-		this.listAssignVar = [];
-		this.listAssignVar2 = [];
-
-		this.lblAssignVar = document.createElement('DIV');
-		this.lblAssignVar.style = `
-									position: relative;
-									width: 100%;
-									padding-right: 10px;
-									margin-top: 10px;
-									font-family: Helvetica, Arial, Sans-Serif;
-									font-size: 13px;
-									user-select: none; 
-				`;
-
-		this.frame.appendChild(this.lblAssignVar);
-		this.addOutPoint(this.frame);
-	}
-
-	getType() {
-		return 'FlowAssignVar';
-	}
-
-	getDetailScript() {
-		return (
-			`{
-							"next" : "` +
-			this.getPointTargetId(0) +
-			`",
-							"listAssignVar" : ` +
-			JSON.stringify(this.listAssignVar2) +
-			`
-						}`
-		);
-	}
-
-	loadDetailData(data) {
-		this.outPointList[0].targetId = data['next'];
-
-		this.setListAssignVar(data['listAssignVar']);
-	}
-
-	getTitle() {
-		return "Assign Variable <br><br><div style='border-bottom: 1px solid #ebedf3;'></div>";
-	}
-
-	getListAssignVar() {
-		return this.listAssignVar2;
-	}
-
-	setListAssignVar(listData) {
-		console.log('list data', listData);
-		// const updateListData = listData.map((d) => {
-		// 	return {var: d.var, value: `"${d.value}"`}
-		// })
-		let result = '';
-
-		// this.listAssignVar = updateListData;
-		this.listAssignVar2 = listData;
-		for (let x in listData) {
-			result = `${result} <b>${listData[x].var} : </b> ${listData[x].value} </br>`;
-		}
-		this.lblAssignVar.innerHTML = result;
-	}
-}
-
-class FlowBranch extends FlowBaseComponent {
-	constructor(fb, x, y) {
-		super(fb, x, y);
-
-		this.buttons = [];
-
-		this.lblButtons = document.createElement('DIV');
-		this.lblButtons.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 20px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.frame.appendChild(this.lblButtons);
-
-		this.setConditions(['response == "Yes"']);
-	}
-
-	getType() {
-		return 'FlowBranch';
-	}
-
-	getTitle() {
-		return 'Branch';
-	}
-
-	getDetailScript() {
-		var btnString = '';
-
-		for (var i in this.buttons) {
-			var idx = parseInt(i);
-
-			btnString +=
-				`,{
-								"condition" : "` +
-				this.escapeStr(this.buttons[i]) +
-				`",
-								"next" : "` +
-				this.getPointTargetId(idx) +
-				`"
-							}`;
-		}
-
-		if (btnString != '') {
-			btnString = btnString.substr(1);
-		}
-
-		return (
-			`{
-						"conditions" : [
-							` +
-			btnString +
-			`
-						],
-						"defaultNext" : "` +
-			this.getPointTargetId(this.buttons.length) +
-			`"
-					}`
-		);
-	}
-
-	loadDetailData(data) {
-		var buttons = [];
-
-		for (var i in data['conditions']) {
-			buttons.push(data['conditions'][parseInt(i)]['condition']);
-		}
-
-		this.setConditions(buttons);
-
-		for (var i in data['conditions']) {
-			this.outPointList[parseInt(i)].targetId =
-				data['conditions'][parseInt(i)]['next'];
-		}
-
-		this.outPointList[this.buttons.length].targetId = data['defaultNext'];
-	}
-
-	getConditions() {
-		return this.buttons;
-	}
-
-	setConditions(buttons) {
-		this.buttons = buttons;
-
-		this.lblButtons.innerHTML = '';
-
-		var defaultNext = undefined;
-
-		var oldNext = [];
-
-		if (this.outPointList.length > 0) {
-			for (var i = 0; i < this.outPointList.length - 1; i++) {
-				oldNext.push(this.outPointList[i].targetId);
-			}
-
-			defaultNext =
-				this.outPointList[this.outPointList.length - 1].targetId;
-		}
-
-		this.outPointList = [];
-
-		for (var i in this.buttons) {
-			var btn = document.createElement('DIV');
-			btn.style = `
-									position: relative;
-									width: 100%;
-									padding: 8px;
-									font-family: Helvetica, Arial, Sans-Serif;
-									font-size: 13px;
-									user-select: none; 
-									background: #6B6FAC;
-									border-radius: 4px; 
-									box-shadow: 0px 1px 2px #AAAAAA;
-									width: calc(100% - -16px);
-									margin-bottom: 5px;
-									color: #FFFFFF;
-				`;
-
-			btn.innerHTML = this.makeHTMLText(this.buttons[i]);
-			this.lblButtons.appendChild(btn);
-
-			this.addOutPoint(btn);
-
-			if (i < oldNext.length) {
-				this.outPointList[i].targetId = oldNext[i];
-			}
-		}
-
-		var btn = document.createElement('DIV');
-		btn.style = `
-								position: relative;
-								width: 100%;
-								padding: 8px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-								background: #D63A7B;
-								border-radius: 4px; 
-								box-shadow: 0px 1px 2px #AAAAAA;
-								width: calc(100% - -16px);
-								margin-bottom: 5px;
-								color: #FFFFFF;
-			`;
-
-		btn.innerHTML = this.makeHTMLText('Default');
-		this.lblButtons.appendChild(btn);
-
-		this.addOutPoint(btn);
-
-		this.outPointList[this.outPointList.length - 1].targetId = defaultNext;
-
-		this.updateLink(undefined);
-	}
-}
-
-class FlowSendEmail extends FlowBaseComponent {
-	constructor(fb, x, y) {
-		super(fb, x, y);
-
-		this.from = 'you@domain.com';
-		this.to = 'customer@domain.com';
-		this.cc = '';
-		this.subject = 'Hello';
-		this.body = 'This is email body';
-
-		this.smtpServer = 'smtp.domain.com';
-		this.smtpPort = 'smtp.domain.com';
-		this.smtpUser = 'user';
-		this.smtpPass = 'pass';
-
-		this.lblFrom = document.createElement('DIV');
-		this.lblFrom.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 10px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.lblFrom.innerHTML =
-			'<b>From : </b>' + this.makeHTMLText(this.from);
-		this.frame.appendChild(this.lblFrom);
-
-		this.lblTo = document.createElement('DIV');
-		this.lblTo.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 10px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.lblTo.innerHTML = '<b>To : </b>' + this.makeHTMLText(this.to);
-		this.frame.appendChild(this.lblTo);
-
-		this.lblSubject = document.createElement('DIV');
-		this.lblSubject.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 20px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.lblSubject.innerHTML =
-			'<b>Subject : </b>' + this.makeHTMLText(this.subject);
-		this.frame.appendChild(this.lblSubject);
-
-		this.addOutPoint(this.frame);
-	}
-
-	getType() {
-		return 'FlowSendEmail';
-	}
-
-	getDetailScript() {
-		return (
-			`{
-						"next" : "` +
-			this.getPointTargetId(0) +
-			`",
-						"to" : "` +
-			this.escapeStr(this.to) +
-			`",
-			  "from" : "` +
-			this.escapeStr(this.from) +
-			`",
-			  "cc" : "` +
-			this.escapeStr(this.cc) +
-			`",
-			  "subject" : "` +
-			this.escapeStr(this.subject) +
-			`",
-						"body" : "` +
-			this.escapeStr(this.body) +
-			`",
-			  "smtpServer" : "` +
-			this.escapeStr(this.smtpServer) +
-			`",
-			  "smtpPort" : "` +
-			this.escapeStr(this.smtpPort) +
-			`",
-			  "smtpUser" : "` +
-			this.escapeStr(this.smtpUser) +
-			`",
-			  "smtpPass" : "` +
-			this.escapeStr(this.smtpPass) +
-			`"
-					}`
-		);
-	}
-
-	loadDetailData(data) {
-		this.outPointList[0].targetId = data['next'];
-
-		this.setTo(data['to']);
-		this.setFrom(data['from']);
-		this.setSubject(data['subject']);
-		this.setCC(data['cc']);
-		this.setBody(data['body']);
-		this.setSmtpServer(data['smtpServer']);
-		this.setSmtpPort(data['smtpPort']);
-		this.setSmtpUser(data['smtpUser']);
-		this.setSmtpPass(data['smtpPass']);
-	}
-
-	getTitle() {
-		return "Send Email <br><br><div style='border-bottom: 1px solid #ebedf3;'></div>";
-	}
-
-	getTo() {
-		return this.to;
-	}
-
-	setTo(to) {
-		this.to = to;
-		this.lblTo.innerHTML = '<b>To : </b>' + this.makeHTMLText(this.to);
-	}
-
-	getFrom() {
-		return this.from;
-	}
-
-	setFrom(from) {
-		this.from = from;
-		this.lblFrom.innerHTML =
-			'<b>From : </b>' + this.makeHTMLText(this.from);
-	}
-
-	getSubject() {
-		return this.subject;
-	}
-
-	setSubject(subject) {
-		this.subject = subject;
-		this.lblSubject.innerHTML =
-			'<b>Subject : </b>' + this.makeHTMLText(this.subject);
-	}
-
-	getCC() {
-		return this.cc;
-	}
-
-	setCC(cc) {
-		this.cc = cc;
-	}
-
-	getBody() {
-		return this.body;
-	}
-
-	setBody(body) {
-		this.body = body;
-	}
-
-	getSmtpServer() {
-		return this.smtpServer;
-	}
-
-	setSmtpServer(smtpServer) {
-		this.smtpServer = smtpServer;
-	}
-
-	getSmtpPort() {
-		return this.smtpPort;
-	}
-
-	setSmtpPort(smtpPort) {
-		this.smtpPort = smtpPort;
-	}
-
-	getSmtpUser() {
-		return this.smtpUser;
-	}
-
-	setSmtpUser(smtpUser) {
-		this.smtpUser = smtpUser;
-	}
-
-	getSmtpPass() {
-		return this.smtpPass;
-	}
-
-	setSmtpPass(smtpPass) {
-		this.smtpPass = smtpPass;
-	}
-}
-class FlowSendLocation extends FlowBaseComponent {
-	constructor(fb, x, y) {
-		super(fb, x, y);
-
-		this.longitude = '-';
-		this.latitude = '-';
-		this.name = '-';
-		this.address = '-';
-
-		this.lblLocLong = document.createElement('DIV');
-		this.lblLocLong.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 10px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.lblLocLong.innerHTML =
-			'<b>Longitude : </b>' + this.makeHTMLText(this.longitude);
-		this.frame.appendChild(this.lblLocLong);
-
-		this.lblLocLat = document.createElement('DIV');
-		this.lblLocLat.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 10px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.lblLocLat.innerHTML =
-			'<b>Latitude : </b>' + this.makeHTMLText(this.latitude);
-		this.frame.appendChild(this.lblLocLat);
-
-		this.lblLocName = document.createElement('DIV');
-		this.lblLocName.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 10px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.lblLocName.innerHTML =
-			'<b>Name : </b>' + this.makeHTMLText(this.name);
-		this.frame.appendChild(this.lblLocName);
-
-		this.lblLocAdd = document.createElement('DIV');
-		this.lblLocAdd.style = `
-								position: relative;
-								width: 100%;
-								padding-right: 10px;
-								margin-top: 10px;
-								font-family: Helvetica, Arial, Sans-Serif;
-								font-size: 13px;
-								user-select: none; 
-			`;
-
-		this.lblLocAdd.innerHTML =
-			'<b>Address : </b>' + this.makeHTMLText(this.address);
-		this.frame.appendChild(this.lblLocAdd);
-		this.addOutPoint(this.frame);
-	}
-
-	getType() {
-		return 'FlowSendLocation';
-	}
-
-	getDetailScript() {
-		return (
-			`{
-						  "next" : "` +
-			this.getPointTargetId(0) +
-			`",
-						  "longitute" : "` +
-			this.longitude +
-			`",
-		  				   "latitude" : "` +
-			this.latitude +
-			`",
-		  					"name" : "` +
-			this.name +
-			`",
-		  					"address" : "` +
-			this.address +
-			`"
-					  }`
-		);
-	}
-
-	loadDetailData(data) {
-		this.outPointList[0].targetId = data['next'];
-		this.setLocLong(data['longitute']);
-		this.setLocLat(data['latitude']);
-		this.setLocName(data['name']);
-		this.setLocAddress(data['address']);
-	}
-
-	getTitle() {
-		return "Send Location <br><br><div style='border-bottom: 1px solid #ebedf3;'></div>";
-	}
-
-	getLocLong() {
-		return this.longitude;
-	}
-
-	setLocLong(long) {
-		this.longitude = long;
-		this.lblLocLong.innerHTML =
-			'<b>Longitude : </b>' + this.makeHTMLText(this.longitude);
-	}
-	getLocLat() {
-		return this.latitude;
-	}
-
-	setLocLat(lat) {
-		this.latitude = lat;
-		this.lblLocLat.innerHTML =
-			'<b>Latitude : </b>' + this.makeHTMLText(this.latitude);
-	}
-	getLocName() {
-		return this.name;
-	}
-
-	setLocName(name) {
-		this.name = name;
-		this.lblLocName.innerHTML =
-			'<b>Name : </b>' + this.makeHTMLText(this.name);
-	}
-	getLocAdress() {
-		return this.address;
-	}
-
-	setLocAddress(address) {
-		this.address = address;
-		this.lblLocAdd.innerHTML =
-			'<b>Address : </b>' + this.makeHTMLText(this.address);
-	}
-}
-
-var flowAsset = new Map();
-
-flowAsset['close'] =
-	'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAHvMAAB7zAWerpoQAAAdKSURBVFhHxZhJaFZXFMefmb/Mg+mQRUrbmEUh2FpsqZE4VNLSFIpQShGVFtx1E4NKNtKFoMUEXJRSBAticNXSRRfGilCwA8UsaqUSUxLrGC1oImYeX3//m3efb8xgC/3D+e587v+ec+7wvVXOk8OOjaYWbkq6IqyUYJBMViC1edsuMpJ5T2x+xWStwqVgJ5dkByRHkpWVpTRr1apVIuq4rmuIgVlSK3MBsQtYkuhyCKqPJraEciGUn52dXUBaQJpPXQYyqyFWSH6WuoeQHaE8PTc3N0XbJOkk6RTtM+qDiGjQqolYjKC1mMjlMGF+Tk6OCBVBrHRmZqaRSd+ExFqkVn0QH/QfQnrp+2t+fv55qu7SfwQZm52dnWSMyIqoJZlINI2gJSer5UIqk5ubW8xkVVNTUx9iiZ1M8Kw6LhMz6DgP0ZPo6IPgQxY4CtkJtSFBt4cgAlEEyeVDrCgvL68CZU2Q+wJyLdSXICtBNgtaA6n3GJ8pKCgYgKixHGWRSnV1EkEbb5acrLaHVR+mrkod/gWyIfQKRNdhzd8hKTfPUWc2FRKzYtTF1nJ5cqnITU5OtmG9PaY1AiZwNm7c6GzatMmpr693ysrKnOnpaefWrVtOT0+Pc/bsWWdoaMjrHQbxeb2oqKgVy/7JmAdyOdXTiHV3DJacNkJVYWHhGtIOynZVvkDcbW1tdW/cuIH+dLA499SpU25dXV1Mh0TxWFpa2uzNJe8UIOIQNZyBXJuHlBIjz0HiI/IK4JDShoYG98qVKx6F5WFiYsLdu3evi9VCuiQQ68byb2hOyqWIOJjzNAhrvUKOkqdZ0TqUXaMcUrZlyxb30aNH3rQrx/HjxxNJZjKZdty9VnNT1lkas6IKYl7GSl5gVUfJh5TIciJ3//59d9euXe6GDRvckydPelMno7+/392+fbtLjLrd3d2m7siRIyG9Elx9rby8fIvmplyGiEuIoEyagdhTWO9lVjlI2VegmLNu3b17d0h5R0eHqY/i6tWrbk1Njd8PK5nF6VjZtm1bSIcEcp/KiuJAOYP4bhZT3QLF7Nxa5BPyocHaEBayXLQ9SjJKzsrly5dNuxaL1UJtEPuFWNwoDpSLEXEyVtRPLlLO2VTPwG/J+wOlKLhb5dZguxVLMo1cY2Ojy3Fl+ggtLS3RPpO4+V1xIF+OiJMhKFPqwl+Nextw7wB5f2BTU5On8jFEJtjHyv79+xPJrV+/3h0eHvZGL+D06dOxfsx/QBzIr0bEybjZxB+WeobG18iHjpaDBw96KsNIIxmVJHLC7du3Y32x3pfE4aviQtmPQ3O8EAM1BOo75EODurq6PJVxLEUyjZwFZEL92YxfFxcXvy4ulM1xY3eKfJ3FGFWGoOsrDfv27XNwq1cKo7a21jl37pxDXHk1cUR1M38BISaDiZcff0HofRaC7tY09PX1OcSSVwrj5s2bzokTJ7xSMhJ06x4OwRKUiecx7cOF4mPo4k+CyG3dutUZHNSRmQxZt7Oz0yuFMT4+7jx48MArLYDY0zUVe2mLpNkkClBMrFF+XOzYsUPhEkLaUYJbY3WS6DkpXLhwIdaPTfpZ0ibRj3/M0PgTeX9QZWWleZVYXLx40a2urg4pltgNkbZx2tvbPQ0LaGtri/UhXj9OOmZCBzUXtnwSGqgnk0Vzc3OoTRLdrWkkBwYGTPvo6GhskRjmOsZ4O+mg1o9/1WHit8krev3Bes/pySTo4g+2pR0lSSR7e3tN26FDh2JtEOtKu+oEE4e6qCGoC/sM5ZACvecEvUp08atO19di59yxY8d0x5q+NpYvXbqkh0FIN3E/XlFRsdObO/ZYEMTUf24RBx+Q1/+FoBLznhP0KtHFH7xb03Dnzh3fchw9iRsJ631D/G1e7Lmlgv9g1UpIv6IcUiSSes/pybRSyHJJ5Ii9u1VVVe97c6Y+WAWZVMzNk5//Co0M/o1yTKnec8t99mtDKOaibvVkinkOLOfJL1gr+n+aSkpKWrDaX9TFlEPePJn0KtHFH8TY2Jg553SUJB1JnsxhtU5ib7Pm0pzUxf40Rc1oSfp/OyFYz6l/FLdq+6eCyfy/nboh4Om1JGKa/p+j/wz97y72t1NkkmDiDHJzWGoc8//MH/dqJq3z2mNgAmdkZMRcYYsBfffwzGEM8APE7jFuCNEgkYt9YUgliMyzS+chqQfEBEdLD8r7If4iRCtMrxUAPRPs1u+wsu69PyD3N4seJhU584UBiZk9tlM8qN662/94RFpOWsnV18Sq32IB62jXlZQKFnWDMT8SZ99D7Dbjhhm37I9HaQQFS1I7Sqd6HsdABimCaAlpCVYpxwIvMdHzTK7vgwpyhcUjZBCL9ZHqs9so1tKntxFSfX4TMbn0iT+/BWFJypoiKovmM7H/AROieYi+IZqQgahO8FnE/4ApUZ7m/+wDZhDWmhKRsCLC//sn4CBsf6UiY1Obt+12ckM0kLeEliRmYRU+CezYaGoRJbNsUo/hOP8AUSHYWiOhIkwAAAAASUVORK5CYII=';
-flowAsset['FlowStart'] = 'assets/svg/Start.svg';
-flowAsset['FlowEnd'] = 'assets/svg/End.svg';
-flowAsset['FlowSendMsg'] = 'assets/svg/whatsapp1.svg';
-flowAsset['FlowSendButton'] = 'assets/svg/Send-WhatsApp-Button.svg';
-flowAsset['FlowSendTemplate'] = 'assets/svg/whatsapp-template.svg';
-flowAsset['FlowSendEmail'] =
-	'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxAAAAsQAa0jvXUAAASlSURBVFhHtddXqCVFEMbxNeccMGBcA0ZEHwTjmjBgFmQFRQwP4ov5wYCImBAUBQVfFAQRA0bEiBgx54gK5oBhMQdM6/c7Z+pu33Hu7rLiB3+mp2ZOT3V1dXWfafOhhbrrpeGP8F2HNhvVO/+bVgxfho3DIh3abJ4tsBburiUdD2l2qFEu1kFsnvXFPlVfg+qHsL2v9sXhr/BJhzYbte+3g+oPcFD1Y9fjw5Kjuzn2Gsky4YuwZoc2G9U79cHpYea4Ocm5uermIJw3hCWCH7Y/Xi746Bod2suHUn18vfBs0NeZDPMS728Jdwcj+imcEUq7hqvD4+GH8EF4v2s/Ea4Ju4fSPeGRsEJ4J5wVaDASjJsEL+4fDgoHhHXDjHBJ4OCd4anwYfg1+N1SYf2wQzgk/B1OCd+E18LRYdNwXBCxQZVX+4T7wmPh57BWkAtnB6PcK+wdNgyrBfo6iMSD4aGwSzg/iOLzYauwbNgpiJpvDa2YCSc2D6uHl4IRLx5OCjKeY+eELcId4fbgfbZHw8fh5MBpz58Mnq8dqL4xqPahj18xbo4++mLYbnQ3RxKrn1zbhheCD0tGOfNcmC9V9t4Ubg3m3DRIupJ3Fg2cdW3b9Xu6K/wS9CESNwZq3xmUBDRPlt/T4bbwajgyUK3zIVXnVovfyAd5s3T4KOwbaK5OCLUVYPlV6HRoRVA7TTpGqTqWhAePm6NBnB4OC6ZmrtotvBxUt0+D7G1VHxduujBUCS5b6yBJVokpCUWFc/SvKDAcEczXfuGt8HpgL/pLZ6WgyLTyjnc5YrreDG8Hy1teVFn2ziQxbBmUzj2DWkDsCgtKNcrWXjZXNo7YpMigFDMFzNZNf3bXSVJMhJ0TKtuQynN5MqvjQIaopqEVm+JlWSvTIms6FCl7xYR0bJP5Nqh+l4eLgtXQyuiM0vNDg9JrrSvHRmWEcDhpN6gh+ZZpXCdM16mSqpDI3HvDe+HK8Hugmo7aM3YOHLw+bBR+C4qWPcEGZa+gmh79qKpU+aRictTqG63/rbsbUWhVnRixkmyrlmC2YpGgVcLngfNyqF85+zJyiflw+JHhmaBYKD4nMkRt4RFmIzx8dDe+r0MLmUKHVMt5Xk60H5f0o6S8NpwbbDweEgeEXgQqClTJSOWk+VQ/7HyS74Qg6VzbBD0msJ8a2A3ElI2yVSEyn5+FDUKrcqD9OJWdA6Zn5dHdeL715YADOWOPeSAoUJUPcuD7cXNcrZRRFe5+hsjyEVbqf7xVOeBKNWpXUZWUTkWtnUzdhAOSTDIaxRvhuiDZ1HIacqAfgQXRyIHqXBLakmW15eKcWDLfNefVLgdWDf/JgepIp+r3ZUGnIuGAWaeakmMaWknCmoL60zKVJk2B0ddGooZvH2xKVwXzr/DYnh3ZHTJtwwoStI8Kar4V0N8fplJF3Huz25c90IlI+KC1fFp4NzgX7BjsFaJDKqiqKYGPDZsFp6H5ldUwq+9tOUFWxXnBveX0SrBMHdfIxqJyipozonPCBaGW2WiND8jyU77tOTOGwsWGcmSPYD93ynW+N3ekjH4VlHDHMKepbUJtuRXq/l4AUc70Tpv5D9Nn+rOeBlBFAAAAAElFTkSuQmCC';
-flowAsset['FlowSendList'] = 'assets/svg/Send-WhatsApp-List.svg';
-flowAsset['FlowWaitResponse'] = 'assets/svg/Wait-Response.svg';
-flowAsset['FlowValidation'] = 'assets/svg/Condition.svg';
-flowAsset['FlowBranch'] = 'assets/svg/branch.svg';
-flowAsset['FlowHttpCall'] = 'assets/svg/HTTP-REQUEST.svg';
-flowAsset['FlowSendMedia'] = 'assets/svg/wa-media.svg';
-flowAsset['FlowSendEmail'] = 'assets/svg/wa-email.svg';
-flowAsset['FlowReplyButton'] = 'assets/svg/reply-all.svg';
-flowAsset['FlowChatAgent'] = 'assets/svg/chat-agents.svg';
-flowAsset['FlowSendCatalog'] = 'assets/svg/catalog-flow.svg';
-flowAsset['FlowSubFlow'] = 'assets/svg/subflow.svg';
-flowAsset['FlowAssignVar'] = 'assets/svg/flow-variable.svg';
-flowAsset['FlowReceiveOrder'] = 'assets/svg/flow-receive-order.svg';
-flowAsset['FlowProductInquery'] = 'assets/svg/flow-receive-product-inquery.svg';
-flowAsset['image'] = 'assets/svg/End.svg';
-
-flowAsset['images'] = 'assets/images/default.jpg';
-flowAsset['FlowSendLocation'] = 'assets/svg/sendLocation.svg';
-
-flowAsset['document'] = 'assets/svg/Start.svg';
-flowAsset['audio'] = 'assets/svg/whatsapp1.svg';
-flowAsset['video'] = 'assets/svg/Condition.svg';
-flowAsset['audioIcon'] = 'assets/svg/audio.svg';
-flowAsset['videoIcon'] = 'assets/svg/video.svg';
-flowAsset['documentIcon'] = 'assets/svg/document.svg';