Modal not closing - vuejs

The modal 'shop_duplicate_pipe' is not getting closed.

<template>
	<div>
		<div class="d-flex flex-column align-items-center">
			<img
				:src="`/images_lms/pipe-sources/${sourceDetail.source}.png`"
				:alt="sourceDetail.source"
				width="40"
				height="40"
			/>
			<label>shop</label>
		</div>
		<div class="border shadow p-2">
			<div class="form-group select2issue">
				<div class="form-control" v-if="leadFieldMappingExist">
					<label class="mb-0">
						{{ shopName }}
					</label>
				</div>
				<select id="shop_user_id" class="form-control" v-else>
					<option value="">Select or connect an account</option>
					<option value="connect_account">Connect an account</option>
					<option
						v-for="account in accounts"
						:value="account.id"
						:data-shop-name="account.shop_name"
						:data-shop-access-token="account.access_token"
					>
						{{ account.shop_name }}
					</option>
				</select>
			</div>
			<div class="form-group select2issue">
				<div class="form-control" v-if="leadFieldMappingExist">
					<label class="mb-0">
						{{ leadFormData.integration_name }}
					</label>
				</div>
				<select id="integrations" class="form-control" v-else>
					<option></option>
					<option
						v-for="integration in integrations"
						:data-integration-name="integration.name"
						:data-integration-id="integration.id"
						:value="integration.id"
					>
						{{ integration.name }}
					</option>
				</select>
			</div>
			<div class="form-group select2issue">
				<div class="form-control" v-if="leadFieldMappingExist">
					<label class="mb-0">
						{{ leadFormData.frequency_name }}
					</label>
				</div>

				<select id="freqs" class="form-control" v-else>
					<option></option>
					<option
						v-for="freq in freqs"
						:value="freq.id"
						:data-freq-name="freq.name"
					>
						{{ freq.name }}
					</option>
				</select>
			</div>

			<div class="form-group select2issue" v-show="leadFormData.leads_count > 0">
				<div>
					<SwitchButton
						:isEnabled="leadFormData.sync_existing"
						color="#253DB9"
						@toggle="toggleSyncExisting"
						>Sync Existing {{this.leadFormData.integration_name}}
					</SwitchButton>
				</div>
			</div>

			<!-- Field Mapping -->
            <div class="form-group d-flex align-items-center" v-for="(label, i) in leadFormData.shop_form_fields_label">
				<i
					class="icon fa-close mr-2"
					aria-hidden="true"
					@click="removeRow(i)"
					v-if="mode === 'create'"
				></i>
				<label class="mr-2 mb-0">
					<strong>{{ i + 1 }}.</strong>
				</label>
				<div class="form-control">
					<label class="mb-0" style="text-transform: capitalize">
						{{ label }}
					</label>
				</div>
			</div>
			
			<div
				class="mt-10 alert alert-danger"
				v-if="errorMessage.length > 0"
				v-html="errorMessage"
			></div>
			<div
				class="d-flex justify-content-center mt-2 loader loader-circle"
				v-if="isLoading"
			></div>
		</div>
	

		<!-- Duplicate Modal -->
		
		<Modal modalId="shop_duplicate_pipe" aria-labelledby="shop_duplicate_pipe"
     aria-hidden="true" >
			<template #title>WARNING</template>
			<strong>
				A pipe with form "{{leadFormData.integration_name}} & {{ leadFormData.frequency_name }}" already exists.
			</strong>
			<br />
			If you would still like to create a new pipe, the existing pipe for
			this form will be deactivated.<br />
			Click on <strong>'Yes'</strong> to confirm or
			<strong>'Cancel'</strong> to discard.
			<template #footer>
				<button
					type="button"
					class="btn btn-sm btn-light"
					data-dismiss="modal"
					aria-label="Close"
					
				>
					Cancel
				</button>
				<button
					class="btn btn-primary"
					type="button"
					@click="updateConfirmRepeatPipe('Y')"
				>
					Yes
				</button>
			</template>
		</Modal>
	</div>
</template>


	

<script>

