Merge pull request #2879 from Safelite/feature/CASH-1527

CASH-1527 | Initial attempt at updating salesforce

src/digital-components/salesforce-webchat/salesforce-helper-dev.js

@@ -7,9 +7,9 @@ function setupCustomSettings(
     onWebchatCloseCallback
 ) {
     modifyEmbeddedSvcCallback();
-    embedded_svc.addEventHandler("onSettingsCallCompleted", finishedLoadingCallback);
+    window.addEventListener("onEmbeddedMessagingButtonCreated", finishedLoadingCallback);
-    embedded_svc.addEventHandler("afterMaximize", onWebchatOpenCallback);
+    window.addEventListener("onEmbeddedMessagingWindowMaximized", onWebchatOpenCallback);
-    embedded_svc.addEventHandler("afterDestroy", onWebchatCloseCallback);
+    window.addEventListener("onEmbeddedMessagingWindowClosed", onWebchatCloseCallback);
 }
 
 /*
@@ -35,62 +35,25 @@ export function initializeSalesforceWebchatForDev(
     onWebchatOpenCallback,
     onWebchatCloseCallback
 ) {
-    var initESW = function (gslbBaseURL) {
+    setupCustomSettings(
-        embedded_svc.settings.displayHelpButton = true; //Or false
+        modifyEmbeddedSvcCallback,
-        embedded_svc.settings.language = ""; //For example, enter 'en' or 'en-US'
+        finishedLoadingCallback,
-        //embedded_svc.settings.defaultMinimizedText = '...'; //(Defaults to Chat with an Expert)
+        onWebchatOpenCallback,
-        //embedded_svc.settings.disabledMinimizedText = '...'; //(Defaults to Agent Offline)
+        onWebchatCloseCallback
-        //embedded_svc.settings.loadingText = ''; //(Defaults to Loading)
+    );
-        //embedded_svc.settings.storageDomain = 'yourdomain.com'; //(Sets the domain for your deployment so that visitors can navigate subdomains during a chat session)
-        // Settings for Chat
-        //embedded_svc.settings.directToButtonRouting = function(prechatFormData) {
-        // Dynamically changes the button ID based on what the visitor enters in the pre-chat form.
-        // Returns a valid button ID.
-        //};
-        //embedded_svc.settings.prepopulatedPrechatFields = {}; //Sets the auto-population of pre-chat form fields
-        //embedded_svc.settings.fallbackRouting = []; //An array of button IDs, user IDs, or userId_buttonId
-        //embedded_svc.settings.offlineSupportMinimizedText = '...'; //(Defaults to Contact Us)
 
-        embedded_svc.settings.enabledFeatures = ["LiveAgent"];
+    try {
-        embedded_svc.settings.entryFeature = "LiveAgent";
+        embeddedservice_bootstrap.settings.language = "en_US"; // For example, enter 'en' or 'en-US'
 
-        setupCustomSettings(
+        embeddedservice_bootstrap.init(
-            modifyEmbeddedSvcCallback,
-            finishedLoadingCallback,
-            onWebchatOpenCallback,
-            onWebchatCloseCallback
-        );
-
-        embedded_svc.init(
-            "https://safelite2--dev.sandbox.my.salesforce.com",
-            "https://safelite2--dev.sandbox.my.salesforce-sites.com/chat",
-            gslbBaseURL,
             "00D6s0000008r6A",
-            "Sales_Central_Snap_in",
+            "Sales_Central_TFN",
+            "https://safelite2--dev.sandbox.my.site.com/ESWSalesCentralTFN1755660094477",
             {
-                baseLiveAgentContentURL:
+                scrt2URL: "https://safelite2--dev.sandbox.my.salesforce-scrt.com",
-                    "https://c.la12s-core1.sfdc-8tgtt5.salesforceliveagent.com/content",
-                deploymentId: "572Wr0000017xKX",
-                buttonId: "573Wr000000CpgH",
-                baseLiveAgentURL: "https://d.la12s-core1.sfdc-8tgtt5.salesforceliveagent.com/chat",
-                eswLiveAgentDevName:
-                    "EmbeddedServiceLiveAgent_Parent04IWr000003yKq9MAE_1961681659a",
-                isOfflineSupportEnabled: false,
             }
         );
-    };
+    } catch (err) {
-
+        console.error("Error loading Embedded Messaging: ", err);
-    if (!window.embedded_svc) {
-        var s = document.createElement("script");
-        s.setAttribute(
-            "src",
-            "https://safelite2--dev.sandbox.my.salesforce.com/embeddedservice/5.0/esw.min.js"
-        );
-        s.onload = function () {
-            initESW(null);
-        };
-        document.body.appendChild(s);
-    } else {
-        initESW("https://service.force.com");
     }
 }

src/digital-components/salesforce-webchat/salesforce-helper-sys.js

@@ -0,0 +1,59 @@
+/* eslint-disable */
+
+function setupCustomSettings(
+    modifyEmbeddedSvcCallback,
+    finishedLoadingCallback,
+    onWebchatOpenCallback,
+    onWebchatCloseCallback
+) {
+    modifyEmbeddedSvcCallback();
+    window.addEventListener("onEmbeddedMessagingButtonCreated", finishedLoadingCallback);
+    window.addEventListener("onEmbeddedMessagingWindowMaximized", onWebchatOpenCallback);
+    window.addEventListener("onEmbeddedMessagingWindowClosed", onWebchatCloseCallback);
+}
+
+/*
+The code below is generated from salesforce but modified in the following ways:
+  * Only the javascript inside the second <script> tag in the provided salesforce code is copy pasted
+  * CSS is not copied in
+  * First <script> tag loading in the file from the CDN is not copied in
+  * Copy the entire contents of the second <script> tag inside the initializeSalesforceWebchatForSys
+      method and add a call to setupCustomSettings before the 'embedded_svc.init()' method is called
+      
+      Actual call to paste in:
+      setupCustomSettings(
+            modifyEmbeddedSvcCallback,
+            finishedLoadingCallback,
+            onWebchatOpenCallback,
+            onWebchatCloseCallback
+        );
+*/
+
+export function initializeSalesforceWebchatForSys(
+    modifyEmbeddedSvcCallback,
+    finishedLoadingCallback,
+    onWebchatOpenCallback,
+    onWebchatCloseCallback
+) {
+    setupCustomSettings(
+        modifyEmbeddedSvcCallback,
+        finishedLoadingCallback,
+        onWebchatOpenCallback,
+        onWebchatCloseCallback
+    );
+
+    try {
+        embeddedservice_bootstrap.settings.language = "en_US"; // For example, enter 'en' or 'en-US'
+
+        embeddedservice_bootstrap.init(
+            "00DcY0000067qKz",
+            "Sales_Central_TFN",
+            "https://safelite2--sys.sandbox.my.site.com/ESWSalesCentralTFN1767797265631",
+            {
+                scrt2URL: "https://safelite2--sys.sandbox.my.salesforce-scrt.com",
+            }
+        );
+    } catch (err) {
+        console.error("Error loading Embedded Messaging: ", err);
+    }
+}

