document.addEventListener("DOMContentLoaded", () => {
let bubbleSettings = document.bubbleSettings;
bubbleSettings.phone_number = "33972197014";
let style = ``;
if (bubbleSettings.show_mobile_only) {
style += `
@media (min-width: 768px) {
#coco-body {
display: none !important;
}
}
`;
}
// Inject the style into the document
if (style) {
const styleSheet = document.createElement("style");
styleSheet.type = "text/css";
styleSheet.innerText = style;
document.head.appendChild(styleSheet);
}
let positionStyle = "";
if (bubbleSettings.tooltip_position === "full-coco-left") {
positionStyle = "left: 15px; right: auto;"; // Place la bulle à gauche
} else {
positionStyle = "right: 15px; left: auto;"; // Garde la bulle à droite (position par défaut)
}
const customCss = bubbleSettings.custom_css || "";
const breatheAnimation = bubbleSettings.disable_breathe
? ""
: "animation: breathe 2s infinite ease-in-out;";
document.getElementById("coco-body").innerHTML = /*html*/ `
${
bubbleSettings.whatsapp_message
}
×
1
`;
const chatWidget = document.getElementById("chat-widget-container");
const whatsappIcon = document.getElementById("whatsapp-icon");
const notificationBubble = document.getElementById("notification-bubble");
const closeChat = document.getElementById("chat-widget-close");
const sendMessageButton = document.getElementById("chat-widget-send");
const messageInput = document.querySelector("#chat-widget-footer input");
const chatMessages = document.getElementById("chat-messages");
const closeAllMessages = document.getElementById("notification-bubble-close");
const notificationText = document.getElementById("notification-bubble-text");
const cocoBody = document.getElementById("coco-body");
const headerChatBox = document.getElementById("chat-widget-header");
const cartDrawer = document.getElementById("CartDrawer"); // Utilisation de l'ID CartDrawer
setTimeout(() => {
cocoBody.style.display = "block";
}, bubbleSettings.delay);
// Observer les changements de classe sur le cart drawer
const observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (mutation.attributeName === "class") {
const isDrawerOpen = cartDrawer.classList.contains("is-open"); // Remplacer par la classe qui indique que le drawer est ouvert
if (isDrawerOpen) {
// Masquer la bulle CoCo
cocoBody.style.display = "none";
} else {
// Réafficher la bulle CoCo
cocoBody.style.display = "block";
}
}
});
});
// Observer les changements de classes sur le cart drawer
if (cartDrawer) {
observer.observe(cartDrawer, { attributes: true });
}
function isMobile() {
return /iPhone|iPad|iPod|Android|BlackBerry|IEMobile|Opera Mini/i.test(
navigator.userAgent,
);
}
function openWhatsAppLink(message) {
let number = bubbleSettings.phone_number;
if (bubbleSettings.is_relayed) {
message = `@[${bubbleSettings.relaying_slug_name}]\n${message}`;
number = bubbleSettings.relaying_phone_number;
}
const whatsappUrl =
`https://api.whatsapp.com/send/?phone=${number}&text=` +
encodeURIComponent(message);
window.open(whatsappUrl, "_blank");
}
function simulateTyping() {
const typingIndicator = document.createElement("div");
typingIndicator.textContent = "...";
typingIndicator.style.padding = "10px";
typingIndicator.style.marginBottom = "10px";
typingIndicator.style.borderRadius = "15px";
typingIndicator.style.backgroundColor = "#f1f0f0";
typingIndicator.style.color = "black";
typingIndicator.style.marginLeft = "20px";
chatMessages.appendChild(typingIndicator);
setTimeout(() => {
chatMessages.removeChild(typingIndicator);
displayWelcomeMessage();
}, 2000);
}
function displayWelcomeMessage() {
const messageElement = document.createElement("div");
messageElement.textContent = bubbleSettings.whatsapp_message_inside;
messageElement.style.padding = "10px";
messageElement.style.marginBottom = "10px";
messageElement.style.borderRadius = "15px";
messageElement.style.backgroundColor = "#f1f0f0";
messageElement.style.color = "black";
chatMessages.appendChild(messageElement);
}
function toggleChatWidget(keepClosed = false) {
if (chatWidget.style.display === "block") {
minimizeChatWidget();
if (keepClosed) {
localStorage.setItem("keepClosed", "true");
}
} else {
maximizeChatWidget();
}
}
function minimizeChatWidget() {
if (chatWidget.style.display !== "block") {
return; // Ne rien faire si le widget de chat est déjà fermé
}
chatWidget.style.display = "none";
showTextNotification();
chatMessages.innerHTML = ""; // Clear messages when chat widget is closed
console.log("TOGGLE CHAT WIDGET - MINIMIZE");
startChangeNotificationText();
if (!bubbleSettings.show_notification_bubble) {
notificationBubble.style.display = "none";
}
}
function maximizeChatWidget() {
if (chatWidget.style.display === "block") {
return; // Ne rien faire si le widget de chat est déjà ouvert
}
chatWidget.style.display = "block";
hideTextNotification();
simulateTyping();
console.log("TOGGLE CHAT WIDGET - MAXIMIZE");
stopChangeNotificationText();
}
function hideTextNotification(keepHidden = false) {
notificationBubble.style.display = "none";
if (keepHidden) {
localStorage.setItem("notificationBubbleHidden", "true");
}
}
function showTextNotification() {
notificationBubble.style.display = "flex";
localStorage.removeItem("notificationBubbleHidden");
}
function matchesPathFilter(url, regex) {
try {
const re = new RegExp(regex);
return re.test(url);
} catch (e) {
console.error("Invalid regex pattern:", regex);
return false;
}
}
const currentUrl = window.location.href;
const pathFilter = bubbleSettings.path_filter;
const shouldShowBubble =
!pathFilter || matchesPathFilter(currentUrl, pathFilter);
notificationText.addEventListener("click", toggleChatWidget);
headerChatBox.addEventListener("click", toggleChatWidget);
closeAllMessages.addEventListener("click", () => {
bubbleSettings.show_notification_bubble = false;
localStorage.setItem("notificationBubbleHidden", "true");
notificationBubble.style.display = "none";
if (!bubbleSettings.show_notification_bubble) {
notificationBubble.style.display = "none";
}
});
sendMessageButton.addEventListener("click", () => {
const message = messageInput.value.trim();
if (message) {
openWhatsAppLink(message);
messageInput.value = "";
}
});
messageInput.addEventListener("keypress", (e) => {
if (e.key === "Enter" || e.keyCode === 13) {
e.preventDefault();
sendMessageButton.click();
}
});
if (bubbleSettings.hide_coco_mention) {
document.getElementById("powered-by").style.display = "none";
}
if (!bubbleSettings.show_notification_bubble) {
notificationBubble.style.display = "none";
}
document.getElementById("buttonOne").addEventListener("click", () => {
openWhatsAppLink(bubbleSettings.button_one);
});
document.getElementById("buttonTwo").addEventListener("click", () => {
openWhatsAppLink(bubbleSettings.button_two);
});
document.getElementById("buttonThree").addEventListener("click", () => {
openWhatsAppLink(bubbleSettings.button_three);
});
whatsappIcon.addEventListener("click", toggleChatWidget);
let changeNotificationTextInterval = null;
function startChangeNotificationText() {
if (changeNotificationTextInterval) return;
let i = 1;
const messages = [
bubbleSettings.whatsapp_message,
bubbleSettings.button_one,
bubbleSettings.button_two,
bubbleSettings.button_three,
];
changeNotificationTextInterval = setInterval(() => {
notificationText.textContent = messages[i];
i = (i + 1) % messages.length;
}, 3500);
}
function stopChangeNotificationText() {
if (!changeNotificationTextInterval) return;
clearInterval(changeNotificationTextInterval);
notificationText.textContent = bubbleSettings.whatsapp_message;
changeNotificationTextInterval = null;
}
startChangeNotificationText();
if (!shouldShowBubble) {
document.getElementById("coco-body").style.display = "none";
document.getElementById("whatsapp-icon").style.display = "none";
document.getElementById("message-notification").style.display = "none";
document.getElementById("notification-bubble").style.display = "none";
}
});