Merge pull request #2538 from Safelite/feature/salesforce-webchat-tie-in

CASH-313 | Finish salesforce webchat implementation

src/App.vue

@@ -7,6 +7,7 @@
     </router-view>
     <funnelFooter />
     <loadingModal :showLoader="shouldShowLoader" :showTextCarousel="shouldShowTextCarousel" />
+    <salesforceWebchat />
 </template>
 
 <script>
@@ -14,6 +15,7 @@ import { handleAnyComponentFocus } from "@/helpers/button-question-focus-helper"
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import { showFmgLoadingModal } from "@/helpers/loading-modal-helper";
 import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer.vue";
+import salesforceWebchat from "./digital-components/salesforce-webchat/salesforce-webchat.vue";
 
 export default {
     name: "app",
@@ -35,6 +37,7 @@ export default {
     components: {
         loadingModal,
         funnelFooter,
+        salesforceWebchat,
     },
     mounted() {
         showFmgLoadingModal(true);

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

@@ -1,24 +1,47 @@
+/* eslint-disable */
+
+function setupCustomSettings(
+    modifyEmbeddedSvcCallback,
+    finishedLoadingCallback,
+    onWebchatOpenCallback,
+    onWebchatCloseCallback
+) {
+    modifyEmbeddedSvcCallback();
+    embedded_svc.addEventHandler("onSettingsCallCompleted", finishedLoadingCallback);
+    embedded_svc.addEventHandler("afterMaximize", onWebchatOpenCallback);
+    embedded_svc.addEventHandler("afterDestroy", 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
-  * The only custom code added here is `let embedded_svc = window.embedded_svc` in the first line of the `initESW` function
+  * Copy the entire contents of the second <script> tag inside the initializeSalesforceWebchatForDev
-	  and the wrapper exported function `initializeSalesforceWebChatForDev`
+      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 initializeSalesforceWebchatForDev() {
+export function initializeSalesforceWebchatForDev(
+    modifyEmbeddedSvcCallback,
+    finishedLoadingCallback,
+    onWebchatOpenCallback,
+    onWebchatCloseCallback
+) {
     var initESW = function (gslbBaseURL) {
-        let embedded_svc = window.embedded_svc;
         embedded_svc.settings.displayHelpButton = true; //Or false
         embedded_svc.settings.language = ""; //For example, enter 'en' or 'en-US'
-
         //embedded_svc.settings.defaultMinimizedText = '...'; //(Defaults to Chat with an Expert)
         //embedded_svc.settings.disabledMinimizedText = '...'; //(Defaults to Agent Offline)
-
         //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.
@@ -31,6 +54,13 @@ export function initializeSalesforceWebchatForDev() {
         embedded_svc.settings.enabledFeatures = ["LiveAgent"];
         embedded_svc.settings.entryFeature = "LiveAgent";
 
+        setupCustomSettings(
+            modifyEmbeddedSvcCallback,
+            finishedLoadingCallback,
+            onWebchatOpenCallback,
+            onWebchatCloseCallback
+        );
+
         embedded_svc.init(
             "https://safelite2--dev.sandbox.my.salesforce.com",
             "https://safelite2--dev.sandbox.my.salesforce-sites.com/chat",

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

@@ -1,13 +1,40 @@
+/* eslint-disable */
+
+function setupCustomSettings(
+    modifyEmbeddedSvcCallback,
+    finishedLoadingCallback,
+    onWebchatOpenCallback,
+    onWebchatCloseCallback
+) {
+    modifyEmbeddedSvcCallback();
+    embedded_svc.addEventHandler("onSettingsCallCompleted", finishedLoadingCallback);
+    embedded_svc.addEventHandler("afterMaximize", onWebchatOpenCallback);
+    embedded_svc.addEventHandler("afterDestroy", 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
-  * The only custom code added here is `let embedded_svc = window.embedded_svc` in the first line of the `initESW` function
+  * Copy the entire contents of the second <script> tag inside the initializeSalesforceWebchatForDev
-	  and the wrapper exported function `initializeSalesforceWebChatForProd`
+      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 initializeSalesforceWebchatForProd(embedded_svc) {
+export function initializeSalesforceWebchatForProd(
+    modifyEmbeddedSvcCallback,
+    finishedLoadingCallback,
+    onWebchatOpenCallback,
+    onWebchatCloseCallback
+) {
     var initESW = function (gslbBaseURL) {
         let embedded_svc = window.embedded_svc;
         embedded_svc.settings.displayHelpButton = true; //Or false
@@ -31,6 +58,13 @@ export function initializeSalesforceWebchatForProd(embedded_svc) {
         embedded_svc.settings.enabledFeatures = ["LiveAgent"];
         embedded_svc.settings.entryFeature = "LiveAgent";
 
+        setupCustomSettings(
+            modifyEmbeddedSvcCallback,
+            finishedLoadingCallback,
+            onWebchatOpenCallback,
+            onWebchatCloseCallback
+        );
+
         embedded_svc.init(
             "https://safelite2.my.salesforce.com",
             "https://safelite2.my.salesforce-sites.com/chat",

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

@@ -1,16 +1,41 @@
+/* eslint-disable */
+
+function setupCustomSettings(
+    modifyEmbeddedSvcCallback,
+    finishedLoadingCallback,
+    onWebchatOpenCallback,
+    onWebchatCloseCallback
+) {
+    modifyEmbeddedSvcCallback();
+    embedded_svc.addEventHandler("onSettingsCallCompleted", finishedLoadingCallback);
+    embedded_svc.addEventHandler("afterMaximize", onWebchatOpenCallback);
+    embedded_svc.addEventHandler("afterDestroy", 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
-  * The only custom code added here is `let embedded_svc = window.embedded_svc` in the first line of the `initESW` function
+  * Copy the entire contents of the second <script> tag inside the initializeSalesforceWebchatForQa
-	  and the wrapper exported function `initializeSalesforceWebChatForQa`
+      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 initializeSalesforceWebchatForQa() {
+export function initializeSalesforceWebchatForQa(
+    modifyEmbeddedSvcCallback,
+    finishedLoadingCallback,
+    onWebchatOpenCallback,
+    onWebchatCloseCallback
+) {
     var initESW = function (gslbBaseURL) {
-        let embedded_svc = window.embedded_svc;
-
         embedded_svc.settings.displayHelpButton = true; //Or false
         embedded_svc.settings.language = ""; //For example, enter 'en' or 'en-US'
 
@@ -32,6 +57,13 @@ export function initializeSalesforceWebchatForQa() {
         embedded_svc.settings.enabledFeatures = ["LiveAgent"];
         embedded_svc.settings.entryFeature = "LiveAgent";
 
+        setupCustomSettings(
+            modifyEmbeddedSvcCallback,
+            finishedLoadingCallback,
+            onWebchatOpenCallback,
+            onWebchatCloseCallback
+        );
+
         embedded_svc.init(
             "https://safelite2--safeliteua.sandbox.my.salesforce.com",
             "https://safelite2--safeliteua.sandbox.my.salesforce-sites.com/chat",

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

@@ -2,12 +2,6 @@ import * as salesforceWebchatHelperdev from "./salesforce-helper-dev";
 import * as salesforceWebchatHelperqa from "./salesforce-helper-qa";
 import * as salesforceWebchatHelperprod from "./salesforce-helper-prod";
 
-const mockEmbeddedSvc = {
-    settings: {},
-    init: jest.fn(),
-    testFlag: true,
-};
-
 describe("Salesforce Webchat Helper Tests", () => {
     describe("Files and exposed methods exist", () => {
         it("exposes initialization methods", () => {
@@ -21,23 +15,5 @@ describe("Salesforce Webchat Helper Tests", () => {
                 "function"
             );
         });
-    }),
-        describe("Custom code added correctly", () => {
-            it("defines a local variable 'embedded_svc' in the initESW method", () => {
-                mockEmbeddedSvc.testFlag = "dev";
-                window.embedded_svc = mockEmbeddedSvc;
-                salesforceWebchatHelperdev.initializeSalesforceWebchatForDev();
-                expect(embedded_svc.testFlag).toBe("dev");
-
-                mockEmbeddedSvc.testFlag = "qa";
-                window.embedded_svc = mockEmbeddedSvc;
-                salesforceWebchatHelperqa.initializeSalesforceWebchatForQa();
-                expect(embedded_svc.testFlag).toBe("qa");
-
-                mockEmbeddedSvc.testFlag = "prod";
-                window.embedded_svc = mockEmbeddedSvc;
-                salesforceWebchatHelperprod.initializeSalesforceWebchatForProd();
-                expect(embedded_svc.testFlag).toBe("prod");
-            });
     });
 });

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

@@ -13,7 +13,10 @@ describe("salesforceWebchat.vue", () => {
 
     it("has the correct default data", () => {
         const wrapper = shallowMount(salesforceWebchat);
-        expect(wrapper.vm.$data).toEqual({});
+        expect(wrapper.vm.$data).toEqual({
+            isAgentAvailable: false,
+            isWebchatOpen: false,
+        });
     });
 
     it("has the correct default props", () => {

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

@@ -1,7 +1,5 @@
 <template>
-    <span class="salesforce-webchat">
+    <span style="display: none"></span>
-        <button v-show="hideSalesforceWebchatLaunchButton" class="salesforce-chat-button"></button>
-    </span>
 </template>
 
 <script>
@@ -10,11 +8,15 @@ import { initializeSalesforceWebchatForDev } from "./salesforce-helper-dev";
 import { initializeSalesforceWebchatForQa } from "./salesforce-helper-qa";
 import { initializeSalesforceWebchatForProd } from "./salesforce-helper-prod";
 import { applicationConfig } from "@/constants/application-config";
+import { webchatHelper } from "@/helpers/webchat-helper";
 
 export default {
     name: "salesforceWebchat",
     data() {
-        return {};
+        return {
+            isAgentAvailable: false,
+            isWebchatOpen: false,
+        };
     },
     props: {
         hideSalesforceWebchatLaunchButton: {
@@ -22,6 +24,10 @@ export default {
             default: false,
         },
     },
+    setup() {
+        const { webchatGlobalNonpersistedState } = webchatHelper();
+        return { webchatGlobalNonpersistedState };
+    },
     mounted() {
         // Load in script from salesforce CDN
         const script = document.createElement("script");
@@ -33,18 +39,59 @@ export default {
         initializeSalesforceWebchat() {
             switch (applicationConfig.CURRENT_ENVIRONMENT) {
                 case "Prod":
-                    initializeSalesforceWebchatForProd();
+                    initializeSalesforceWebchatForProd(
+                        this.modifyEmbeddedSvcCallback,
+                        this.finishedLoadingCallback,
+                        this.onWebchatOpenCallback,
+                        this.onWebchatCloseCallback
+                    );
                     break;
                 case "QA":
                 case "SysTest":
-                    initializeSalesforceWebchatForQa();
+                    initializeSalesforceWebchatForQa(
+                        this.modifyEmbeddedSvcCallback,
+                        this.finishedLoadingCallback,
+                        this.onWebchatOpenCallback,
+                        this.onWebchatCloseCallback
+                    );
                     break;
                 case "Dev":
                 case "Localhost":
-                    initializeSalesforceWebchatForDev();
+                    initializeSalesforceWebchatForDev(
+                        this.modifyEmbeddedSvcCallback,
+                        this.finishedLoadingCallback,
+                        this.onWebchatOpenCallback,
+                        this.onWebchatCloseCallback
+                    );
                     break;
             }
         },
+        modifyEmbeddedSvcCallback() {
+            window.embedded_svc.settings.avatarImgURL = require("@/assets/img/salesforce-webchat/avatar_webchat.png");
+            window.embedded_svc.settings.prechatBackgroundImgURL = require("@/assets/img/salesforce-webchat/safelite_logo_webchat.png");
+            window.embedded_svc.settings.smallCompanyLogoImgURL = require("@/assets/img/salesforce-webchat/minimized_chat_bubble_webchat.png");
+            window.embedded_svc.settings.displayHelpButton = false;
+        },
+        finishedLoadingCallback(data) {
+            this.isAgentAvailable = data.isAgentAvailable;
+            this.updateShouldShowWebchatButton();
+        },
+        onWebchatOpenCallback() {
+            // This could be done on webchatClicked() but this eliminates some of the delay between the button disappearing and the
+            //   prechat form opening
+            this.isWebchatOpen = true;
+            this.updateShouldShowWebchatButton();
+        },
+        onWebchatCloseCallback() {
+            this.isWebchatOpen = false;
+            this.updateShouldShowWebchatButton();
+        },
+        updateShouldShowWebchatButton() {
+            this.webchatGlobalNonpersistedState.showWebchatButton =
+                !this.hideSalesforceWebchatLaunchButton &&
+                this.isAgentAvailable &&
+                !this.isWebchatOpen;
+        },
     },
     computed: {},
     components: {},
@@ -52,19 +99,6 @@ export default {
 </script>
 
 <style lang="scss">
-.salesforce-webchat {
-    .salesforce-chat-button {
-        width: 1.5rem;
-        height: 1.5rem;
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' id='Layer_2' x='0' y='0' style='enable-background:new 0 0 24 24' version='1.1' viewBox='0 0 24 24'%3E%3Cstyle%3E .st0%7Bfill:%232e6fb6%7D %3C/style%3E%3Ccircle cx='12' cy='12' r='12' class='st0'/%3E%3Cpath d='M18.3 12c0 3.5-2.8 6.3-6.3 6.3-1.2 0-2.4-.4-3.4-1l-2.3.7s-.5.1-.3-.4.5-1.7.7-2.2c-.6-1-1-2.1-1-3.3 0-3.5 2.8-6.3 6.3-6.3 3.5-.1 6.3 2.7 6.3 6.2z' style='fill:%23fff'/%3E%3Ccircle cx='10.2' cy='12' r='.6' class='st0'/%3E%3Ccircle cx='12' cy='12' r='.6' class='st0'/%3E%3Ccircle cx='13.8' cy='12' r='.6' class='st0'/%3E%3C/svg%3E");
-        background-repeat: no-repeat;
-        background-size: 1.5rem 1.5rem;
-        background-position: center;
-        border: none;
-        background-color: transparent;
-    }
-}
-
 .dockableContainer {
     &.showDockableContainer {
         font-family: AvertaRegular;

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

@@ -2,7 +2,12 @@
     <div class="funnel-header" v-if="imageSrc">
         <div class="d-flex justify-content-between align-items-center">
             <div class="button-container">
-                <!-- HIDDEN FOR 05.08 <salesforceWebchat hideSalesforceWebchatLaunchButton /> -->
+                <span class="webchat">
+                    <button
+                        v-show="shouldShowWebchatButton"
+                        v-on:click="webchatClicked"
+                        class="chat-button"></button>
+                </span>
             </div>
             <div class="site-logo">
                 <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
@@ -36,8 +41,8 @@ import alert from "@/ux-components/alert/alert";
 import eventBus from "@/helpers/event-bus/event-bus";
 import { globalEvents } from "@/constants/events";
 import menuModal from "@/fmg-components/funnel-header/menu-modal/menu-modal";
-//import salesforceWebchat from "../../digital-components/salesforce-webchat/salesforce-webchat.vue";
 import progressBar from "@/fmg-components/funnel-header/progress-bar/progress-bar";
+import { webchatHelper } from "@/helpers/webchat-helper";
 
 // Constants
 const ALERT_DURATION = 3000; // millisecond time to display alert before dismissal
@@ -51,15 +56,25 @@ export default {
     },
     props: {
         cmsWidgetName: String,
-        hideSalesforceWebchatLaunchButton: {
+        shouldHideWebchatButtonOnPage: {
             type: Boolean,
-            default: true,
+            default: false,
         },
     },
+    setup() {
+        const { webchatGlobalNonpersistedState, launchWebchat } = webchatHelper();
+        return { webchatGlobalNonpersistedState, launchWebchat };
+    },
     computed: {
         imageSrc() {
             return this.getCmsContent(this.cmsWidgetName, "LogoImage");
         },
+        shouldShowWebchatButton() {
+            return (
+                !this.shouldHideWebchatButtonOnPage &&
+                this.webchatGlobalNonpersistedState.showWebchatButton
+            );
+        },
     },
     methods: {
         pushGlobalAlert(alertToPush, isAutoDismissing) {
@@ -74,11 +89,14 @@ export default {
             }
             this.globalAlertMessages.push(alertToPush);
         },
+        webchatClicked(event) {
+            event.preventDefault(); // avoid validation firing
+            this.launchWebchat();
+        },
     },
     components: {
         alert,
         menuModal,
-        //salesforceWebchat,
         progressBar,
     },
     mounted() {
@@ -126,5 +144,17 @@ export default {
     :deep(.menu-modal-container) {
         display: none; // This is temporary until the hamburger menu is re-implemented for use with the progress bar
     }
+    .webchat {
+        .chat-button {
+            width: 1.5rem;
+            height: 1.5rem;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' id='Layer_2' x='0' y='0' style='enable-background:new 0 0 24 24' version='1.1' viewBox='0 0 24 24'%3E%3Cstyle%3E .st0%7Bfill:%232e6fb6%7D %3C/style%3E%3Ccircle cx='12' cy='12' r='12' class='st0'/%3E%3Cpath d='M18.3 12c0 3.5-2.8 6.3-6.3 6.3-1.2 0-2.4-.4-3.4-1l-2.3.7s-.5.1-.3-.4.5-1.7.7-2.2c-.6-1-1-2.1-1-3.3 0-3.5 2.8-6.3 6.3-6.3 3.5-.1 6.3 2.7 6.3 6.2z' style='fill:%23fff'/%3E%3Ccircle cx='10.2' cy='12' r='.6' class='st0'/%3E%3Ccircle cx='12' cy='12' r='.6' class='st0'/%3E%3Ccircle cx='13.8' cy='12' r='.6' class='st0'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-size: 1.5rem 1.5rem;
+            background-position: center;
+            border: none;
+            background-color: transparent;
+        }
+    }
 }
 </style>

src/helpers/webchat-helper.js

@@ -0,0 +1,19 @@
+import { reactive } from "vue";
+
+// state encapsulated and managed by the composable
+const webchatGlobalNonpersistedState = reactive({
+    showWebchatButton: false,
+    shouldLaunchSierra: false,
+});
+
+export const webchatHelper = () => {
+    function launchWebchat() {
+        if (webchatGlobalNonpersistedState.shouldLaunchSierra) {
+            // do sierra logic here
+        } else {
+            window.embedded_svc.bootstrapEmbeddedService(); // launches the salesForce prechat form
+        }
+    }
+
+    return { webchatGlobalNonpersistedState, launchWebchat };
+};

src/store/index.js

@@ -55,7 +55,6 @@ import {
 } from "@/helpers/recal-helper";
 import { externalParameterStatus } from "@/constants/external-parameters";
 import { experimentSettings } from "@/constants/experiments";
-import experimentMixin from "@/mixins/experiment-mixin.js";
 
 // Export State
 const getDefaultState = () => {