CASH-313 | Utilize composable and move webchat to app.vue

Also removed an unused reference to experiment-mixin in index.js
2025-05-16 10:53:59 -04:00 · 2025-05-16 10:53:59 -04:00 · ff0b9fe1d1
commit ff0b9fe1d1
parent 8a770d20a2
6 changed files with 98 additions and 41 deletions
--- a/src/App.vue
+++ b/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,
    },
 };

--- a/src/digital-components/salesforce-webchat/salesforce-helper-qa.js
+++ b/src/digital-components/salesforce-webchat/salesforce-helper-qa.js
@ -8,16 +8,31 @@ The code below is generated from salesforce but modified in the following ways:
 	  and the wrapper exported function `initializeSalesforceWebChatForQa`
 */

-function setupCustomSettings(modifyEmbeddedSvcCallback, finishedLoadingCallback, onWebchatOpenCallback, onWebchatCloseCallback) {
+function setupCustomSettings(
+    modifyEmbeddedSvcCallback,
+    finishedLoadingCallback,
+    onWebchatOpenCallback,
+    onWebchatCloseCallback
+) {
    modifyEmbeddedSvcCallback();
    embedded_svc.addEventHandler("onSettingsCallCompleted", finishedLoadingCallback);
    embedded_svc.addEventHandler("afterMaximize", onWebchatOpenCallback);
    embedded_svc.addEventHandler("afterDestroy", onWebchatCloseCallback);
 }

-export function initializeSalesforceWebchatForQa(modifyEmbeddedSvcCallback, finishedLoadingCallback, onWebchatOpenCallback, onWebchatCloseCallback) {
+export function initializeSalesforceWebchatForQa(
+    modifyEmbeddedSvcCallback,
+    finishedLoadingCallback,
+    onWebchatOpenCallback,
+    onWebchatCloseCallback
+) {
    var initESW = function (gslbBaseURL) {
-        setupCustomSettings(modifyEmbeddedSvcCallback, finishedLoadingCallback, onWebchatOpenCallback, onWebchatCloseCallback);
+        setupCustomSettings(
+            modifyEmbeddedSvcCallback,
+            finishedLoadingCallback,
+            onWebchatOpenCallback,
+            onWebchatCloseCallback
+        );
        embedded_svc.settings.displayHelpButton = false; //Or false
        embedded_svc.settings.language = ""; //For example, enter 'en' or 'en-US'

--- a/src/digital-components/salesforce-webchat/salesforce-webchat.vue
+++ b/src/digital-components/salesforce-webchat/salesforce-webchat.vue
@ -1,10 +1,5 @@
 <template>
-    <span class="salesforce-webchat">
-        <button
-            v-show="shouldShowWebchatButton"
-            v-on:click="webchatClicked"
-            class="salesforce-chat-button"></button>
-    </span>
+    <span style="display: none"></span>
 </template>

 <script>
@ -13,6 +8,7 @@ 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",
@ -28,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");
@ -44,20 +44,21 @@ export default {
                case "QA":
                case "SysTest":
                case "Localhost":
-                    initializeSalesforceWebchatForQa(this.modifyEmbeddedSvcCallback, this.finishedLoadingCallback, this.onWebchatOpenCallback, this.onWebchatCloseCallback); // I think that I should try putting something in the store for webchat so that it is available between pages, then a computed inside the funnel header to show the button. the button can also depend upon a flag inside funnel header still
+                    initializeSalesforceWebchatForQa(
+                        this.modifyEmbeddedSvcCallback,
+                        this.finishedLoadingCallback,
+                        this.onWebchatOpenCallback,
+                        this.onWebchatCloseCallback
+                    );
                    break;
                case "Dev":
                    initializeSalesforceWebchatForDev();
                    break;
            }
        },
-        webchatClicked(event) {
-            event.preventDefault(); // avoid validation firing
-            window.embedded_svc.bootstrapEmbeddedService(); // launches the prechat form
-        },
        modifyEmbeddedSvcCallback() {
            window.embedded_svc.settings.avatarImgURL =
-                "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/avatar_webchat.png"
+                "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/avatar_webchat.png";
            window.embedded_svc.settings.prechatBackgroundImgURL =
                "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite_logo_webchat.png";
            window.embedded_svc.settings.smallCompanyLogoImgURL =
@ -65,39 +66,32 @@ export default {
        },
        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 
+            // 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(data) {
+        onWebchatCloseCallback() {
            this.isWebchatOpen = false;
+            this.updateShouldShowWebchatButton();
+        },
+        updateShouldShowWebchatButton() {
+            this.webchatGlobalNonpersistedState.showWebchatButton = (
+                !this.hideSalesforceWebchatLaunchButton &&
+                this.isAgentAvailable &&
+                !this.isWebchatOpen
+            );
        }
    },
-    computed: {
-        shouldShowWebchatButton() {
-            return !this.hideSalesforceWebchatLaunchButton && this.isAgentAvailable && !this.isWebchatOpen;
-        },
-    },
+    computed: {},
    components: {},
 };
 </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;
--- a/src/fmg-components/funnel-header/funnel-header.vue
+++ b/src/fmg-components/funnel-header/funnel-header.vue
@ -2,8 +2,12 @@
    <div class="funnel-header" v-if="imageSrc">
        <div class="d-flex justify-content-between align-items-center">
            <div class="button-container">
-                <salesforceWebchat
-                    :hideSalesforceWebchatLaunchButton="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" />
@ -37,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
@ -52,15 +56,22 @@ export default {
    },
    props: {
        cmsWidgetName: String,
-        hideSalesforceWebchatLaunchButton: {
+        shouldHideWebchatButtonOnPage: {
            type: Boolean,
            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) {
@ -75,11 +86,14 @@ export default {
            }
            this.globalAlertMessages.push(alertToPush);
        },
+        webchatClicked(event) {
+            event.preventDefault(); // avoid validation firing
+            this.launchWebchat();
+        },
    },
    components: {
        alert,
        menuModal,
-        salesforceWebchat,
        progressBar,
    },
    mounted() {
@ -127,5 +141,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>
--- a/src/helpers/webchat-helper.js
+++ b/src/helpers/webchat-helper.js
@ -0,0 +1,20 @@
+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 };
+};
--- a/src/store/index.js
+++ b/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 = () => {