Merge branch 'develop' into CASH-631

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,
     },
     mounted() {
         showFmgLoadingModal(true);

src/digital-components/date-picker/date-picker.vue

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

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

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

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

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

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

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

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

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

src/digital-components/salesforce-webchat/salesforce-webchat.spec.js

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

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

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

src/fmg-components/address-questions/address-questions.vue

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

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

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

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

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

src/fmg-components/funnel-header/progress-bar/progress-bar.spec.js

@@ -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(),
+    },
+};

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

@@ -1,6 +1,6 @@
 <template>
-    <div id="progress-bar-container">
+    <div class="progress-bar-outer">
-        <progress v-if="progress > 0" :value="progress" max="100" v-html="progress + '%'" />
+        <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",
+    name: "progress-bar",
-    data() {},
+    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() {
+        progressStyle() {
-            return getProgressBarPercentage(this.pageName);
+            return {
+                width: this.displayedProgress + "%",
+            };
         },
     },
 };
 </script>
 <style lang="scss">
-#progress-bar-container {
+.progress-bar-outer {
-    padding-top: 0.75rem;
+    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;

src/helpers/webchat-helper.js

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

src/layouts/customer-details/customer-details.spec.js

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

src/layouts/payment-method/payment-method.vue

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

src/layouts/payment/payment.vue

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

src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue

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

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

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

src/layouts/service-location/service-location.spec.js

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

src/layouts/service-location/service-location.vue

@@ -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.isVehicleProtected)
-        value.isMobileSelected
     ) {
         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;
+            var isMobileAddressComplete = mobileLocationQuestionsRef?.isMobileAddressComplete;
-            if (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);
                         }
                     });
                 }

src/layouts/service-location/shop-question/shop-question.vue

@@ -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.handleUpdate();
-                this.resetAnswers();
-                this.getNextShopsFromList();
             },
         },
         shopProviders: {
             async handler(newValue) {
-                this.resetAnswers();
-
-                await nextTick();
                 const selectedShopIndex = this.getSelectedProviderIndex(
                     newValue,
                     this.selectedProviderNumber
                 );
-
+                this.handleUpdate(selectedShopIndex);
-                if (selectedShopIndex >= 3) {
-                    await this.getNextShopsFromList(selectedShopIndex + 1);
-                } else {
-                    await this.getNextShopsFromList();
-                    await nextTick();
-                }
             },
         },
     },

src/layouts/vehicle-damage/vehicle-damage.spec.js

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

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -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,10 +344,12 @@ export default {
                 ) {
                     windShieldOptions.selectedWindshieldDamageType =
                         damageLocationsSelected.REPLACE;
+                    if (!store.getters.externalParameterState.isExternalParameter) {
                         windShieldOptions.selectedWindshieldReplaceOptions.push(
                             damageLocationsSelected.SINGLE
                         );
                     }
+                }
 
                 if (
                     store.getters.damage.glassToReplace?.some((glass) => {

src/layouts/vehicle/vehicle.vue

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

src/mixins/analytics-mixin.js

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

src/router/methods/before-each.js

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

src/router/methods/helpers/is-virtual-route.js

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

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