CASH-313 | First implementation

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

@@ -1,3 +1,4 @@
+/* eslint-disable */
 /*
 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
@@ -7,11 +8,17 @@ The code below is generated from salesforce but modified in the following ways:
 	  and the wrapper exported function `initializeSalesforceWebChatForQa`
 */
 
-export function initializeSalesforceWebchatForQa() {
+function setupCustomSettings(modifyEmbeddedSvcCallback, finishedLoadingCallback, onWebchatOpenCallback, onWebchatCloseCallback) {
-    var initESW = function (gslbBaseURL) {
+    modifyEmbeddedSvcCallback();
-        let embedded_svc = window.embedded_svc;
+    embedded_svc.addEventHandler("onSettingsCallCompleted", finishedLoadingCallback);
+    embedded_svc.addEventHandler("afterMaximize", onWebchatOpenCallback);
+    embedded_svc.addEventHandler("afterDestroy", onWebchatCloseCallback);
+}
 
-        embedded_svc.settings.displayHelpButton = true; //Or false
+export function initializeSalesforceWebchatForQa(modifyEmbeddedSvcCallback, finishedLoadingCallback, onWebchatOpenCallback, onWebchatCloseCallback) {
+    var initESW = function (gslbBaseURL) {
+        setupCustomSettings(modifyEmbeddedSvcCallback, finishedLoadingCallback, onWebchatOpenCallback, onWebchatCloseCallback);
+        embedded_svc.settings.displayHelpButton = false; //Or false
         embedded_svc.settings.language = ""; //For example, enter 'en' or 'en-US'
 
         //embedded_svc.settings.defaultMinimizedText = '...'; //(Defaults to Chat with an Expert)

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

@@ -1,6 +1,9 @@
 <template>
     <span class="salesforce-webchat">
-        <button v-show="hideSalesforceWebchatLaunchButton" class="salesforce-chat-button"></button>
+        <button
+            v-show="shouldShowWebchatButton"
+            v-on:click="webchatClicked"
+            class="salesforce-chat-button"></button>
     </span>
 </template>
 
@@ -14,7 +17,10 @@ import { applicationConfig } from "@/constants/application-config";
 export default {
     name: "salesforceWebchat",
     data() {
-        return {};
+        return {
+            isAgentAvailable: false,
+            isWebchatOpen: false,
+        };
     },
     props: {
         hideSalesforceWebchatLaunchButton: {
@@ -37,16 +43,43 @@ export default {
                     break;
                 case "QA":
                 case "SysTest":
-                    initializeSalesforceWebchatForQa();
+                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
                     break;
                 case "Dev":
-                case "Localhost":
                     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"
+            window.embedded_svc.settings.prechatBackgroundImgURL =
+                "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite_logo_webchat.png";
+            window.embedded_svc.settings.smallCompanyLogoImgURL =
+                "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/minimized_chat_bubble_webchat";
+        },
+        finishedLoadingCallback(data) {
+            this.isAgentAvailable = data.isAgentAvailable;
+        },
+        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;
+        },
+        onWebchatCloseCallback(data) {
+            this.isWebchatOpen = false;
+        }
+    },
+    computed: {
+        shouldShowWebchatButton() {
+            return !this.hideSalesforceWebchatLaunchButton && this.isAgentAvailable && !this.isWebchatOpen;
+        },
     },
-    computed: {},
     components: {},
 };
 </script>

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

@@ -2,7 +2,8 @@
     <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 /> -->
+                <salesforceWebchat
+                    :hideSalesforceWebchatLaunchButton="hideSalesforceWebchatLaunchButton" />
             </div>
             <div class="site-logo">
                 <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
@@ -36,7 +37,7 @@ 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 salesforceWebchat from "../../digital-components/salesforce-webchat/salesforce-webchat.vue";
 import progressBar from "@/fmg-components/funnel-header/progress-bar/progress-bar";
 
 // Constants
@@ -53,7 +54,7 @@ export default {
         cmsWidgetName: String,
         hideSalesforceWebchatLaunchButton: {
             type: Boolean,
-            default: true,
+            default: false,
         },
     },
     computed: {
@@ -78,7 +79,7 @@ export default {
     components: {
         alert,
         menuModal,
-        //salesforceWebchat,
+        salesforceWebchat,
         progressBar,
     },
     mounted() {