jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
CASH-313 | Finish salesforce webchat implementation
This commit is contained in:
scottkiener-at-safelite 2025-05-19 15:45:13 -04:00 committed by GitHub
commit aac31a353d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 227 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/App.vue
View file

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

BIN
src/assets/img/salesforce-webchat/avatar_webchat.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 503 B

BIN
src/assets/img/salesforce-webchat/minimized_chat_bubble_webchat.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 622 B

BIN
src/assets/img/salesforce-webchat/safelite_logo_webchat.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

44
src/digital-components/salesforce-webchat/salesforce-helper-dev.js
View file

@ -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
and the wrapper exported function `initializeSalesforceWebChatForDev`
* Copy the entire contents of the second <script> tag inside the 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",

40
src/digital-components/salesforce-webchat/salesforce-helper-prod.js
View file

@ -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
and the wrapper exported function `initializeSalesforceWebChatForProd`
* Copy the entire contents of the second <script> tag inside the 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 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",

42
src/digital-components/salesforce-webchat/salesforce-helper-qa.js
View file

@ -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
and the wrapper exported function `initializeSalesforceWebChatForQa`
* Copy the entire contents of the second <script> tag inside the 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",

26
src/digital-components/salesforce-webchat/salesforce-helper.spec.js
View file

@ -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");
});
});
});
});

5
src/digital-components/salesforce-webchat/salesforce-webchat.spec.js
View file

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

74
src/digital-components/salesforce-webchat/salesforce-webchat.vue
View file

@ -1,7 +1,5 @@
<template>
<span class="salesforce-webchat">
<button v-show="hideSalesforceWebchatLaunchButton" class="salesforce-chat-button"></button>
</span>
<span style="display: none"></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;

40
src/fmg-components/funnel-header/funnel-header.vue
View file

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

19
src/helpers/webchat-helper.js Normal file
View file

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

1
src/store/index.js
View file

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