@alexsab-ru/scripts 0.5.4 → 0.6.0

package/lib/cookie.js

@@ -28,7 +28,7 @@ export function setCookie(name, value, props)
 
 export function deleteCookie(name)
 {
-    setCookie(name, null, { 'domain':settings.domain,'path':'/','expires': -1 })
+    setCookie(name, null, { 'domain':window.location.hostname,'path':'/','expires': -1 })
 }
 
 export function cookiecook(days = 90)

package/lib/form.js

@@ -1,8 +1,7 @@
-import { getCookie } from './cookie';
+import { getCookie, setCookie, deleteCookie } from './cookie';
 import { createRequest } from './calltouch';
 import { reachGoal, getFormDataObject } from './analytics';
 
-
 export const noValidPhone = (phoneValue) => {
 	return ([...new Set(phoneValue.replace(/^(\+7)/g, "").replace(/\D/g, ""))].length === 1);
 };
@@ -119,141 +118,206 @@ const showMessageModal = (messageModal, icon, message) => {
 	messageModal.classList.remove("hidden");
 };
 
-export const connectForms = (url, callback, callback_error, ct_routeKey = '', verbose = false) => {
+const propsParams = {
+	callback: null, 
+	callback_error: null, 
+	ct_routeKey: '', 
+	confirmModalText: '',
+	verbose: false,
+}
 
-// Отправка всех форм
-document.querySelectorAll("form").forEach((form) => {
+export const connectForms = (url, props = propsParams) => {
+	props = {...propsParams, ...props};
+
+async function submitForm(form){
 	const btn = form.querySelector('[type="submit"]');
-	form.onsubmit = async (event) => {
-		event.preventDefault();
-		stateBtn(btn, "Отправляем...", true);
+	stateBtn(btn, "Отправляем...", true);
+	const agree = form.querySelector('[name="agree"]');
+	const phone = form.querySelector('[name="phone"]');
+	const errorIcon =
+		'<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"><path fill="#ed1c24" d="M26,0A26,26,0,1,0,52,26,26,26,0,0,0,26,0Zm9.6,17.5a1.94,1.94,0,0,1,2,2,2,2,0,1,1-2-2Zm-19.2,0a1.94,1.94,0,0,1,2,2,2,2,0,1,1-2-2ZM39.65,40.69a.93.93,0,0,1-.45.11,1,1,0,0,1-.89-.55,13.81,13.81,0,0,0-24.62,0,1,1,0,1,1-1.78-.9,15.8,15.8,0,0,1,28.18,0A1,1,0,0,1,39.65,40.69Z"></path></svg>';
+	const successIcon =
+		'<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"><path fill="#279548" d="M26,0A26,26,0,1,0,52,26,26,26,0,0,0,26,0Zm9.6,17.5a1.94,1.94,0,0,1,2,2,2,2,0,1,1-2-2Zm-19.2,0a2,2,0,1,1-2,2A2,2,0,0,1,16.4,17.5ZM40.09,32.15a15.8,15.8,0,0,1-28.18,0,1,1,0,0,1,1.78-.9,13.81,13.81,0,0,0,24.62,0,1,1,0,1,1,1.78.9Z"></path></svg>';
+	const errorText =
+		'<b class="text-bold block text-2xl mb-4">Упс!</b> Что-то пошло не так. Перезагрузите страницу и попробуйте снова. ';
+	const successText = '<b class="text-bold block text-2xl mb-4">Спасибо!</b> В скором времени мы свяжемся с Вами!';
+	const messageModal = document.getElementById("message-modal");
 
-		const agree = form.querySelector('[name="agree"]');
-		const phone = form.querySelector('[name="phone"]');
-		const errorIcon =
-			'<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"><path fill="#ed1c24" d="M26,0A26,26,0,1,0,52,26,26,26,0,0,0,26,0Zm9.6,17.5a1.94,1.94,0,0,1,2,2,2,2,0,1,1-2-2Zm-19.2,0a1.94,1.94,0,0,1,2,2,2,2,0,1,1-2-2ZM39.65,40.69a.93.93,0,0,1-.45.11,1,1,0,0,1-.89-.55,13.81,13.81,0,0,0-24.62,0,1,1,0,1,1-1.78-.9,15.8,15.8,0,0,1,28.18,0A1,1,0,0,1,39.65,40.69Z"></path></svg>';
-		const successIcon =
-			'<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"><path fill="#279548" d="M26,0A26,26,0,1,0,52,26,26,26,0,0,0,26,0Zm9.6,17.5a1.94,1.94,0,0,1,2,2,2,2,0,1,1-2-2Zm-19.2,0a2,2,0,1,1-2,2A2,2,0,0,1,16.4,17.5ZM40.09,32.15a15.8,15.8,0,0,1-28.18,0,1,1,0,0,1,1.78-.9,13.81,13.81,0,0,0,24.62,0,1,1,0,1,1,1.78.9Z"></path></svg>';
-		const errorText =
-			'<b class="text-bold block text-2xl mb-4">Упс!</b> Что-то пошло не так. Перезагрузите страницу и попробуйте снова. ';
-		const successText = '<b class="text-bold block text-2xl mb-4">Спасибо!</b> В скором времени мы свяжемся с Вами!';
-		const messageModal = document.getElementById("message-modal");
+	if (!phoneChecker(phone)) {
+		return;
+	}
 
-		if (!phoneChecker(phone)) {
-			return;
-		}
+	// если флажок не установлен - фронт
+	if (!agree.checked) {
+		showErrorMes(form, ".agree", "Чтобы продолжить, установите флажок");
+		stateBtn(btn, "Отправить");
+		return;
+	}
 
-		// если флажок не установлен - фронт
-		if (!agree.checked) {
-			showErrorMes(form, ".agree", "Чтобы продолжить, установите флажок");
-			stateBtn(btn, "Отправить");
-			return;
-		}
-		// Отпрвка цели что форма submit только после всех проверок
-		reachGoal("form_submit");
+	// Отпрвка цели что форма submit только после всех проверок
+	reachGoal("form_submit");
+
+	let formData = new FormData(form);
+	if(getCookie('fta')) {
+		formData.append("fta", true);
+	}
+	if(getCookie('__gtm_campaign_url')) {
+		let source = new URL(getCookie('__gtm_campaign_url'));
+		source.search.slice(1).split("&").forEach(function(pair) {
+			let param = pair.split("=");
+			formData.append(param[0], param[1]);
+		});
+	}
+	formData.append(
+		"page_url",
+		window.location.origin + window.location.pathname
+	);
+
+	if(typeof window.re != 'undefined') {
+		formData.append("re", window.re);
+	}
 
-		let formData = new FormData(form);
-		if(getCookie('fta')) {
-			formData.append("fta", true);
+	window.location.search
+		.slice(1)
+		.split("&")
+		.forEach(function (pair) {
+			let param = pair.split("=");
+			if(formData.get(param[0])){
+				formData.set(param[0], decodeURIComponent(param[1]));
+			} else {
+				formData.append(param[0], decodeURIComponent(param[1]));
+			}
+		});
+
+	let formDataObj = {};
+	try {
+		// Отправка заявки на обратный возов в CallTouch
+		if(props.ct_routeKey != '') {
+			const requestData = await createRequest(props.ct_routeKey, phone.value, props.verbose);
+			formData.append("ct_callback", true);
+			formData.append("ctw_createRequest", JSON.stringify(requestData));
+		} else {
+			throw new Error('Empty ct_routeKey');
 		}
-		if(getCookie('__gtm_campaign_url')) {
-			let source = new URL(getCookie('__gtm_campaign_url'));
-			source.search.slice(1).split("&").forEach(function(pair) {
-				let param = pair.split("=");
-				formData.append(param[0], param[1]);
-			});
+	} catch (error) {
+		if(props.ct_routeKey != '') {
+			formData.append("ctw_createRequest", error);
 		}
-		formData.append(
-			"page_url",
-			window.location.origin + window.location.pathname
-		);
+		props.verbose && console.error("Error during request Calltouch callback:", error);
+		formDataObj = getFormDataObject(formData, form.id);
+	}
 
-		if(typeof window.re != 'undefined') {
-			formData.append("re", window.re);
-		}
+	const params = new URLSearchParams([...formData]);
 
-		window.location.search
-			.slice(1)
-			.split("&")
-			.forEach(function (pair) {
-				let param = pair.split("=");
-				if(formData.get(param[0])){
-					formData.set(param[0], decodeURIComponent(param[1]));
-				} else {
-					formData.append(param[0], decodeURIComponent(param[1]));
+	await fetch(url, {
+		method: "POST",
+		mode: "cors",
+		cache: "no-cache",
+		credentials: "same-origin",
+		headers: {
+			"Content-Type": "application/x-www-form-urlencoded",
+		},
+		body: params,
+	})
+		.then((res) => res.json())
+		.then((data) => {
+			props.verbose && console.log(data);
+			stateBtn(btn, "Отправить");
+			if (data.answer == "required") {
+				reachGoal("form_required");
+				showErrorMes(form, data.field, data.message);
+				return;
+			} else if (data.answer == "error") {
+				reachGoal("form_error");
+
+				// Вызов callback_error при ошибке
+				if (props.callback_error && typeof props.callback_error === 'function') {
+					props.callback_error();
+				} else if (messageModal) {
+					setCookie('SEND_MAIL', true, {'domain': window.location.hostname,'path':'/','expires':600});
+					showMessageModal(messageModal, errorIcon, errorText + "<br>" + data.error);
 				}
-			});
+				return;
+			} else {
+				reachGoal("form_success", formDataObj);
 
-		let formDataObj = {};
-		try {
-			// Отправка заявки на обратный возов в CallTouch
-			if(ct_routeKey != '') {
-				const requestData = await createRequest(ct_routeKey, phone.value, verbose);
-				formData.append("ct_callback", true);
-				formData.append("ctw_createRequest", JSON.stringify(requestData));
+				// Вызов callback при успехе
+				if (props.callback && typeof props.callback === 'function') {
+					props.callback();
+				} else if (messageModal) {
+					setCookie('SEND_MAIL', true, {'domain': window.location.hostname,'path':'/','expires':600});
+					showMessageModal(messageModal, successIcon, successText);
+				}
 			}
-		} catch (error) {
-			formData.append("ctw_createRequest", error);
-			verbose && console.error("Error during request Calltouch callback:", error);
-			formDataObj = getFormDataObject(formData, form.id);
-		}
+			form.reset();
+		})
+		.catch((error) => {
+			reachGoal("form_error");
+			console.error("Ошибка отправки данных формы: " + error);
+			deleteCookie('SEND_MAIL');
+			// Вызов callback_error при ошибке
+			if (props.callback_error && typeof props.callback_error === 'function') {
+				props.callback_error();
+			} else if (messageModal) {
+				showMessageModal(messageModal, errorIcon, errorText + "<br>" + error);
+			}
+			stateBtn(btn, "Отправить");
+		});
+	return false;
+}
 
-		const params = new URLSearchParams([...formData]);
+async function sendForm(form) {
+	if (getCookie('SEND_MAIL')) {
+		const confirmModal = document.getElementById('confirm-modal');
+		if (confirmModal) {
+			confirmModal.querySelector('p').innerHTML = props.confirmModalText || '<span style="color: tomato; font-weight: bold">ПЕРЕДАЙ ТЕКСТ В ОБЪЕКТЕ <br><pre style="color: black; font-weight: 400">props = {confirmModalText: <i>"text"</i>}</pre></span>';
+			confirmModal.classList.remove("hidden");
 
-		await fetch(url, {
-			method: "POST",
-			mode: "cors",
-			cache: "no-cache",
-			credentials: "same-origin",
-			headers: {
-				"Content-Type": "application/x-www-form-urlencoded",
-			},
-			body: params,
-		})
-			.then((res) => res.json())
-			.then((data) => {
-				verbose && console.log(data);
-				stateBtn(btn, "Отправить");
-				if (data.answer == "required") {
-					reachGoal("form_required");
-					showErrorMes(form, data.field, data.message);
-					return;
-				} else if (data.answer == "error") {
-					reachGoal("form_error");
+			const accept = confirmModal.querySelector('#accept-confirm');
+			const acceptClose = confirmModal.querySelector('#accept-close');
 
-					// Вызов callback_error при ошибке
-					if (callback_error && typeof callback_error === 'function') {
-						callback_error();
-					} else if (messageModal) {
-						showMessageModal(messageModal, errorIcon, errorText + "<br>" + data.error);
-					}
+			// Проверка на уже добавленный обработчик
+			if (!accept.dataset.listenerAdded) {
+				accept.dataset.listenerAdded = 'true';
+				accept.addEventListener('click', async () => {
+					// Закрываем модальное окно
+					confirmModal.classList.add("hidden");
+					// Удаляем куку
+					deleteCookie('SEND_MAIL');
+					// Повторно отправляем форму
+					await submitForm(form);
 					return;
-				} else {
-					reachGoal("form_success", formDataObj);
+				});
+			}
 
-					// Вызов callback при успехе
-					if (callback && typeof callback === 'function') {
-						callback();
-					} else if (messageModal) {
-						showMessageModal(messageModal, successIcon, successText);
+			// Проверка на уже добавленный обработчик
+			if (!acceptClose.dataset.listenerAdded) {
+				acceptClose.dataset.listenerAdded = 'true';
+				acceptClose.addEventListener('click', () => {
+					// Закрываем модальное окно
+					const modals = document.querySelectorAll('.modal-overlay');
+					form.reset();
+					if (modals.length)  {
+						modals.forEach((modal)  =>  modal.classList.add("hidden"));
 					}
-				}
-				form.reset();
-			})
-			.catch((error) => {
-				reachGoal("form_error");
-				console.error("Ошибка отправки данных формы: " + error);
+					confirmModal.classList.add("hidden");
+					return;
+				});
+			}
+			return;
+		}
+	}else{
+		// Если куки нет, просто отправляем форму
+		await submitForm(form);
+		return;
+	}
+}
 
-				// Вызов callback_error при ошибке
-				if (callback_error && typeof callback_error === 'function') {
-					callback_error();
-				} else if (messageModal) {
-					showMessageModal(messageModal, errorIcon, errorText + "<br>" + error);
-				}
-				stateBtn(btn, "Отправить");
-			});
-		return false;
-	};
+// Отправка всех форм
+document.querySelectorAll("form").forEach((form) => {
+	form.addEventListener('submit', async (event) => {
+		event.preventDefault();
+		await sendForm(form);
+	})
 });
-
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexsab-ru/scripts",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "description": "common libs for websites",
   "main": "index.js",
   "scripts": {