@alexsab-ru/scripts 0.1.0 → 0.4.0

package/README.md

@@ -2,6 +2,12 @@
 
 common libs for websites
 
+* [Installation](#Installation)
+* [Analytics module](#analytics-module)
+* [Cookie module](#cookie-module)
+* [Calltouch module](#calltouch-module)
+* [Form module](#form-module)
+
 ## Installation
 ```bash
 pnpm i @alexsab-ru/scripts
@@ -84,3 +90,37 @@ document.querySelectorAll("form").forEach((form) => {
 	};
 });
 ```
+
+## Cookie module
+
+```js
+import { getCookie, setCookie, deleteCookie, cookiecook } from './cookie';
+
+getCookie('cookie_name');
+setCookie('cookie_name');
+deleteCookie('cookie_name');
+cookiecook(days);
+```
+
+## Calltouch module
+
+```js
+import { createRequest } from '@alexsab-ru/scripts';
+
+// Отправка заявки на обратный возов в CallTouch
+createRequest("ct_callback", "+7 (987) 654-32-10");
+
+// для показа лога нужно использовать третий парамтер
+createRequest("ct_callback", "+7 (987) 654-32-10", true);
+```
+
+## Form module
+
+```js
+import { connectForms, cookiecook } from '@alexsab-ru/scripts';
+
+cookiecook();
+connectForms('https://alexsab.ru/lead/test/', function() {
+	console.log("sucess lead");
+});
+```

package/index.js

@@ -1 +1,4 @@
 export * from './lib/analytics';
+export * from './lib/calltouch';
+export * from './lib/cookie';
+export * from './lib/form';

package/lib/analytics.js

@@ -82,7 +82,7 @@ export function addEmailGoals(item) {
 		addEmailGoals(tel);
 	});
 
-	var goals = [
+	let goals = [
 		{
 			selector: 'form input',
 			action: 'click',

package/lib/calltouch.js

@@ -0,0 +1,60 @@
+export const createRequest = (routeKey, phoneValue, verbose = false) => {
+
+	if(window.ctw) {
+		window.ctw.getRouteKeyData(routeKey, function(success, data){
+			verbose && console.log(success, data);
+			if (success) {
+				if (data.widgetFound) {
+					if (data.widgetData.callCenterWorkingMode == 'working_hours') {
+						verbose && console.log('колл-центр работает, отображение виджета');
+					} else {
+						if (data.widgetData.collectNonWorkingRequests) {
+							verbose && console.log('колл-центр не работает, но можем отобразить форму нерабочего времени');
+						} else {
+							verbose && console.log('колл-центр не работает, заявки в нерабочее время не собираем');
+						}
+					}
+
+					var phone_ct = phoneValue.replace(/[^0-9]/gim, '');
+					if (phone_ct[0] == '8') { phone_ct = phone_ct.substring(1); }
+					if (phone_ct[0] == '7') { phone_ct = phone_ct.substring(1); }
+					phone_ct = '7' + phone_ct;
+
+					window.ctw.createRequest(
+						routeKey,
+						phone_ct,
+						[],
+						function (success, data) {
+							verbose && console.log(success, data)
+							if (success) {
+								verbose && console.log('Создана заявка на колбек, идентификатор: ' + data.callbackRequestId)
+							}
+							else {
+								switch (data.type) {
+								case "request_throttle_timeout":
+								case "request_throttle_count":
+									verbose && console.log('Достигнут лимит создания заявок, попробуйте позже');
+									break;
+								case "request_phone_blacklisted":
+									verbose && console.log('номер телефона находится в черном списке');
+									break;
+								case "validation_error":
+									verbose && console.log('были переданы некорректные данные');
+									break;
+								default:
+									verbose && console.log('Во время выполнения запроса произошла ошибка: ' + data.type);
+								}
+							}
+						}
+					);
+				} else {
+					verbose && console.log('не найден включенный виджет '+routeKey+', либо услуга обратного звонка не активна');
+				}
+			} else {
+				verbose && console.log('во время обработки произошла ошибка');
+				verbose && console.log(data)
+			}
+		});
+	}
+
+};

package/lib/cookie.js

@@ -0,0 +1,52 @@
+export function getCookie(name)
+{
+    let matches = document.cookie.match(new RegExp(
+        "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
+        ));
+    return matches ? decodeURIComponent(matches[1]) : undefined;
+}
+
+export function setCookie(name, value, props)
+{
+    props = props || {}
+    var exp = props.expires
+    if (typeof exp == "number" && exp) {
+        var d = new Date()
+        d.setTime(d.getTime() + exp*1000)
+        exp = props.expires = d
+    }
+    if(exp && exp.toUTCString) { props.expires = exp.toUTCString() }
+    value = encodeURIComponent(value)
+    var updatedCookie = name + "=" + value
+    for(var propName in props){
+        updatedCookie += "; " + propName
+        var propValue = props[propName]
+        if(propValue !== true){ updatedCookie += "=" + propValue }
+    }
+    document.cookie = updatedCookie
+}
+
+export function deleteCookie(name)
+{
+    setCookie(name, null, { 'domain':settings.domain,'path':'/','expires': -1 })
+}
+
+export function cookiecook(days = 90)
+{
+    let cookiecook = getCookie("cookiecook"),
+        cookiewin = document.querySelector('.cookie_notice');
+
+    if (cookiecook != "no") {
+
+        cookiewin.classList.remove("hidden");
+
+        document.getElementById("cookie_close").addEventListener("click", function(e){
+            e.preventDefault();
+            cookiewin.classList.add("hidden");
+
+            let date = new Date;
+            date.setDate(date.getDate() + days);
+            document.cookie = "cookiecook=no; path=/; expires=" + date.toUTCString();
+        });
+    }
+}

package/lib/form.js

@@ -0,0 +1,224 @@
+import { getCookie } 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);
+};
+
+export function maskphone(e) {
+	let num = this.value.replace(/^(\+7|8|7)/g, "").replace(/\D/g, "").split(/(?=.)/),
+		i = num.length;
+
+	if(this.value != "" && this.value != "+") {
+		if (0 <= i) num.unshift("+7");
+		if (1 <= i) num.splice(1, 0, " ");
+		if (4 <= i) num.splice(5, 0, " ");
+		if (7 <= i) num.splice(9, 0, "-");
+		if (9 <= i) num.splice(12, 0, "-");
+		this.value = num.join("");
+	}
+}
+
+
+export const phoneChecker = (phone) => {
+	let form = phone.closest("form"),
+		btn = form.querySelector('input[type="submit"]');
+	if (!phone.value.length) {
+		showErrorMes(form, ".phone", "Телефон является обязательным полем");
+		stateBtn(btn, "Отправить");
+		return false;
+	} else {
+		const phoneRe = new RegExp(/^\+7 [0-9]{3} [0-9]{3}-[0-9]{2}-[0-9]{2}$/);
+		if (!phoneRe.test(phone.value) || noValidPhone(phone.value)) {
+			showErrorMes(form, ".phone", "Введен некорректный номер телефона");
+			stateBtn(btn, "Отправить");
+			return false;
+		}
+	}
+	showErrorMes(form, ".phone", "");
+	return true;
+};
+
+document.querySelectorAll("input[name=phone]").forEach(function (element) {
+	// element.addEventListener("focus", maskphone);
+	element.addEventListener("input", maskphone);
+	element.addEventListener("change", () => phoneChecker(element));
+});
+
+// AGREE CHECKBOX
+// Проверка на состояние чекбокса, показ/скрытие ошибки
+document.querySelectorAll("input[name=agree]").forEach(function (element) {
+	let errorMes = element.parentElement.querySelector(".agree");
+	element.addEventListener("change", (e) => {
+		if (!e.target.checked) {
+			errorMes.classList.remove("hidden");
+		} else {
+			errorMes.classList.add("hidden");
+		}
+	});
+});
+
+// TEXTAREA
+const minLengthTextareaField = 10; // минимальное кол-во символов
+// проверка на минимальное кол-во символов и скрытие ошибки
+const checkTextareaLength = (textarea, minLength) => {
+	if (textarea.value.length >= minLength) {
+		textarea.nextSibling.nextElementSibling.classList.add("hidden");
+	}
+};
+
+// CHANGE textarea для всез браузеров
+document.querySelectorAll("textarea").forEach(function (textarea) {
+	if (textarea.addEventListener) {
+		textarea.addEventListener(
+			"input",
+			function () {
+				// event handling code for sane browsers
+				checkTextareaLength(textarea, minLengthTextareaField);
+			},
+			false
+		);
+	} else if (textarea.attachEvent) {
+		textarea.attachEvent("onpropertychange", function () {
+			// IE-specific event handling code
+			checkTextareaLength(textarea, minLengthTextareaField);
+		});
+	}
+});
+
+// BUTTON
+// Состояние кнопки
+const stateBtn = (btn, value, disable = false) => {
+	btn.value = value;
+	btn.disabled = disable;
+};
+
+const showErrorMes = (form, el, text) => {
+	let field = form.querySelector(el);
+	field.innerText = text;
+	field.classList.remove("hidden");
+};
+
+const showMessageModal = (messageModal, icon, message) => {
+	document.querySelectorAll(".modal-overlay").forEach((el) => {
+		el.classList.add("hidden");
+	});
+	messageModal.querySelector("#icon").innerHTML = icon;
+	messageModal.querySelector("p").innerHTML = message;
+	messageModal.classList.remove("hidden");
+};
+
+
+export const connectForms = (url, callback) => {
+
+// Отправка всех форм
+document.querySelectorAll("form").forEach((form) => {
+	const btn = form.querySelector('input[type="submit"]');
+	form.onsubmit = async (event) => {
+		event.preventDefault();
+		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> Что-то пошло не так. Перезагрузите страницу и попробуйте снова. ';
+		let successText = '<b class="text-bold block text-2xl mb-4">Спасибо!</b> В скором времени мы свяжемся с Вами!';
+		const messageModal = document.getElementById("message-modal");
+
+		if (!phoneChecker(phone)) {
+			return;
+		}
+
+		// если флажок не установлен - фронт
+		if (!agree.checked) {
+			showErrorMes(form, ".agree", "Чтобы продолжить, установите флажок");
+			stateBtn(btn, "Отправить");
+			return;
+		}
+		// Отпрвка цели что форма submit только после всех проверок
+		reachGoal("form_submit");
+
+		// Отправка заявки на обратный возов в CallTouch
+		createRequest("ct_callback", phone);
+
+		let formData = new FormData(form);
+		if(getCookie('fta')) {
+			formData.append("fta", true);
+		}
+		if(getCookie('__gtm_campaign_url')) {
+			var source = new URL(getCookie('__gtm_campaign_url'));
+			source.search.slice(1).split("&").forEach(function(pair) {
+				var param = pair.split("=");
+				formData.append(param[0], param[1]);
+			});
+		}
+		formData.append(
+			"page_url",
+			window.location.origin + window.location.pathname
+		);
+
+		window.location.search
+			.slice(1)
+			.split("&")
+			.forEach(function (pair) {
+				var param = pair.split("=");
+				if(formData.get(param[0])){
+					formData.set(param[0], decodeURIComponent(param[1]));
+				} else {
+					formData.append(param[0], decodeURIComponent(param[1]));
+				}
+			});
+
+		const params = new URLSearchParams([...formData]);
+		var formDataObj = getFormDataObject(formData, form.id);
+
+		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) => {
+				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");
+					showMessageModal(messageModal, errorIcon, errorText + "<br>" + data.error);
+					return;
+				} else {
+					reachGoal("form_success", formDataObj);
+					showMessageModal(messageModal, successIcon, successText);
+
+					// Вызов callback в конце функции
+					if (callback && typeof callback === 'function') {
+						callback();
+					}
+				}
+				form.reset();
+			})
+			.catch((error) => {
+				reachGoal("form_error");
+				console.error("Ошибка отправки данных формы: " + error);
+				showMessageModal(messageModal, errorIcon, errorText + "<br>" + error);
+				stateBtn(btn, "Отправить");
+			});
+		return false;
+	};
+});
+
+}

package/package.json

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