CASH-313 | First implementation

This commit is contained in:
Scott Kiener 2025-05-16 08:42:10 -04:00
parent 82182205c0
commit 8a770d20a2
3 changed files with 54 additions and 13 deletions

View file

@ -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() {
var initESW = function (gslbBaseURL) {
let embedded_svc = window.embedded_svc;
function setupCustomSettings(modifyEmbeddedSvcCallback, finishedLoadingCallback, onWebchatOpenCallback, onWebchatCloseCallback) {
modifyEmbeddedSvcCallback();
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)

View file

@ -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>

View file

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