src/digital-components/salesforce-webchat/salesforce-webchat.spec.js

@@ -1,11 +1,20 @@
 import { shallowMount } from "@vue/test-utils";
 import salesforceWebchat from "./salesforce-webchat.vue";
 import * as devHelper from "./salesforce-helper-dev";
-import * as qaHelper from "./salesforce-helper-qa";
+import * as sysHelper from "./salesforce-helper-sys";
 import * as prodHelper from "./salesforce-helper-prod";
 import { applicationConfig } from "../../constants/application-config";
 
 describe("salesforceWebchat.vue", () => {
+    beforeEach(() => {
+        window.embeddedservice_bootstrap = {
+            settings: {},
+        };
+    });
+
+    afterEach(() => {
+        delete window.embeddedservice_bootstrap;
+    });
     it("renders correctly", () => {
         const wrapper = shallowMount(salesforceWebchat);
         expect(wrapper.exists()).toBe(true);
@@ -14,7 +23,7 @@ describe("salesforceWebchat.vue", () => {
     it("has the correct default data", () => {
         const wrapper = shallowMount(salesforceWebchat);
         expect(wrapper.vm.$data).toEqual({
-            isAgentAvailable: false,
+            isWebchatLoaded: false,
             isWebchatOpen: false,
         });
     });
@@ -33,7 +42,7 @@ describe("salesforceWebchat.vue", () => {
 
         applicationConfig.CURRENT_ENVIRONMENT = "QA";
         wrapper = shallowMount(salesforceWebchat);
-        const mockQa = jest.spyOn(qaHelper, "initializeSalesforceWebchatForQa");
+        const mockQa = jest.spyOn(sysHelper, "initializeSalesforceWebchatForSys");
         wrapper.vm.initializeSalesforceWebchat();
         expect(mockQa).toHaveBeenCalled();
 

src/digital-components/salesforce-webchat/salesforce-webchat.vue

@@ -6,6 +6,7 @@
 // Supporting files
 import { initializeSalesforceWebchatForDev } from "./salesforce-helper-dev";
 import { initializeSalesforceWebchatForQa } from "./salesforce-helper-qa";
+import { initializeSalesforceWebchatForSys } from "./salesforce-helper-sys";
 import { initializeSalesforceWebchatForProd } from "./salesforce-helper-prod";
 import { applicationConfig } from "@/constants/application-config";
 import { webchatHelper } from "@/helpers/webchat-helper";
@@ -16,7 +17,7 @@ export default {
     mixins: [analyticsMixin],
     data() {
         return {
-            isAgentAvailable: false,
+            isWebchatLoaded: false,
             isWebchatOpen: false,
         };
     },
@@ -33,28 +34,12 @@ export default {
     mounted() {
         // Load in script from salesforce CDN
         const script = document.createElement("script");
-        script.src = "https://service.force.com/embeddedservice/5.0/esw.min.js";
+        script.src = this.webChatScriptSrc;
         script.onload = this.initializeSalesforceWebchat;
         document.body.appendChild(script);
-
-        // Notify funnel-header about Salesforce chat open/close state
-        this._salesforceChatOpenObserver = new MutationObserver(() => {
-            const isOpen = !!document.querySelector(".embeddedServiceSidebar");
-            window.dispatchEvent(
-                new CustomEvent("salesforce-chat-visibility", { detail: { open: isOpen } })
-            );
-        });
-        this._salesforceChatOpenObserver.observe(document.body, {
-            childList: true,
-            subtree: true,
-        });
     },
     beforeUnmount() {
         // Clean up event listeners and observers
-        window.removeEventListener(
-            "salesforce-chat-visibility",
-            this._handleSalesforceChatVisibility
-        );
         window.removeEventListener("sierra-chat-transfer", this._handleSierraToSalesforceTransfer);
         if (this._salesforceChatOpenObserver) {
             this._salesforceChatOpenObserver.disconnect();
@@ -73,7 +58,7 @@ export default {
                     break;
                 case "QA":
                 case "SysTest":
-                    initializeSalesforceWebchatForQa(
+                    initializeSalesforceWebchatForSys(
                         this.modifyEmbeddedSvcCallback,
                         this.finishedLoadingCallback,
                         this.onWebchatOpenCallback,
@@ -92,16 +77,13 @@ export default {
             }
         },
         modifyEmbeddedSvcCallback() {
-            window.embedded_svc.settings.avatarImgURL = require("@/assets/img/salesforce-webchat/avatar_webchat.png");
+            window.embeddedservice_bootstrap.settings.hideChatButtonOnLoad = true;
-            window.embedded_svc.settings.prechatBackgroundImgURL = require("@/assets/img/salesforce-webchat/safelite_logo_webchat.png");
+            window.addEventListener("onEmbeddedMessagingConversationStarted", () => {
-            window.embedded_svc.settings.smallCompanyLogoImgURL = require("@/assets/img/salesforce-webchat/minimized_chat_bubble_webchat.png");
-            window.embedded_svc.settings.displayHelpButton = false;
-            window.embedded_svc.addEventHandler("onChatEstablished", () => {
                 this.pushEventForChatsToGA("support_chat", "chat_opened", "Live Agent", true);
             });
         },
         finishedLoadingCallback(data) {
-            this.isAgentAvailable = data.isAgentAvailable;
+            this.isWebchatLoaded = true;
             this.updateShouldShowWebchatButton();
         },
         onWebchatOpenCallback() {
@@ -117,11 +99,24 @@ export default {
         updateShouldShowWebchatButton() {
             this.webchatGlobalNonpersistedState.showWebchatButton =
                 !this.hideSalesforceWebchatLaunchButton &&
-                this.isAgentAvailable &&
+                this.isWebchatLoaded &&
                 !this.isWebchatOpen;
         },
     },
-    computed: {},
+    computed: {
+        webChatScriptSrc() {
+            switch (applicationConfig.CURRENT_ENVIRONMENT) {
+                case "Prod":
+                    return "https://safelite2.my.salesforce.com/embeddedservice/5.0/esw.min.js";
+                case "QA":
+                case "SysTest":
+                    return "https://safelite2--sys.sandbox.my.site.com/ESWSalesCentralTFN1767797265631/assets/js/bootstrap.min.js";
+                case "Dev":
+                case "Localhost":
+                    return "https://safelite2--dev.sandbox.my.site.com/ESWSalesCentralTFN1755660094477/assets/js/bootstrap.min.js";
+            }
+        },
+    },
     components: {},
 };
 </script>

src/digital-components/sierra-webchat/sierra-webchat.spec.js

@@ -77,25 +77,4 @@ describe("sierraWebchat.vue", () => {
             expect.objectContaining({ type: "sierra-chat-transfer" })
         );
     });
-
-    it("handles sierra-chat-transfer event and starts Salesforce chat with prepopulated fields", () => {
-        const transfer = {
-            data: {
-                first_name: "A",
-                last_name: "B",
-                email: "a@b.com",
-                chat_summary: "summary",
-            },
-        };
-        const event = new CustomEvent("sierra-chat-transfer", { detail: transfer });
-        window.dispatchEvent(event);
-        expect(window.sierraChat.closeChatModal).toHaveBeenCalled();
-        expect(window.embedded_svc.settings.prepopulatedPrechatFields).toEqual({
-            FirstName: "A",
-            LastName: "B",
-            Email: "a@b.com",
-            Subject: "summary",
-        });
-        expect(window.embedded_svc.liveAgentAPI.startChat).toHaveBeenCalled();
-    });
 });

src/digital-components/sierra-webchat/sierra-webchat.vue

@@ -139,8 +139,8 @@ export default {
             // Pass data to Salesforce chat if available
             const transfer = event.detail;
             if (
-                window.embedded_svc &&
+                window.embeddedservice_bootstrap &&
-                typeof window.embedded_svc.bootstrapEmbeddedService === "function"
+                typeof window.embeddedservice_bootstrap.bootstrapEmbeddedService === "function"
             ) {
                 if (
                     transfer &&
@@ -149,29 +149,21 @@ export default {
                     transfer.data.last_name &&
                     transfer.data.email
                 ) {
-                    window.embedded_svc.settings.prepopulatedPrechatFields = {
+                    window.embeddedservice_bootstrap.prechatAPI.setHiddenPrechatFields({
+                        ScarlettAISummary: transfer.data.chat_summary,
                         FirstName: transfer.data.first_name,
                         LastName: transfer.data.last_name,
                         Email: transfer.data.email,
-                        Subject: transfer.data.chat_summary,
+                    });
-                    };
-                    window.embedded_svc.settings.extraPrechatFormDetails = [
-                        {
-                            label: "Scarlett AI Summary",
-                            value: transfer.data.chat_summary,
-                            transcriptFields: ["Scarlett_AI_Summary__c"],
-                            displayToAgent: true,
-                        },
-                    ];
                     if (
-                        window.embedded_svc.liveAgentAPI &&
+                        window.embeddedservice_bootstrap.utilAPI &&
-                        typeof window.embedded_svc.liveAgentAPI.startChat === "function"
+                        typeof window.embeddedservice_bootstrap.utilAPI.launchChat === "function"
                     ) {
-                        window.embedded_svc.liveAgentAPI.startChat();
+                        window.embeddedservice_bootstrap.utilAPI.launchChat();
                         return;
                     }
                 }
-                window.embedded_svc.bootstrapEmbeddedService();
+                window.embeddedservice_bootstrap.utilAPI.launchChat();
             }
         };
         window.addEventListener("sierra-chat-transfer", this._handleSierraTransfer);

src/fmg-components/funnel-header/funnel-header.vue

@@ -59,7 +59,6 @@ export default {
         return {
             globalAlertMessages: [],
             sierraChatOpen: false,
-            salesforceChatOpen: false,
             isSalesforceTransferInProgress: false,
             isScrolled: false,
         };
@@ -84,10 +83,6 @@ export default {
             if (this.sierraChatOpen) {
                 return false;
             }
-            // Hide the chat icon if Salesforce chat is open or transfer is in progress
-            if (this.salesforceChatOpen || this.isSalesforceTransferInProgress) {
-                return false;
-            }
             // Show if either Sierra is enabled or Salesforce button is available and not hidden by page
             return (
                 (this.webchatGlobalNonpersistedState.shouldLaunchSierra ||
@@ -173,29 +168,12 @@ export default {
         };
         window.addEventListener("sierra-chat-visibility", this._handleSierraChatVisibility);
 
-        // Listen for Salesforce chat open/close events from salesforce-webchat
-        this._handleSalesforceChatVisibility = (event) => {
-            this.salesforceChatOpen = !!(event.detail && event.detail.open === true);
-        };
-        window.addEventListener("salesforce-chat-visibility", this._handleSalesforceChatVisibility);
-
         // Listen for transfer event to set transfer-in-progress flag
         this._handleSierraToSalesforceTransfer = () => {
             this.isSalesforceTransferInProgress = true;
         };
         window.addEventListener("sierra-chat-transfer", this._handleSierraToSalesforceTransfer);
 
-        // Reset transfer flag when Salesforce chat opens
-        this._handleSalesforceChatOpened = (event) => {
-            if (event.detail && event.detail.open === true) {
-                this.isSalesforceTransferInProgress = false;
-                this.salesforceChatOpen = true;
-            } else {
-                this.salesforceChatOpen = false;
-            }
-        };
-        window.addEventListener("salesforce-chat-visibility", this._handleSalesforceChatOpened);
-
         // Add scroll listener for header shadow effect
         this._handleScroll = () => {
             this.isScrolled = window.scrollY > 0;
@@ -205,12 +183,7 @@ export default {
     beforeUnmount() {
         window.removeEventListener("sierra-chat-closed", this._handleSierraChatClosed);
         window.removeEventListener("sierra-chat-visibility", this._handleSierraChatVisibility);
-        window.removeEventListener(
-            "salesforce-chat-visibility",
-            this._handleSalesforceChatVisibility
-        );
         window.removeEventListener("sierra-chat-transfer", this._handleSierraToSalesforceTransfer);
-        window.removeEventListener("salesforce-chat-visibility", this._handleSalesforceChatOpened);
         window.removeEventListener("scroll", this._handleScroll);
     },
 };

src/helpers/webchat-helper.js

@@ -11,7 +11,7 @@ export const webchatHelper = () => {
         if (webchatGlobalNonpersistedState.shouldLaunchSierra) {
             window.dispatchEvent(new CustomEvent("launch-sierra-webchat")); // launches the sierra chat
         } else {
-            window.embedded_svc.bootstrapEmbeddedService(); // launches the salesForce prechat form
+            window.embeddedservice_bootstrap.utilAPI.launchChat(); // launches the salesForce prechat form
         }
     }