From 46cdda902bd3c32e346a5bdc50ed7ea60b3639c8 Mon Sep 17 00:00:00 2001 From: Romain Neuville Date: Thu, 30 Jan 2025 12:31:38 +0100 Subject: [PATCH 1/2] crisp(bug): fixing incompatibility with turbo and logoff only when needed --- .../controllers/crisp_controller.js | 64 ++++++++++++++++++- app/views/common/_crisp.html.erb | 1 + 2 files changed, 63 insertions(+), 2 deletions(-) diff --git a/app/javascript/controllers/crisp_controller.js b/app/javascript/controllers/crisp_controller.js index 80f256729..1e8f0c46b 100644 --- a/app/javascript/controllers/crisp_controller.js +++ b/app/javascript/controllers/crisp_controller.js @@ -9,11 +9,17 @@ export default class extends Controller { }; connect() { - if (!this.displayCrispValue) { + if (!this.displayCrispValue && window.$crisp) { // If the user is logged out from the app but crisp is still loaded, we loggout the user from crisp if (window.$crisp) { this.logout(); }; return; } + if (!this.displayCrispValue) { return; } + + // Ajout du safe mode pour supprimer l'avertissement dans la console lié aux modifs du MutationObserver + window.$crisp = window.$crisp || []; + window.$crisp.push(["safe", true]); + this.setupMutationObserverOverride(); if (window.CRISP_TOKEN_ID === this.userCrispTokenValue) { // If the user is already logged in, we don't need to do anything @@ -30,10 +36,63 @@ export default class extends Controller { this.handleFirstVisit(); } + setupMutationObserverOverride() { + // Fix pour faire fonctionner Crisp avec Turbo : https://github.com/crisp-im/crisp-sdk-web/issues/39 + if (!window.originalMutationObserver) { // Changed from this.originalMutationObserver + window.originalMutationObserver = window.MutationObserver; // Store it on window instead of this + window.listOfObservers = []; // Store it on window instead of this + + window.MutationObserver = function(aFunction) { + /* eslint new-cap: ["error", { "newIsCap": false }] */ + + const observer = new window.originalMutationObserver(aFunction); // Use window.originalMutationObserver + const { stack } = new Error(); + + if (stack?.includes("crisp")) { + window.listOfObservers.push(observer); // Use window.listOfObservers + } + + return observer; + }; + + window.CRISP_READY_TRIGGER = () => this.onCrispReady(); + } + } + + disconnectAllObservers() { + window.listOfObservers?.forEach((observer) => { // Use window.listOfObservers + observer.disconnect(); + }); + } + + reconnectAllObservers() { + window.listOfObservers?.forEach((observer) => { // Use window.listOfObservers + observer.reconnect(); + }); + } + + moveCrispToPermanentContainer() { + const crispWidget = document.querySelector(".crisp-client"); + const crispWrapper = document.getElementById("crisp-wrapper"); + + if (crispWidget && crispWrapper && !crispWrapper.contains(crispWidget)) { + this.disconnectAllObservers(); + crispWrapper.appendChild(crispWidget); + this.reconnectAllObservers(); + } + } + + onCrispReady() { + this.moveCrispToPermanentContainer(); + } + initCrisp(user) { window.$crisp = []; window.CRISP_WEBSITE_ID = process.env.CRISP_WEBSITE_ID; + // Ajout du safe mode pour supprimer l'avertissement dans la console lié aux modifs du MutationObserver + window.$crisp.push(["safe", true]); + if (user) { window.CRISP_TOKEN_ID = user.crispToken; window.$crisp.push(["set", "user:email", [user.email]]); @@ -62,7 +121,8 @@ export default class extends Controller { logout() { if (window.$crisp) { - window.CRISP_TOKEN_ID = null; + window.CRISP_WEBSITE_ID = undefined; + window.CRISP_TOKEN_ID = undefined; window.$crisp.push(["do", "session:reset"]); window.$crisp.push(["do", "session:destroy"]); window.$crisp.push(["do", "chat:hide"]); diff --git a/app/views/common/_crisp.html.erb b/app/views/common/_crisp.html.erb index e70618c02..c027907a4 100644 --- a/app/views/common/_crisp.html.erb +++ b/app/views/common/_crisp.html.erb @@ -4,3 +4,4 @@ data-crisp-user-nickname-value="<%= current_agent&.to_s %>" data-crisp-user-crisp-token-value="<%= current_agent&.crisp_token %>"> +
From db5f2a92fc9cd8b136c3564d743a190ffd9bb496 Mon Sep 17 00:00:00 2001 From: Romain Neuville Date: Tue, 4 Feb 2025 15:29:17 +0100 Subject: [PATCH 2/2] apply review suggestions --- .../controllers/crisp_controller.js | 113 +++++++++--------- 1 file changed, 57 insertions(+), 56 deletions(-) diff --git a/app/javascript/controllers/crisp_controller.js b/app/javascript/controllers/crisp_controller.js index 1e8f0c46b..97c73803f 100644 --- a/app/javascript/controllers/crisp_controller.js +++ b/app/javascript/controllers/crisp_controller.js @@ -9,17 +9,18 @@ export default class extends Controller { }; connect() { - if (!this.displayCrispValue && window.$crisp) { - // If the user is logged out from the app but crisp is still loaded, we loggout the user from crisp - if (window.$crisp) { this.logout(); }; + if (!this.displayCrispValue) { + // If the user is logged out (displayCrispValue is false) but crisp is still loaded, we logout the user from crisp + if (window.$crisp) { + this.logout(); + } return; } - if (!this.displayCrispValue) { return; } - // Ajout du safe mode pour supprimer l'avertissement dans la console lié aux modifs du MutationObserver + // safe mode is enabled to avoid console warnings related to MutationObserver modifications window.$crisp = window.$crisp || []; window.$crisp.push(["safe", true]); - this.setupMutationObserverOverride(); + this.#setupMutationObserverOverride(); if (window.CRISP_TOKEN_ID === this.userCrispTokenValue) { // If the user is already logged in, we don't need to do anything @@ -36,56 +37,6 @@ export default class extends Controller { this.handleFirstVisit(); } - setupMutationObserverOverride() { - // Fix pour faire fonctionner Crisp avec Turbo : https://github.com/crisp-im/crisp-sdk-web/issues/39 - if (!window.originalMutationObserver) { // Changed from this.originalMutationObserver - window.originalMutationObserver = window.MutationObserver; // Store it on window instead of this - window.listOfObservers = []; // Store it on window instead of this - - window.MutationObserver = function(aFunction) { - /* eslint new-cap: ["error", { "newIsCap": false }] */ - - const observer = new window.originalMutationObserver(aFunction); // Use window.originalMutationObserver - const { stack } = new Error(); - - if (stack?.includes("crisp")) { - window.listOfObservers.push(observer); // Use window.listOfObservers - } - - return observer; - }; - - window.CRISP_READY_TRIGGER = () => this.onCrispReady(); - } - } - - disconnectAllObservers() { - window.listOfObservers?.forEach((observer) => { // Use window.listOfObservers - observer.disconnect(); - }); - } - - reconnectAllObservers() { - window.listOfObservers?.forEach((observer) => { // Use window.listOfObservers - observer.reconnect(); - }); - } - - moveCrispToPermanentContainer() { - const crispWidget = document.querySelector(".crisp-client"); - const crispWrapper = document.getElementById("crisp-wrapper"); - - if (crispWidget && crispWrapper && !crispWrapper.contains(crispWidget)) { - this.disconnectAllObservers(); - crispWrapper.appendChild(crispWidget); - this.reconnectAllObservers(); - } - } - - onCrispReady() { - this.moveCrispToPermanentContainer(); - } - initCrisp(user) { window.$crisp = []; window.CRISP_WEBSITE_ID = process.env.CRISP_WEBSITE_ID; @@ -128,4 +79,54 @@ export default class extends Controller { window.$crisp.push(["do", "chat:hide"]); } } + + #setupMutationObserverOverride() { + // Fix for solving Crisp/Turbo incompatibility : https://github.com/crisp-im/crisp-sdk-web/issues/39 + if (!window.originalMutationObserver) { + window.originalMutationObserver = window.MutationObserver + window.listOfObservers = []; + + window.MutationObserver = function(aFunction) { + /* eslint new-cap: ["error", { "newIsCap": false }] */ + + const observer = new window.originalMutationObserver(aFunction); + const { stack } = new Error(); + + if (stack?.includes("crisp")) { + window.listOfObservers.push(observer); + } + + return observer; + }; + + window.CRISP_READY_TRIGGER = () => this.#onCrispReady(); + } + } + + #disconnectAllObservers() { + window.listOfObservers?.forEach((observer) => { + observer.disconnect(); + }); + } + + #reconnectAllObservers() { + window.listOfObservers?.forEach((observer) => { + observer.reconnect(); + }); + } + + #moveCrispToPermanentContainer() { + const crispWidget = document.querySelector(".crisp-client"); + const crispWrapper = document.getElementById("crisp-wrapper"); + + if (crispWidget && crispWrapper && !crispWrapper.contains(crispWidget)) { + this.#disconnectAllObservers(); + crispWrapper.appendChild(crispWidget); + this.#reconnectAllObservers(); + } + } + + #onCrispReady() { + this.#moveCrispToPermanentContainer(); + } }