import SwitchButton from "../common/SwitchButton";
import Modal from "../common/Modal";
export default {
	props: {
		sourceDetail: {
			type: Object,
			default: () => {
				return {};
			},
		},
		storedPipedata: {
			type: Object,
			default: () => {
				return {};
			},
		},
		leadFieldMapping: {
			type: Array,
			default: () => {
				return [];
			},
		},
		mode: {
			type: String,
			default: "create",
		},
	},
	data: function () {
		return {
		
			modalShow: false,
			accounts: [],
			integrations: [],
			freqs: [],
			questions: [],
			sampleLead: [],
			shopName: "",
			leadFormData: {
				shop_form_fields: [],
				shop_form_fields_label: [],
				shop_user_id: "",
				shop_name:"",
				shop_access_token:"",
				integration_id: "",
				integration_name: "",
				frequency_id: "",
				frequency_name: "",
				leads_count: 0,
				sync_existing: false,
				confirm_repeat_pipe: "N",
			},
			isLoading: false,
			errorMessage: "",
		};
	},
	components: {
		SwitchButton,
		Modal,
	},
	methods: {
		
		fetchAccounts() {
			axios
				.get("/shop/accounts/list")
				.then((response) => {
					this.accounts = response.data;
					if (this.leadFieldMappingExist) {
						this.setAccountName();
					}
				})
				.catch((error) => {
					console.log(error.response.data);
				});
		},
		fetchIntegrations(select, event) {
			if (event.type !== "select2:select") return false;
			this.errorMessage = "";

			let accountId = select.val();			
			this.leadFormData.shop_name = select.find(":selected").data("shop-name");
			this.leadFormData.shop_access_token = select.find(":selected").data("shop-access-token");

			if (accountId !== "connect_account" && accountId !== "") {
				this.resetDataObject();
				let vm = this;
				$("#integrations")
					.select2({
						width: "100%",
						containerCssClass: "red-border",
						placeholder: "Select a account to choose a integration",
					})
					.on("select2:select select2:selecting", function (e) {
						vm.fetchFrequency($(this), e);
						vm.emitSourceData();
					});

				$("#freqs")
					.select2({
						width: "100%",
						containerCssClass: "red-border",
						placeholder: "Select a integration to choose a form",
					})
					.on("select2:select select2:selecting", function (e) {
						vm.fetchQuestions($(this), e);
						vm.emitSourceData();
					});
				$("#shop_user_id").select2({
					containerCssClass: "green-border",
					width: "100%",
				});
				this.isLoading = true;
				this.leadFormData.shop_user_id = accountId;
				axios
					.get(`/shop/integrations/list`)
					.then((response) => {
						if (response.data.length === 0) {
							this.errorMessage = "Integration not found!";
						}
						this.integrations = response.data;
						this.emitSourceData();
						this.isLoading = false;
					})
					.catch((error) => {
						let msg = "Something went wrong!";
						if (error.response.data) {
							msg = error.response.data.message;
						}
						this.errorMessage = msg;
						this.isLoading = false;
						this.emitSourceData();
					});
			} else if (accountId === "connect_account") {
				$("#shop_user_id").select2({
					containerCssClass: "red-border",
					width: "100%",
				});
				$("#baseModal").modal("show");
			}
		},
		fetchFrequency(select, event) {
			if (event.type !== "select2:select") return false;
			let integrationId = select.val();
			let integrationName = select.find(":selected").data("integration-name");
			this.leadFormData.integration_name = integrationName;
			this.leadFormData.integration_id = integrationId;
			this.leadFormData.frequency_id = "";
			this.leadFormData.frequency_name = "";
			this.leadFormData.shop_form_fields = [];
			this.leadFormData.shop_form_fields_label = [];
			this.freqs = [];
			this.questions = [];
			this.sampleLead = [];
			this.errorMessage = "";
			if (integrationId === "") {
				select.select2({
					containerCssClass: "red-border",
					placeholder: "Choose a integration",
					width: "100%",
				});
				return false;
			}
			select.select2({
				containerCssClass: "green-border",
				width: "100%",
			});
			this.emitSourceData();
			this.isLoading = true;
			axios
				.get(`/shop/frequency/list`)
				.then((response) => {
					if (response.data.length === 0) {
						this.errorMessage = "Frequency not found!";
					}
					this.freqs = response.data;
					this.emitSourceData();
					this.isLoading = false;
				})
				.catch((error) => {
					let msg = "Something went wrong!";
					if (error.response.data) {
						msg = error.response.data.message;
					}
					this.errorMessage = msg;
					this.isLoading = false;
					this.emitSourceData();
				});
		},
		fetchQuestions(select, event) {
			if (event.type !== "select2:select") return false;
			this.leadFormData.shop_form_fields = [];
			this.leadFormData.shop_form_fields_label = [];
			this.leadFormData.leads_count = 1;
			this.questions = [];
			this.sampleLead = [];
			this.errorMessage = "";
			let freqId = select.val();
			let freqName = select.find(":selected").data("freq-name");
			this.leadFormData.frequency_name = freqName;
			this.leadFormData.frequency_id = freqId;
			if (freqId === "") {
				select.select2({
					containerCssClass: "red-border",
					placeholder: "Choose a freq",
					width: "100%",
				});
				return false;
			}
			select.select2({
				containerCssClass: "green-border",
				width: "100%",
			});
			this.emitSourceData();
			this.isLoading = true;
			this.checkPipeExist();
			axios
				.get(`/shop/question/list`)
				.then((response) => {
					if (response.data.length === 0) {
						this.errorMessage = "Questions not found!";
					}
					this.questions = response.data;
					if (this.questions.length > 0) {
						this.leadFormData.shop_form_fields = this.questions.map(
							(question) => question.key
						);
						this.leadFormData.shop_form_fields_label =
							this.questions.map((question) => question.label);
					}
					this.emitSourceData();
					this.isLoading = false;
				})
				.catch((error) => {
					let msg = "Something went wrong!";
					if (error.response.data) {
						msg = error.response.data.message;
					}
					this.errorMessage = msg;
					this.isLoading = false;
					this.emitSourceData();
				});
		},
		removeRow(index) {
			let shop_form_fields = this.leadFormData.shop_form_fields.slice(0);
			let shop_form_fields_label = this.leadFormData.shop_form_fields_label.slice(0);
			shop_form_fields.splice(index, 1);
			shop_form_fields_label.splice(index, 1);
			this.leadFormData.shop_form_fields = shop_form_fields;
			this.leadFormData.shop_form_fields_label = shop_form_fields_label;
			this.$emit("shopFormRemovedIndex", index);
			this.emitSourceData();
		},
		toggleSyncExisting() {
			this.leadFormData.sync_existing = !this.leadFormData.sync_existing;
			this.emitSourceData();
		},
		emitSourceData() {
			this.$emit("shopFormData", this.leadFormData);
		},
		checkPipeExist() {
			axios
				.get(
					`/shop/check_pipe_exist?integration_id=${this.leadFormData.integration_id}&frequency_id=${this.leadFormData.frequency_id}`
				)
				.then((response) => {
					if (response.data.pipe_exist === "Y") {
						$("#shop_duplicate_pipe").modal("show");
					}
				})
				.catch((error) => {
					console.log(error.response.data);
				});
		},
		updateConfirmRepeatPipe(value) {
			this.leadFormData.confirm_repeat_pipe = value;
			this.modalShow = false;
			$("#shop_duplicate_pipe").modal("hide");

			if (value === "N") {
				$("#freqs").val("").trigger("select2:select");
				this.leadFormData.frequency_id = "";
				this.leadFormData.frequency_name = "";
				this.questions = [];
				this.sampleLead = [];
			}
			this.emitSourceData();
		},
		resetDataObject() {
			this.integrations = [];
			this.freqs = [];
			this.questions = [];
			this.sampleLead = [];
			this.leadFormData.shop_user_id = "";
			this.leadFormData.integration_id = "";
			this.leadFormData.integration_name = "";
			this.leadFormData.frequency_id = "";
			this.leadFormData.frequency_name = "";
			this.leadFormData.leads_count = 0;
			this.leadFormData.sync_existing = false;
			this.errorMessage = "";
			this.emitSourceData();
		},
		setDefaults() {
			if (this.leadFieldMappingExist) {
				let { shop_user_id, integration_id, integration_name, frequency_id, frequency_name } =
					this.storedPipedata;
				this.leadFormData.shop_user_id = shop_user_id;
				this.leadFormData.integration_id = integration_id;
				this.leadFormData.integration_name = integration_name;
				this.leadFormData.frequency_id = frequency_id;
				this.leadFormData.frequency_name = frequency_name;

				this.leadFormData.shop_form_fields_label =
					this.leadFieldMapping.map((field) => field.ex_field_label);
				this.leadFormData.shop_form_fields = this.leadFieldMapping.map(
					(field) => field.ex_field
				);
				this.emitSourceData();
			}
		},
		setAccountName() {
			let shopAccountDetail = this.accounts.find(
				(account) =>
					account.ex_user_id == this.storedPipedata.shop_user_id
			);
			this.shopName = shopAccountDetail.shop_name;
		},
		setSelect2() {},

		onMessage(e) {
			if (e.origin !== window.origin || !e.data.message) {
				return;
			}

			let success = e.data.success;
			if (success) {
				swal({
					title: "Done!",
					text: e.data.message,
					type: "success",
					timer: 3000,
					showConfirmButton: true,
				});
				this.fetchAccounts();
				$("#baseModal").modal("hide");
				return;
			}

			swal({
				title: "Error!",
				text: e.data.message,
				type: "error",
				timer: 3000,
				showConfirmButton: true,
			});
		},
	},
	computed: {
		leadFieldMappingExist() {
			if (this.leadFieldMapping.length > 0) {
				return true;
			}
			return false;
		},
	},
	mounted() {
		const vm = this;
		vm.fetchAccounts();
		vm.setDefaults();

		$("#shop_user_id")
			.select2({
				width: "100%",
				containerCssClass: "red-border",
				placeholder: "Select or connect an account",
			})
			.on("select2:select select2:selecting", function (e) {
				vm.fetchIntegrations($(this), e);
			});

		$("#integrations")
			.select2({
				width: "100%",
				containerCssClass: "red-border",
				placeholder: "Select a account to choose a integration",
			})
			.on("select2:select select2:selecting", function (e) {
				vm.fetchFrequency($(this), e);
				vm.emitSourceData();
			});

		$("#freqs")
			.select2({
				width: "100%",
				containerCssClass: "red-border",
				placeholder: "Select a integration to choose a form",
			})
			.on("select2:select select2:selecting", function (e) {
				vm.fetchQuestions($(this), e);
				vm.emitSourceData();
			});

		this.emitSourceData();

		window.addEventListener("message", this.onMessage, false);
	},
	beforeDestroy() {
		this.resetDataObject();
		window.removeEventListener("message", this.onMessage);
	},
};
</script>