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

Merge branch 'develop' into CASH-631

Browse source
This commit is contained in:
maguire-arman 2025-05-23 10:05:15 -04:00
commit ffc3a690ca
32 changed files with 477 additions and 256 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

13
src/digital-components/date-picker/date-picker.vue
View file

@ -859,7 +859,7 @@ export default {
}
.calendar-grid-container {
margin: 0 auto 1rem auto;
max-width: 400px;
max-width: 360px;
position: relative;
transition:
height ease 2s,
@ -869,9 +869,6 @@ export default {
justify-content: center;
align-items: center;
padding: 0;
@include media-breakpoint-up(md) {
padding: 0 0.75rem;
}
opacity: 1;
.grid-item {
@ -1004,6 +1001,7 @@ export default {
min-width: 2.5rem;
width: 2.5rem;
height: 2.5rem;
border: 2px solid transparent;
span {
&.small {
@ -1092,6 +1090,13 @@ export default {
input[type="radio"]:checked + label:after {
background-color: $black;
}
&.selectable-day {
label {
&:after {
display: none;
}
}
}
}
}

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;

6
src/fmg-components/address-questions/address-questions.vue
View file

@ -452,12 +452,6 @@ export default {
this.loadGooglePlacesAutocompleteScript();
}
},
beforeUpdate() {
// It is necessary to set focus on the street address on this lifecycle hook when this component is used in a modal.
if (!this.addressField1.matches(":focus")) {
this.addressField1.focus();
}
},
unmounted() {
this.unloadAutocomplete();
},

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

@ -2,7 +2,13 @@
<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"
type="button"
class="chat-button"></button>
</span>
</div>
<div class="site-logo">
<img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
@ -14,7 +20,7 @@
</div>
</div>
<div class="d-flex w-100">
<progressBar />
<progress-bar :page="$route.name" />
</div>
</div>
<template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id">
@ -36,8 +42,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 +57,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 +90,14 @@ export default {
}
this.globalAlertMessages.push(alertToPush);
},
webchatClicked(event) {
event.preventDefault(); // avoid validation firing
this.launchWebchat();
},
},
components: {
alert,
menuModal,
//salesforceWebchat,
progressBar,
},
mounted() {
@ -126,5 +145,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>

81
src/fmg-components/funnel-header/progress-bar/progres-bar.spec.js
View file

@ -1,81 +0,0 @@
import { shallowMount } from "@vue/test-utils";
import progressBar from "./progress-bar";
import store from "@/store";
describe("progressBar", () => {
test("progress should be 0", () => {
// Arrange
mockMixin.computed = {
pageName: () => undefined,
};
// Act
const wrapper = shallowMount(progressBar, {
mixins: [mockMixin],
});
// Assert
expect(wrapper.vm.progress).toBe(0);
wrapper.unmount();
});
});
describe("progressBar", () => {
test("progress should be 4%", () => {
// Arrange
mockMixin.computed = {
pageName: () => "vehicle",
};
// Act
const wrapper = shallowMount(progressBar, {
mixins: [mockMixin],
});
// Assert
expect(wrapper.vm.progress).toBe(4);
wrapper.unmount();
});
});
describe("progressBar", () => {
test("progress should be 48%", () => {
// Arrange
mockMixin.computed = {
pageName: () => "quote",
};
// Act
const wrapper = shallowMount(progressBar, {
mixins: [mockMixin],
});
// Assert
expect(wrapper.vm.progress).toBe(48);
wrapper.unmount();
});
});
describe("progressBar", () => {
test("progress should be 100%", () => {
// Arrange
mockMixin.computed = {
pageName: () => "confirmation",
};
// Act
const wrapper = shallowMount(progressBar, {
mixins: [mockMixin],
});
// Assert
expect(wrapper.vm.progress).toBe(100);
wrapper.unmount();
});
});
const mockMixin = {
methods: {
getProgress: jest.fn(),
},
};

68
src/fmg-components/funnel-header/progress-bar/progress-bar.spec.js Normal file
View file

@ -0,0 +1,68 @@
import { mount } from "@vue/test-utils";
import ProgressBar from "./progress-bar.vue";
jest.mock("@/constants/progress-bar-mapper", () => ({
getProgressBarPercentage: jest.fn(),
}));
import { getProgressBarPercentage } from "@/constants/progress-bar-mapper";
describe("progress-bar.vue", () => {
beforeEach(() => {
jest.useFakeTimers();
getProgressBarPercentage.mockReset();
});
afterEach(() => {
jest.clearAllTimers();
jest.useRealTimers();
});
it("renders with correct initial progress", async () => {
getProgressBarPercentage.mockReturnValueOnce(30);
const wrapper = mount(ProgressBar, {
props: { page: "page1" },
});
// Immediately after mount, width should be lastProgress (0)
expect(wrapper.find(".progress-bar-inner").attributes("style")).toContain("width: 0%");
// Advance timer to trigger animation
jest.runAllTimers();
await wrapper.vm.$nextTick();
expect(wrapper.find(".progress-bar-inner").attributes("style")).toContain("width: 30%");
});
it("animates to new progress when page prop changes", async () => {
getProgressBarPercentage.mockReturnValueOnce(30);
const wrapper = mount(ProgressBar, {
props: { page: "page1" },
});
jest.runAllTimers();
await wrapper.vm.$nextTick();
expect(wrapper.find(".progress-bar-inner").attributes("style")).toContain("width: 30%");
getProgressBarPercentage.mockReturnValueOnce(60);
await wrapper.setProps({ page: "page2" });
// Before timer, still old value
expect(wrapper.find(".progress-bar-inner").attributes("style")).toContain("width: 30%");
jest.runAllTimers();
await wrapper.vm.$nextTick();
expect(wrapper.find(".progress-bar-inner").attributes("style")).toContain("width: 60%");
});
it("clears timeout on unmount", async () => {
getProgressBarPercentage.mockReturnValueOnce(50);
const wrapper = mount(ProgressBar, {
props: { page: "page1" },
});
const clearTimeoutSpy = jest.spyOn(window, "clearTimeout");
wrapper.unmount();
expect(clearTimeoutSpy).toHaveBeenCalled();
clearTimeoutSpy.mockRestore();
});
});
const mockMixin = {
methods: {
getProgress: jest.fn(),
},
};

65
src/fmg-components/funnel-header/progress-bar/progress-bar.vue
View file

@ -1,6 +1,6 @@
<template>
<div id="progress-bar-container">
<progress v-if="progress > 0" :value="progress" max="100" v-html="progress + '%'" />
<div class="progress-bar-outer">
<div class="progress-bar-inner" :style="progressStyle"></div>
</div>
</template>
@ -8,20 +8,69 @@
import store from "@/store";
import { getProgressBarPercentage } from "@/constants/progress-bar-mapper";
// Module-level variable to persist progress across component lifecycles
let lastProgress = 0;
export default {
name: "progressBar",
data() {},
name: "progress-bar",
props: {
page: {
type: String,
required: true,
},
},
data() {
return {
displayedProgress: lastProgress,
timeoutId: null,
};
},
watch: {
page: {
immediate: true,
handler(newPage) {
const target = getProgressBarPercentage(newPage);
if (this.timeoutId) clearTimeout(this.timeoutId);
// Animate from current value to new value
this.timeoutId = setTimeout(() => {
this.displayedProgress = target;
lastProgress = target; // Update the module-level variable
}, 150);
},
},
},
beforeUnmount() {
if (this.timeoutId) clearTimeout(this.timeoutId);
},
computed: {
progress() {
return getProgressBarPercentage(this.pageName);
progressStyle() {
return {
width: this.displayedProgress + "%",
};
},
},
};
</script>
<style lang="scss">
#progress-bar-container {
padding-top: 0.75rem;
.progress-bar-outer {
background: $blue-100;
height: 10px;
position: relative;
border-radius: 10px;
width: 100%;
margin-top: 1rem;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
.progress-bar-inner {
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth width transition */
will-change: width;
height: 10px;
background-color: $blue;
position: absolute;
top: 0;
left: 0;
border-radius: 10px;
}
progress {
height: 10px;

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

37
src/layouts/customer-details/customer-details.spec.js
View file

@ -1,13 +1,5 @@
import { shallowMount, mount } from "@vue/test-utils";
import CustomerDetails from "./customer-details.vue";
import TechNotes from "./tech-notes/tech-notes.vue";
import TextboxQuestion from "@/digital-components/textbox-question/textbox-question.vue";
import PhoneNumberQuestion from "@/digital-components/phone-number-question/phone-number-question.vue";
import CheckboxQuestion from "@/digital-components/checkbox-question/checkbox-question.vue";
import TextBlock from "@/digital-components/text-block/text-block.vue";
import FunnelHeader from "@/fmg-components/funnel-header/funnel-header.vue";
import FunnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header.vue";
import Navbar from "@/fmg-components/nav-bar/nav-bar.vue";
const mockMixin = {
methods: {
@ -27,18 +19,8 @@ describe("CustomerDetails.vue", () => {
let wrapper;
beforeEach(() => {
wrapper = mount(CustomerDetails, {
wrapper = shallowMount(CustomerDetails, {
global: {
components: {
TechNotes,
TextboxQuestion,
PhoneNumberQuestion,
CheckboxQuestion,
TextBlock,
FunnelHeader,
FunnelSubHeader,
Navbar,
},
mixins: [mockMixin],
mocks: {
storeActions: mockStoreActions,
@ -60,21 +42,4 @@ describe("CustomerDetails.vue", () => {
it("Should render the CustomerDetails component", () => {
expect(wrapper.exists()).toBe(true);
});
it("Should render all child components", () => {
expect(wrapper.findComponent(TechNotes).exists()).toBe(true);
expect(wrapper.findComponent(TextboxQuestion).exists()).toBe(true);
expect(wrapper.findComponent(PhoneNumberQuestion).exists()).toBe(true);
expect(wrapper.findComponent(CheckboxQuestion).exists()).toBe(true);
expect(wrapper.findComponent(TextBlock).exists()).toBe(true);
expect(wrapper.findComponent(FunnelHeader).exists()).toBe(true);
expect(wrapper.findComponent(FunnelSubHeader).exists()).toBe(true);
expect(wrapper.findComponent(Navbar).exists()).toBe(true);
});
it("Should pass the correct props to TechNotes", () => {
const techNotes = wrapper.findComponent(TechNotes);
expect(techNotes.props("modelValue")).toBe("Initial Tech Notes");
expect(techNotes.props("textAreaLabelCopy")).toBe("Mocked CMS Content");
});
});

1
src/layouts/payment-method/payment-method.vue
View file

@ -813,6 +813,7 @@ export default {
},
isAfterpayBreakoutDisplay() {
return (
this.showInsuranceCoverageAs !== coverageStatus.PENDING &&
(!this.isRecalPriceRemove || !this.isRecalibrationOnOrder) &&
this.hasSettingEqualTo(experimentSettings.DISPLAY_AFTERPAY_BREAKOUT_DISPLAY, "true")
);

30
src/layouts/payment/payment.vue
View file

@ -64,7 +64,7 @@
<div class="payment-method-question">
<buttonQuestion
v-if="!isAfterpay"
v-if="showSwitchPaymentMethod"
groupName="payment-method"
buttonTypeString="payment-method-list-button"
:buttonTypeObject="paymentMethodListButton"
@ -292,6 +292,7 @@ export default {
availableVaps: [],
shouldBlockInteraction: false,
paymentMethodListButton: paymentMethodListButton,
showSwitchPaymentMethod: !this.isAfterpay(),
};
},
props: {
@ -514,12 +515,6 @@ export default {
}
return false;
},
isAfterpay() {
if (this.paymentType == "ap") {
return true;
}
return false;
},
shouldDisplayPiaCCAlert() {
return this.shouldDisplayPiaAlert(paymentMethods.CREDIT_CARD);
},
@ -828,6 +823,12 @@ export default {
this.backButtonAction();
}
if (event.data.indexOf("afterpayOpened") > -1) {
console.log(new Date() + ": Payment method afterpay selected");
this.updatePaymentMethod(paymentMethods.AFTERPAY);
this.showSwitchPaymentMethod = false;
}
if (event.data.indexOf("creditCardSubmit") > -1) {
console.log(new Date() + ": Payment method credit card selected");
this.updatePaymentMethod(paymentMethods.CREDIT_CARD);
@ -865,11 +866,6 @@ export default {
}
},
switchToAfterpay() {
this.dispatchStoreAction(
storeActions.SAVE_PAYMENT_METHOD_CHOICE,
paymentMethods.AFTERPAY,
false
);
const iframe = this.$refs.paymentFrame;
if (iframe) {
iframe.contentWindow.postMessage("afterpay", "*");
@ -892,6 +888,12 @@ export default {
shouldDisplayPiaAlert(payMethod) {
return this.$route?.query?.piaErrorType === payMethod;
},
isAfterpay() {
if (this.paymentType == "ap") {
return true;
}
return false;
},
},
components: {
funnelHeader,
@ -915,6 +917,10 @@ export default {
background-color: red;
}
.payment-method-question {
padding: 0 1.5rem;
}
.ui-block {
position: fixed;
top: 0;

12
src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
View file

@ -235,9 +235,11 @@ export default {
this.displayMismatchStateAndZipAlert = false;
},
async setMobileLocation() {
this.resetAlerts();
// Validate the Zip Code
if (this.internalModel.addressQuestions.zipCode === "") {
if (
this.internalModel.addressQuestions.zipCode === "" ||
this.internalModel.addressQuestions.zipCode.length !== 5
) {
this.setMobileLocationInvalid(true);
return;
}
@ -247,10 +249,12 @@ export default {
);
if (!zipCodeData.isValid) {
this.displayMismatchStateAndZipAlert = false;
this.displayInvalidZipAlert = true;
this.setMobileLocationInvalid(true);
return;
} else if (zipCodeData.state != this.internalModel.addressQuestions.state) {
this.displayInvalidZipAlert = false;
this.displayMismatchStateAndZipAlert = true;
this.setMobileLocationInvalid(true);
return;
@ -258,6 +262,9 @@ export default {
this.internalModel.addressQuestions.zipCode !==
this.modelValue.addressQuestions.zipCode
) {
//reset alerts
this.resetAlerts();
// retrieve mobile fee part
const serviceZipCode = this.internalModel.addressQuestions.zipCode;
const mobileFeePart = await getPricedMobileFeePart(
@ -292,7 +299,6 @@ export default {
}
// update the page level model
this.$emit("setMobileLocation", this.internalModel);
this.setMobileLocationInvalid(false);
},
toggleMobileLocation() {
this.isMobileLocationOpened = !this.isMobileLocationOpened;

2
src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue
View file

@ -57,7 +57,7 @@ export default {
</script>
<style lang="scss">
.modal-dialog {
.mobile-location-questions {
.question-text {
& > span {
text-align: left;

2
src/layouts/service-location/service-location.spec.js
View file

@ -355,6 +355,7 @@ describe("service-location.vue", () => {
zipCode: "61606",
},
isVehicleProtected: null,
isMobileSelected: false,
};
// Act
@ -468,6 +469,7 @@ describe("service-location.vue", () => {
zipCode: "43054",
},
isVehicleProtected: true,
isMobileSelected: false,
};
//wrapper.vm.closeModalAction = jest.fn();

19
src/layouts/service-location/service-location.vue
View file

@ -175,12 +175,12 @@ const MOBILE_FEE_PART_TYPE = "MOBILE FEE";
// DEFINE VALIDATION RULES
defineRule("mobile-location-required", (value) => {
if (
value.isMobileSelected &&
(!value.addressQuestions.streetAddress ||
!value.addressQuestions.city ||
!value.addressQuestions.state ||
!value.addressQuestions.zipCode ||
!value.isVehicleProtected) &&
value.isMobileSelected
!value.isVehicleProtected)
) {
return errorMessages.MOBILE_LOCATION_REQUIRED;
}
@ -305,6 +305,9 @@ export default {
zipCode: this.zipCode,
},
isVehicleProtected: this.isVehicleProtected,
isMobileSelected:
this.selectedAppointmentType == AppointmentTypeStrings.MOBILE &&
!this.getIsMobileLocationOpened(),
};
},
},
@ -523,6 +526,7 @@ export default {
}
if (this.isServiceableMobile) {
this.setMobileLocation(newValue);
this.setMobileLocationInValid(false);
} else {
await getZipCodeData(newZipCode).then((zipCodeData) => {
this.serviceZipCodeQuestion = {
@ -756,11 +760,16 @@ export default {
},
displayMobileAddressQuestion(openMobileLocation) {
var mobileLocationQuestionsRef = this.$refs.mobileLocationQuestions;
var isMobileAddressComplete = mobileLocationQuestionsRef.isMobileAddressComplete;
if (isMobileAddressComplete) {
var isMobileAddressComplete = mobileLocationQuestionsRef?.isMobileAddressComplete;
if (isMobileAddressComplete?.()) {
mobileLocationQuestionsRef.isMobileLocationOpened = false;
} else {
mobileLocationQuestionsRef.isMobileLocationOpened = openMobileLocation;
}
},
getIsMobileLocationOpened() {
return this.$refs.mobileLocationQuestions?.isMobileLocationOpened;
},
},
watch: {
zipCode: {
@ -772,10 +781,8 @@ export default {
this.selectedProvider = new Provider(
this.shopProviderData.mobileProviderNumber
);
this.displayMobileAddressQuestion(true);
} else {
this.selectedProvider = new Provider();
this.displayMobileAddressQuestion(false);
}
});
}

24
src/layouts/service-location/shop-question/shop-question.vue
View file

@ -225,6 +225,15 @@ export default {
return index;
},
async handleUpdate(selectedShopIndex = null) {
this.resetAnswers();
if (selectedShopIndex >= 3) {
await this.getNextShopsFromList(selectedShopIndex + 1);
} else {
await this.getNextShopsFromList();
await nextTick();
}
},
},
watch: {
selectedAppointmentType: {
@ -233,27 +242,16 @@ export default {
// nothing to do with this component. We could mitigate this by showing / hiding this component with v-if but that messes
// up the component initialization on page load.
async handler() {
await nextTick();
this.resetAnswers();
this.getNextShopsFromList();
this.handleUpdate();
},
},
shopProviders: {
async handler(newValue) {
this.resetAnswers();
await nextTick();
const selectedShopIndex = this.getSelectedProviderIndex(
newValue,
this.selectedProviderNumber
);
if (selectedShopIndex >= 3) {
await this.getNextShopsFromList(selectedShopIndex + 1);
} else {
await this.getNextShopsFromList();
await nextTick();
}
this.handleUpdate(selectedShopIndex);
},
},
},

3
src/layouts/vehicle-damage/vehicle-damage.spec.js
View file

@ -646,6 +646,9 @@ describe("vehicle-damage.vue", () => {
isRepair: null,
numberOfChips: null,
},
externalParameterState: {
isExternalParameter: false,
},
};
var windshieldSelections = wrapper.vm.getWindshieldOptionsFromStore();

30
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -148,6 +148,13 @@ export default {
if (store.getters.externalParameterState?.isExternalParameter) {
await nextTick();
const isValid = await baseMixin.methods.isFormValid(vm.$refs.theForm);
if (
store.getters.vehicle?.vehicleSubType === "MOTOR HOME" &&
store.getters.externalParameterDamage.damageType?.toUpperCase() ===
"WINDSHIELDREPLACE"
) {
return baseMixin.methods.ResetExternalParamsAndHideModal();
}
if (isValid) {
vm.forwardButtonAction();
} else {
@ -176,6 +183,21 @@ export default {
false
);
}
const selectedGlassToReplace =
resultMap.damageOptions.windshieldOptions.availableReplacementOptions;
if (selectedGlassToReplace == damageLocationsSelected.SINGLE) {
vm.selectedWindshieldOptions.selectedWindshieldReplaceOptions.push(
damageLocationsSelected.SINGLE
);
if (
store.getters.externalParameterState.isExternalParameter &&
store.getters.externalParameterDamage.damageType !== "other"
) {
return vm.forwardButtonAction();
}
}
baseMixin.methods.ResetExternalParamsAndHideModal();
}
} else {
@ -322,9 +344,11 @@ export default {
) {
windShieldOptions.selectedWindshieldDamageType =
damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push(
damageLocationsSelected.SINGLE
);
if (!store.getters.externalParameterState.isExternalParameter) {
windShieldOptions.selectedWindshieldReplaceOptions.push(
damageLocationsSelected.SINGLE
);
}
}
if (

3
src/layouts/vehicle/vehicle.vue
View file

@ -532,6 +532,9 @@ export default {
if (!closestShops || closestShops.data?.providers?.length === 0) {
this.displayNoServiceAlert = true;
if (store.getters.externalParameterState?.isExternalParameter) {
return baseMixin.methods.ResetExternalParamsAndHideModal();
}
return this.$refs.navbar.removeLoader();
}
}

10
src/mixins/analytics-mixin.js
View file

@ -312,15 +312,7 @@ export default {
}
// Cash Quote or Cash Price Sub Total
if (isPricingAvailable) {
const subtotal = baseMixin.methods
.getTotalPriceOfAllLineItemsAndChildParts(combinedLineItems, false)
.toFixed(2);
payload.cashPriceSubTotal = parseFloat(subtotal);
} else {
payload.cashPriceSubTotal = "";
}
payload.cashPriceSubTotal = store.getters.order?.cashPriceSubTotal ?? "";
//unverified (in scenarios we don’t display the price)
if (

5
src/router/methods/before-each.js
View file

@ -13,6 +13,7 @@ import { checkPagePrerequisites } from "@/router/methods/page-prerequisites";
import { checkLogParam } from "@/helpers/debug-log-helper";
import { debugLog } from "@/helpers/debug-log-helper";
import { handleHeritageReturn } from "@/router/methods/helpers/handle-heritage-return";
import { isVirtualRoute } from "@/router/methods/helpers/is-virtual-route";
export async function beforeEach(to, from) {
try {
@ -45,7 +46,9 @@ export async function beforeEach(to, from) {
// Block navigation if an order has been submitted.
if (window.sessionStorage.getItem(sessionStorageKeyConstants.SUBMITTED_STATE) !== null) {
if (to.name !== FUNNEL_START_PAGE.name && to.name !== routeData.CONFIRMATION.name) {
const exceptionPages = [FUNNEL_START_PAGE.name, routeData.CONFIRMATION.name];
if (!exceptionPages.some((name) => to.name === name) && !isVirtualRoute(to.name)) {
return false;
}
}

7
src/router/methods/helpers/is-virtual-route.js Normal file
View file

@ -0,0 +1,7 @@
import { routeData } from "@/router/constants/routes";
export function isVirtualRoute(routeName) {
const matchedRoute = Object.values(routeData).find((route) => route.name === routeName);
return matchedRoute?.virtual ?? false;
}

19
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 = () => {
@ -3629,25 +3628,25 @@ export function mapTaxedLineItemsToStoreFormat(availableLineItems, storeLineItem
export function getArrayOfAllLineItemsAndChildParts(lineItems) {
let consolidatedLineItemsArray = [];
if (lineItems.glassParts != null)
if (lineItems?.glassParts != null)
consolidatedLineItemsArray = [
...consolidatedLineItemsArray,
...getFlattenedArrayOfLineItemsWithChildParts(lineItems.glassParts),
];
if (lineItems.supportingItems != null)
if (lineItems?.supportingItems != null)
consolidatedLineItemsArray = [
...consolidatedLineItemsArray,
...getFlattenedArrayOfLineItemsWithChildParts(lineItems.supportingItems),
];
if (lineItems.vaps != null)
if (lineItems?.vaps != null)
consolidatedLineItemsArray = [
...consolidatedLineItemsArray,
...getFlattenedArrayOfLineItemsWithChildParts(lineItems.vaps),
];
if (lineItems.promos != null)
if (lineItems?.promos != null)
consolidatedLineItemsArray = [
...consolidatedLineItemsArray,
...getFlattenedArrayOfLineItemsWithChildParts(lineItems.promos),
@ -3797,7 +3796,15 @@ function supportingItemsEqual(supportingItemsA, supportingItemsB) {
// if so, make sure it's not in the past. if in the past, clear schedule info in store.
// if date not in past, then call schedule service to verify appointment is still available.
async function resetScheduleIfUnavailable(context, order, pageNameToLog) {
if (!order.schedule?.date) {
// lineItems empty can happen when a customer goes all the way through scheduling as cash but then
// switches to insurance AND also switches vehicles during policy lookup. If you call shop-time-slots
// without parts, you get 500 errors so skip the call.
const lineItems = getArrayOfAllLineItemsAndChildParts(order.lineItems);
if (!order.schedule?.date || lineItems.length === 0) {
console.log(new Date() + " no schedule date or lineItems. skip resetSchedule logic.");
console.log(new Date() + " schedule.schedule.date" + JSON.stringify(order.schedule));
console.log(new Date() + " lineItems" + JSON.stringify(order.lineItems));
return;
}