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

Also removed an unused reference to experiment-mixin in index.js

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,
     },
 };
 

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'
 

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

@@ -1,10 +1,5 @@
 <template>
-    <span class="salesforce-webchat">
+    <span style="display: none"></span>
-        <button
-            v-show="shouldShowWebchatButton"
-            v-on:click="webchatClicked"
-            class="salesforce-chat-button"></button>
-    </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
             //   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: {
+    computed: {},
-        shouldShowWebchatButton() {
-            return !this.hideSalesforceWebchatLaunchButton && this.isAgentAvailable && !this.isWebchatOpen;
-        },
-    },
     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;

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
+                <span class="webchat">
-                    :hideSalesforceWebchatLaunchButton="hideSalesforceWebchatLaunchButton" />
+                    <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>

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 };
+};

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 = () => {