@adlfe/campaign-management-library 2.10.0 → 2.10.2

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

@@ -0,0 +1,4588 @@
+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';