Fixing merge conflicts

azure-pipelines.yml

@@ -175,17 +175,11 @@ stages:
                       indexDeployVariables:
                         __VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__)
                         __VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__)
-                  - template: templates/digital/invalidate-cloudfront-cache.yml@AzureDevOps
-                    parameters:
-                      awsCliContainer: awscli
-                      distributionId: $(apiCfDistributionId)
-                      paths: /* 
-                      awsProfile: $(qaDeploymentProfile)
                   - template: templates/digital/invalidate-cloudfront-cache.yml@AzureDevOps
                     parameters: 
                       awsCliContainer: awscli
                       distributionId: $(cfDistributionId)
-                      paths: /iss/*
+                      paths: /*
                       awsProfile: $(qaDeploymentProfile)
 
     # Prod Build/Deploy
@@ -230,17 +224,11 @@ stages:
                       indexDeployVariables:
                         __VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__)
                         __VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__)
-                  - template: templates/digital/invalidate-cloudfront-cache.yml@AzureDevOps
-                    parameters:
-                      awsCliContainer: awscli
-                      distributionId: $(apiCfDistributionId)
-                      paths: /* 
-                      awsProfile: $(prodDeploymentProfile)
                   - template: templates/digital/invalidate-cloudfront-cache.yml@AzureDevOps
                     parameters: 
                       awsCliContainer: awscli
                       distributionId: $(cfDistributionId)
-                      paths: /iss/*
+                      paths: /*
                       awsProfile: $(prodDeploymentProfile)
         - template: templates/digital/auto-tag.yml@AzureDevOps
           parameters:

src/digital-components/textbox-question/textbox-question.vue

@@ -14,7 +14,7 @@
             ]">
                 <input
                 class="form-control"
-                v-model.trim="value"
+                v-model.trim.lazy="value"
                 v-maska="mask"
                 :type="type"
                 :ref="inputId"

src/iss-components/questions-page-layout/questions-page-layout.vue

@@ -29,6 +29,7 @@
                                     :validationRules="validationRules" />
                                 </div>
                                 <siteFooter
+                                class="mt-3"
                                 ref="siteFooter"
                                 cmsWidgetName="SiteFooterWidget"
                                 :isForwardActionDisabled="!isMetaValid"

src/iss-components/site-footer/site-footer.vue

@@ -1,9 +1,9 @@
 <template>
-    
+    <div>
-    <footer class="footer container-fluid  g-5 px-0  py-3 " id="infoBox">
+        <footer class="footer container-fluid g-5 px-0" id="infoBox">
-        <div class="row d-flex flex-row-reverse align-items-center vw-100 mx-0">
+            <div class="row d-flex flex-row-reverse align-items-center vw-100 mx-0">
-            <div class="col button-col d-flex px-0" id="stacked" >
+                <div class="col button-col d-flex px-0" id="stacked" >
-                <buttonMain
+                    <buttonMain
                     v-if="!isForwardButtonHidden"
                     ref="buttonMain"
                     isPrimary
@@ -16,9 +16,9 @@
                     data-bs-target="#footerModal"
                     data-bs-dismiss="modal"
                     data-test-id="site-footer-main-button" />
-            </div>
+                </div>
-            <div v-if="!isBackButtonHidden" class="col-auto link-col py-1 px-0 text-break">
+                <div v-if="!isBackButtonHidden" class="col-auto link-col py-1 px-0 text-break">
-                <textLink
+                    <textLink
                     linkType="navigation"
                     :text="backLink"
                     @click-event="linkClick"
@@ -26,11 +26,12 @@
                     data-bs-target="#footerModal"
                     data-bs-dismiss="modal"
                     data-test-id="site-footer-back-button" />
+                </div>
             </div>
+        </footer>
+        <div class="footerImage" id="imgCity" v-if="footerImageURL" >
+            <img id="siteFooterImage" :src="footerImageURL" />
         </div>
-    </footer>
-    <div class="footerImage" id="imgCity" v-if="footerImageURL" >
-        <img id="siteFooterImage" :src="footerImageURL" />
     </div>
 </template>
 
@@ -77,8 +78,8 @@ export default {
         },
         buttonText() {
             return this.customButtontext
-                ? this.customButtontext
+            ? this.customButtontext
-                : this.getCmsContent(this.cmsWidgetName, "ForwardButtonText");
+            : this.getCmsContent(this.cmsWidgetName, "ForwardButtonText");
         },
         footerImageURL()
         {
@@ -126,6 +127,7 @@ export default {
 <style lang="scss" scoped>
 .footer {
     display: flex;
+    overflow: visible;
     a {
         display: flex;
         justify-content: center;

src/iss-components/site-header/menu-modal/menu-modal.vue

@@ -1,13 +1,13 @@
 <template>
     <div class="menu-modal-container">
-        <button class="menu-button" type="button" :class="[isActive ? 'active' : '']" data-bs-toggle="modal" data-bs-target="#footerModal" aria-label="Hamburger Menu (modal window)">
+        <button class="menu-button" type="button" :class="[isActive ? 'active' : '']" aria-label="Hamburger Menu (modal window)" @click="toggle()">
             <div class="bar1"></div>
             <div class="bar2"></div>
             <div class="bar3"></div>
         </button>
     </div>
     <!-- Modal -->
-    <div class="modal menu-modal fade" data-bs-backdrop="false" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" v-on="{ 'show.bs.modal' : show, 'hide.bs.modal' : hide }">
+    <div class="modal menu-modal fade" data-bs-backdrop="false" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-fullscreen">
         <div class="modal-content">
             <div class="modal-header visually-hidden">
@@ -53,6 +53,8 @@
 
 <script>
 import textLink from "@/ux-components/text-link/text-link";
+import { Modal } from "bootstrap";
+
 export default {
     name: 'menuModal',
     data() {
@@ -62,17 +64,25 @@ export default {
         };
     },
     methods: {
-        show() {
+        toggle() {
-            this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 56;
+            if(this.isActive){
-            this.isActive = true;
+                //hide modal
-            document.querySelector('.fade-on-route-transition').scrollTo({
+                this.isActive = false;
-                top: 0,  behavior: 'instant'
+                const modal = Modal.getInstance(document.getElementById("footerModal"));
-            });
+                modal?.hide();
-        },
+            }
-        hide() {
+            else
-            var self = this;
+            {
-            self.isActive = false;
+                //show modal
-        },
+                this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 56;
+                this.isActive = true;
+                const modal = Modal.getOrCreateInstance(document.getElementById("footerModal"));
+                modal?.show();
+                document.querySelector('.fade-on-route-transition').scrollTo({
+                    top: 0,  behavior: 'instant'
+                });
+            }
+        }
     },
     components: {
         textLink,
@@ -127,6 +137,7 @@ export default {
         border-top: 1px solid $gray-300;
         overflow-x: visible;
         overflow-y: visible;
+        z-index: 2;
         .modal-body {
             padding: 2rem;
             .ccpa-icon {

src/iss-components/site-header/site-header.vue

@@ -96,6 +96,7 @@ export default({
     <style lang="scss" scoped>
     .site-header {
         height: 56px;
+        position: relative;
     }
     .alert {
         left: 0;

src/iss-components/site-sub-header/site-sub-header.vue

@@ -31,7 +31,8 @@ import buttonBack from "@/iss-components/site-sub-header/button-back/button-back
             cmsWidgetName: String,
             hasBackButton: Boolean,
             justification: String,
-            issContainingPage: String
+            issContainingPage: String,
+            darkGraySubText: Boolean,
         },
         computed: {
             content() {
@@ -53,9 +54,15 @@ import buttonBack from "@/iss-components/site-sub-header/button-back/button-back
                     'justify-content-center';
             },
             alternateFormatting() {
-                return (this.issContainingPage?.toLowerCase() === 'service-packages') ?
+                //override for service-packages unique style
-                    'service-packages-subtext mt-4 mb-2 px-5' :
+                if (this.issContainingPage?.toLowerCase() === 'service-packages')
-                    'small';
+                {
+                    return 'service-packages-subtext mt-4 mb-2 px-5';
+                }
+                else
+                {
+                    return this.darkGraySubText ? "dark-gray" : "light-gray";
+                }
             }
         },
         methods: {
@@ -84,9 +91,14 @@ import buttonBack from "@/iss-components/site-sub-header/button-back/button-back
         color: inherit;
       }
     }
-    p.small {
+    p.light-gray {
         color: $gray-550;
     }
+
+    p.dark-gray {
+        color: $darker-gray;
+    }
+
     p.service-packages-subtext {
         font-weight: 500 !important;
         line-height: 24px;

src/layouts/address-lookup/address-lookup.vue

@@ -41,14 +41,13 @@
                                     <alert
                                     ref="alertVinLookupsByHomeAddressNotAllowed"
                                     v-if="displayVinLookupByHomeAddressNotAllowedAlert"
-                                    class="mb-4 mt-4"
+                                    class="mt-4"
                                     cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
                                     alertClass="alert-danger"
                                     v-bind:isDismissible="false" />
-
                                     <customerQuestions ref="customerQuestions" v-model="customerQuestions" />
-
                                     <siteFooter
+                                    class="mt-5"
                                     cmsWidgetName="SiteFooterWidget"
                                     ref="siteFooter"
                                     :isDisabled="!meta.valid"
@@ -234,7 +233,7 @@ export default {
                 isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle,
                 vehicleInfo:
                 Object.keys(vehicleInfoToCommit).length === 0
-                ? useMainStore().order.vehicle
+                ? null
                 : vehicleInfoToCommit,
                 registrationInfo: {
                     firstName: this.customerQuestions.firstName,

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -53,6 +53,7 @@
                                     validationRules="state-required"
                                     class="mt-4 mb-2"/>
                                     <siteFooter
+                                    class="mt-5"
                                     :isForwardActionDisabled="!meta.valid"
                                     cms-widget-name="SiteFooterWidget"
                                     @back-clicked="backButtonAction"

src/layouts/policy-holder-details/policy-holder-details.vue

@@ -28,6 +28,7 @@
                         </div>
                     </div>
                     <siteFooter
+                    class="mt-5"
                     cmsWidgetName="SiteFooterWidget"
                     ref="siteFooter"
                     :isForwardActionDisabled="!meta.valid"

src/layouts/policy-vehicles/policy-vehicles.spec.js

@@ -1,43 +1,34 @@
-import policyVehicles from "@/layouts/policy-vehicles/policy-vehicles";
+import policyVehicles from '@/layouts/policy-vehicles/policy-vehicles.vue';
-import { settleAllPromises } from "@/helpers/layout-helper.js";
+import { settleAllPromises } from '@/helpers/layout-helper';
-import { shallowMount } from "@vue/test-utils";
+import { shallowMount } from '@vue/test-utils';
-import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { getMountOptions } from '@/helpers/unit-test-helper';
-import { useMainStore } from "@/store";
+import { useMainStore } from '@/store';
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
-import {vehicleSelectionOptions} from "@/constants/vehicle-selection-options";
+import { navigationScenarios } from '@/router/router-constants/navigation-scenarios';
-import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
+import baseMixin from '@/mixins/base-mixin';
-import baseMixin from "@/mixins/base-mixin";
+import { getRandomString, getRandomInt } from '@/helpers/data-generation';
-import { getRandomString, getRandomInt } from '@/helpers/data-generation.js';
+import { endorsementOptions } from '@/constants/endorsement-options';
-import { endorsementOptions } from '@/constants/endorsement-options.js';
 import { createTestingPinia } from '@pinia/testing';
+import { issPageValues } from "@/router/router-constants/issPage-values";
+import { vehicleSelectionOptions } from "@/constants/vehicle-selection-options";
 
 // Mock fetchCmsContentForPage
-jest.mock("@/helpers/cms-content-helper", () => ({
+jest.mock('@/helpers/cms-content-helper', () => ({
     fetchCmsContentForPage: jest.fn(),
     doesCopyContainRouterLink: jest.fn(),
-    splitCopyOnCMSPlaceHolder: jest.fn().mockImplementation(() => "test"),
+    splitCopyOnCMSPlaceHolder: jest.fn().mockImplementation(() => 'test'),
     getRouterLinkRouteFromCopy: jest.fn(),
     getRouterLinkDisplayTextFromCopy: jest.fn(),
     splitCMSCopyOnParagraphTag: jest.fn(),
 }));
 
 // Mock our module for promises.
-jest.mock("@/helpers/layout-helper.js", () => ({
+jest.mock('@/helpers/layout-helper.js', () => ({
     settleAllPromises: jest.fn(),
 }));
 
-describe("policy-vehicles.vue", () => {
+describe('policy-vehicles.vue', () => {
-    test("Should navigate to CLICKED_BACK if backButtonAction is run", async () => {
+    test('Should navigate to CLICKED_BACK if backButtonAction is run', async () => {
-        // Arrange
-        const { wrapper } = setupMocks({});
-
-        // Act        
-        await wrapper.vm.backButtonAction();
-
-        //Assert
-        expect(wrapper.vm.$router.navigate).toBeCalled();
-    });
-    test("Should navigate to CLICKED_BACK if backButtonAction is run", async () => {
         // Arrange
         const { wrapper } = setupMocks({});
 
@@ -48,9 +39,9 @@ describe("policy-vehicles.vue", () => {
         expect(wrapper.vm.$router.navigate).toBeCalled();
     });
 
-    describe("forwardButtonAction", () => {
+    describe('forwardButtonAction', () => {
 
-        test("Selected VIN matches vehicle listed in system => update vehicle and navigate forward with CLICKED_FORWARD_LISTED_VEHICLE scenario.", async () => {
+        test('Selected VIN matches vehicle listed in system => update vehicle and navigate forward with CLICKED_FORWARD_LISTED_VEHICLE scenario.', async () => {
             //Arrange
             const { wrapper } = setupMocks({});
 
@@ -94,7 +85,7 @@ describe("policy-vehicles.vue", () => {
             );
         });
 
-        test("Error in lookupVehicleByVin call => bailout true and navigate forward with CLICKED_FORWARD_WITH_BAILOUT scenario.", async () => {
+        test('Error in lookupVehicleByVin call => bailout true and navigate forward with CLICKED_FORWARD_WITH_BAILOUT scenario.', async () => {
             //Arrange
             const { wrapper } = setupMocks({});
         
@@ -120,7 +111,7 @@ describe("policy-vehicles.vue", () => {
             );
         });
 
-        test("vehicle not listed => navigate forward with CLICKED_FORWARD_NON_LISTED_VEHICLE scenario.", async () => {
+        test('vehicle not listed => navigate forward with CLICKED_FORWARD_NON_LISTED_VEHICLE scenario.', async () => {
             // Arrange
             const { wrapper } = setupMocks({});
 
@@ -141,8 +132,8 @@ describe("policy-vehicles.vue", () => {
         });
     })
 
-    describe("noCompensationForSelectedVehicle computed property", () => {
+    describe('noCompensationForSelectedVehicle computed property', () => {
-        it("No vehicle match => returns true", async () => {
+        it('No vehicle match => returns true', async () => {
             // Arrange
             const selectedVin = getRandomString(17,17);
             const otherVin = getRandomString(17,17);
@@ -162,7 +153,7 @@ describe("policy-vehicles.vue", () => {
             expect(result).toBeTruthy();
         });
 
-        it("Coverages list empty => true", () => {
+        it('Coverages list empty => true', () => {
             // Arrange
             const vin = getRandomString(17,17);
             const testValues = {
@@ -182,7 +173,7 @@ describe("policy-vehicles.vue", () => {
             expect(result).toBeTruthy();
         });
 
-        it("Coverages list non-empty => false", () => {
+        it('Coverages list non-empty => false', () => {
             // Arrange
             const vin = getRandomString(17,17);
             const testValues = {
@@ -207,9 +198,9 @@ describe("policy-vehicles.vue", () => {
         });
     })
 
-    describe("deductibleForSelectedVehicle computed property", () => {
+    describe('deductibleForSelectedVehicle computed property', () => {
 
-        it("No vehicle match => undefined returned", () => {
+        it('No vehicle match => undefined returned', () => {
             // Arrange
             const selectedVin = getRandomString(17,17);
             const otherVin = getRandomString(17,17);
@@ -229,7 +220,7 @@ describe("policy-vehicles.vue", () => {
             expect(result).toBe(undefined);
         });
 
-        it("Vehicle match with empty coverages list => 0 returned", () => {
+        it('Vehicle match with empty coverages list => 0 returned', () => {
             // Arrange
             const vin = getRandomString(17,17);
             const testValues = {
@@ -249,7 +240,7 @@ describe("policy-vehicles.vue", () => {
             expect(result).toBe(0);
         });
 
-        it("Coverages list non empty => deductible from first coverage returned", () => {
+        it('Coverages list non empty => deductible from first coverage returned', () => {
             // Arrange
             const vin = getRandomString(17,17);
             const firstDeductible = getRandomInt(1,1000);
@@ -277,11 +268,11 @@ describe("policy-vehicles.vue", () => {
             // Assert
             expect(result).toBe(firstDeductible);
         });
-    })
+    });
 
-    describe("repairWaivedForSelectedVehicle computed property", () => {
+    describe('repairWaivedForSelectedVehicle computed property', () => {
 
-        it("No vehicle match => false returned", () => {
+        it('No vehicle match => false returned', () => {
             // Arrange
             const selectedVin = getRandomString(17,17);
             const otherVin = getRandomString(17,17);
@@ -301,7 +292,7 @@ describe("policy-vehicles.vue", () => {
             expect(result).toBe(false);
         });
 
-        it("Endorsements list empty => false returned", () => {
+        it('Endorsements list empty => false returned', () => {
              // Arrange
             const vin = getRandomString(17,17);
             const testValues = {
@@ -321,7 +312,7 @@ describe("policy-vehicles.vue", () => {
             expect(result).toBe(false);
         });
 
-        it("Endorsements list non-empty, not containing repair waived => false returned", () => {
+        it('Endorsements list non-empty, not containing repair waived => false returned', () => {
             // Arrange
             const vin = getRandomString(17,17);
             const testValues = {
@@ -341,7 +332,7 @@ describe("policy-vehicles.vue", () => {
             expect(result).toBe(false);
         });
 
-        it("Endorsements list contains repair waived => true returned", () => {
+        it('Endorsements list contains repair waived => true returned', () => {
             // Arrange
             const vin = getRandomString(17,17);
             const testValues = {
@@ -364,7 +355,25 @@ describe("policy-vehicles.vue", () => {
             // Assert
             expect(result).toBe(true);
         });
-    })
+    });
+
+    test('first vehicle is auto-selected if only one vehicle on policy', async () => {
+        // Arrange
+        const vin = getRandomString(17,17);
+        useMainStore().applicationUser = {
+            pageData: {
+                [issPageValues.POLICY_VEHICLES]: [ { vin: vin } ],
+            }
+        };
+
+        const { wrapper } = setupMocks();
+
+        // Act    
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.selectedVehicleVin).toBe(vin);
+    });
 });
 
 const mockMixin = {
@@ -373,7 +382,7 @@ const mockMixin = {
     },
     computed: {
         dynamicStrings() {
-            return { ROUTER_LINK: "routerLink:" };
+            return { ROUTER_LINK: 'routerLink:' };
         },
     },
 };
@@ -408,7 +417,7 @@ function setupMocks()
     fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
 
     const wrapper = shallowMount(policyVehicles, mountOptions);
-    wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
+    wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => '');
     wrapper.vm.setCmsContent = jest.fn();
     wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
     wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();

src/layouts/policy-vehicles/policy-vehicles.vue

@@ -8,7 +8,7 @@
                         <div class="row">
                             <div class="col">
                                 <div class="select-car-form rounded text-center">
-                                    <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mt-2 mb-4" />
+                                    <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="displayGeneric" class="mt-2 mb-4" />
                                     <policyVehiclesQuestion 
                                     class="px-4" 
                                     cmsWidgetName="PolicyVehiclesQuestion" 
@@ -53,12 +53,16 @@ export default {
         const policyVehicles = useMainStore().pageData(issPageValues.POLICY_VEHICLES);
         return {
             policyVehicles: policyVehicles,
-            selectedVehicleVin: (policyVehicles?.length ?? 0) == 0
+            selectedVehicleVin: (policyVehicles?.length ?? 0) == 1
-                ? ""
+                ? policyVehicles[0].vin
-                : policyVehicles[0].vin,
+                : "",
+            displayGeneric: true,
             bailout: false
         }
     },
+    // mounted() {
+    //     this.autoSelectIfOneVehicle();
+    // },
     async beforeRouteEnter(to, from, next)
     {
         // Call APIs
@@ -135,6 +139,11 @@ export default {
                 }
             },
             
+            // autoSelectIfOneVehicle() {
+            //     if (this.policyVehicles.length == 1) {
+            //         this.selectedVehicleVin = this.policyVehicles[0].vin;
+            //     }
+            // }     
         },
         computed:{
             VehiclesForQuestions() {
@@ -171,6 +180,56 @@ export default {
             repairWaivedForSelectedVehicle() {
                 const vehicle = this.policyVehicles.find((vehicle) => { return vehicle.vin == this.selectedVehicleVin; });
                 return vehicle?.endorsements?.includes(endorsementOptions.REPAIR_WAIVED) ?? false;
+            },
+            VehiclesFromApi() {
+                return useMainStore().pageData(issPageValues.POLICY_VEHICLES);
+            },
+            selectedVehicle() {
+                const vehicle = this.mainStore.lookupVehicleByVin(this.selectedVehicleVin);
+                return vehicle;
+            }, 
+        },
+        watch: {
+            async selectedVehicleVin(value) {
+                if (value === vehicleSelectionOptions.VEHICLE_NOT_LISTED) {
+                    // clear previously selected vehicle and image
+                    this.mainStore.resetVehicleState();
+                    this.displayGeneric = true;
+                }
+
+                else {
+                    // get vehicle details from selected VIN
+                    const vehicle = await this.lookupVehicleByVin(value);
+
+                    // handle error in case vehicle info doesn't come back for selected VIN
+                    if (vehicle?.error ?? true) {
+                        this.mainStore.resetVehicleState();
+                        this.displayGeneric = true;
+                        return;
+                    }
+
+                    // save selected vehicle to the store
+                    this.mainStore.updateVehicle(vehicle.data);
+                    this.displayGeneric = true;
+
+                    // get the style(s) associated with the selected YMM
+                    const styleOptions = await this.mainStore.getVehicleStyles(
+                        vehicle.data.year,
+                        vehicle.data.make, 
+                        vehicle.data.model
+                    )
+
+                    // if there is more than 1 style for the selected vehicle, display generic/blurred image
+                    this.displayGeneric = styleOptions?.data?.length > 1;
+                    
+                    // if (styleOptions?.data?.length > 1) {
+                    //      = true;
+                    // }
+                    // else {
+                    //     // display clear image of vehicle
+                    //     this.displayGeneric = false;
+                    // }
+                }
             }
         },     
         components: {

src/layouts/provider-preference/provider-preference.vue

@@ -16,6 +16,7 @@
                     class="mx-5" />
                 <div class="px-5">
                     <siteFooter
+                        class="mt-5"
                         cmsWidgetName="SiteFooterWidget"
                         :isForwardActionDisabled="isForwardActionDisabled"
                         @backClicked="backButtonAction"

src/layouts/schedule-page/schedule-page.vue

@@ -6,6 +6,7 @@
                 <div class="container-fluid pb-2">
                     <p>Placeholder for schedule page</p>
                     <siteFooter
+                    class="mt-5"
                     cmsWidgetName="SiteFooterWidget"
                     ref="siteFooter"
                     :isForwardActionDisabled="!meta.valid"

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

@@ -31,11 +31,12 @@
                                         validationRules="selection-required"
                                         class="service-location-button-question mb-1"/>
                                         <div class="select-car">
-                                        <div class="container-fluid pb-2">
+                                        <div class="container-fluid pb-2 g-0">
                                             <div class="row">
                                                 <div class="col px-0">
                                                     <div class="select-car-form rounded">
                                                         <siteFooter
+                                                        class="mt-4"
                                                         cmsWidgetName="SiteFooterWidget"
                                                         :isForwardActionDisabled="!meta.valid"
                                                         @backClicked="backButtonAction"

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

@@ -51,6 +51,7 @@
                             groupName="BackGlassReplaceOptionsQuestion"
                             validationRules="replace-options-required" />
                             <site-footer
+                            class="mt-5"
                             cmsWidgetName="SiteFooterWidget"
                             :isForwardActionDisabled="!meta.valid"
                             @backClicked="backButtonAction"

src/layouts/vehicle-lookup/vehicle-lookup.vue

@@ -11,7 +11,7 @@
                                     <VehicleBanner class="mt-2 mb-4" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" />
                                     <SiteSubHeader cms-widget-name="SiteSubHeaderWidget" class="mt-5 mb-2" />
                                     <VinLookupMethods v-model="selectedVinLookupMethod" cms-widget-name="VINLookupMethod" group-name="VinLookupMethods" ref="VinLookupMethods" />
-                                    <SiteFooter cms-widget-name="SiteFooterWidget" :is-forward-action-disabled="isForwardActionDisabled" @back-clicked="backButtonAction" @forward-clicked="forwardButtonAction" />
+                                    <SiteFooter cms-widget-name="SiteFooterWidget" :is-forward-action-disabled="isForwardActionDisabled" @back-clicked="backButtonAction" @forward-clicked="forwardButtonAction" class="mt-3"/>
                                 </div>
                             </div>
                         </div>

src/layouts/vehicle-selection/vehicle-selection.vue

@@ -11,7 +11,8 @@
                                 <siteSubHeader
                                     cmsWidgetName="SiteSubHeaderWidget"
                                     class="siteSubHeader"
-                                    justification="left" 
+                                    justification="center"
+                                    darkGraySubText
                                 />
 
                                 <vehicleQuestion
@@ -59,6 +60,7 @@
                                 />
 
                                 <siteFooter
+                                    class="mt-5"
                                     cmsWidgetName="SiteFooterWidget"
                                     @ForwardClicked="forwardButtonAction"
                                     :isForwardActionDisabled="!meta.valid"
@@ -140,33 +142,28 @@ export default {
     watch: {
         selectedYear(value) {
             this.mainStore.updateVehicleYear(value);
+            this.$refs["vehicleMakeQuestion"].clearValues();
             if(value)
             {
                 this.$refs["vehicleMakeQuestion"].getNewValues();
             }
-            else{
-                this.$refs["vehicleMakeQuestion"].clearValues();
-            }
         },
         selectedMake(value) {
             this.mainStore.updateVehicleMake(value);
+            this.$refs["vehicleModelQuestion"].clearValues();
             if(value)
             {
                 this.$refs["vehicleModelQuestion"].getNewValues();
             }
-            else{
-                this.$refs["vehicleModelQuestion"].clearValues();
-            }
         },
         selectedModel(value) {
             this.mainStore.updateVehicleModel(value);
+            this.$refs["vehicleStyleQuestion"].clearValues();
             if(value)
             {
                 this.$refs["vehicleStyleQuestion"].getNewValues();
             }
-            else{
+
-                this.$refs["vehicleStyleQuestion"].clearValues();
-            }
         },
         selectedStyle(value) {
             this.mainStore.updateVehicleStyle(value);

src/layouts/vin-lookup/vin-lookup.spec.js

@@ -119,6 +119,11 @@ const vehicleWithNoAdditionalPartsOrQuestionsMockResponse = {
   },
 };
 
+jest.mock("bootstrap", () => ({
+  getInstance: jest.fn(),
+  getOrCreateInstance: jest.fn(),
+}));
+
 const mockRoute = {
   query: {
     // Needed inside vehicle-questions-mixin

src/layouts/vin-lookup/vin-lookup.vue

@@ -13,7 +13,7 @@
                                     <vinLookupAlerts class="mt-5" :activeAlertType="activeVehicleLookupAlertType" />
                                     <vinQuestion v-model="vin" :mask="vinMask" :isDisabled="vinPopulatedOnPageLoad" textPosition="left" />
                                     <vinLocationInformation />
-                                    <siteFooter cmsWidgetName="SiteFooterWidget" :isForwardActionDisabled="!meta.valid" @backClicked="backButtonAction" @forwardClicked="forwardButtonAction" ref="siteFooter" />
+                                    <siteFooter cmsWidgetName="SiteFooterWidget" :isForwardActionDisabled="!meta.valid" @backClicked="backButtonAction" @forwardClicked="forwardButtonAction" ref="siteFooter" class="mt-5" />
                                 </div>
                             </div>
                         </div>
@@ -188,6 +188,7 @@ export default {
             // navigate back to vehicle-damage
             if (this.isCarIdDifferentFromTheStore && !isSelectedGlassAvailableForVehicle) {
                 this.mainStore.updateVehicle(this.vehicleFromLookup);
+                this.mainStore.resetDamageState();
                 this.$router.navigate(
                     this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
                     this.$route,

src/layouts/welcome-page/welcome-page.vue

@@ -140,7 +140,8 @@
                     </div>
                     <div class="row position-sticky top-100" id="welcomeFooter">
                         <div class="col">
-                            <site-footer
+                            <siteFooter
+                            class="mt-3"
                             cmsWidgetName="SiteFooterWidget"
                             :isForwardActionDisabled="!meta.valid"
                             @back-clicked="backButtonAction"

src/router/router-constants/issPage-values.js

@@ -24,11 +24,7 @@ export const issPageValues = {
     SCHEDULE_PAGE: 'schedule-page',
     VEHICLE_DAMAGE: 'vehicle-damage',
     VEHICLE_LOOKUP: 'vehicle-lookup',
-    VEHICLE_MAKE: 'vehicle-make',
-    VEHICLE_MODEL: 'vehicle-model',
     VEHICLE_PARTS: 'vehicle-parts',
-    VEHICLE_STYLE: 'vehicle-style',
-    VEHICLE_YEAR: 'vehicle-year',
     VEHICLE_SELECTION: 'vehicle-selection',
     VIN_LOOKUP: 'vin-lookup',
     TPA_SUBMIT: 'tpa-submit',

src/router/router-constants/routing-table.js

@@ -17,58 +17,6 @@ const routingTable = function(store) {
         }
       ]
     },
-    {
-      issPageValue: issPageValues.VEHICLE_YEAR,
-      maps: [
-        {
-          scenario: navigationScenarios.CLICKED_BACK,
-          destinationIssPageValue: issPageValues.POLICY_HOLDER_DETAILS
-        },
-        {
-          scenario: navigationScenarios.SELECTED_YEAR,
-          destinationIssPageValue: issPageValues.VEHICLE_MAKE
-        }
-      ]
-    },
-    {
-      issPageValue: issPageValues.VEHICLE_MAKE,
-      maps: [
-        {
-          scenario: navigationScenarios.CLICKED_BACK,
-          destinationIssPageValue: issPageValues.VEHICLE_YEAR
-        },
-        {
-          scenario: navigationScenarios.SELECTED_MAKE,
-          destinationIssPageValue: issPageValues.VEHICLE_MODEL
-        }
-      ]
-    },
-    {
-      issPageValue: issPageValues.VEHICLE_MODEL,
-      maps: [
-        {
-          scenario: navigationScenarios.CLICKED_BACK,
-          destinationIssPageValue: issPageValues.VEHICLE_MAKE
-        },
-        {
-          scenario: navigationScenarios.SELECTED_MODEL,
-          destinationIssPageValue: issPageValues.VEHICLE_STYLE
-        }
-      ]
-    },
-    {
-      issPageValue: issPageValues.VEHICLE_STYLE,
-      maps: [
-        {
-          scenario: navigationScenarios.CLICKED_BACK,
-          destinationIssPageValue: issPageValues.VEHICLE_MODEL
-        },
-        {
-          scenario: navigationScenarios.SELECTED_STYLE,
-          destinationIssPageValue: issPageValues.VEHICLE_DAMAGE
-        }
-      ]
-    },
     {
       issPageValue: issPageValues.VEHICLE_DAMAGE,
       maps: [

src/store/index.js

@@ -988,7 +988,8 @@ export const useMainStore = defineStore({
           );
         
         if (haveMoldingQuestionAnswersChanged) {
-          this.resetPartsAndDependencies();
+          this.updateGlassParts(null);
+          this.updateSupportingItems(null);
           this.updateCapabilityQuestionAnswers(null);
           this.updatePageData({ page: issPageValues.CAPABILITY_QUESTIONS, data: null });
         }
@@ -1013,7 +1014,8 @@ export const useMainStore = defineStore({
           );
         
         if (haveCapabilityQuestionAnswersChanged) {
-          this.resetPartsAndDependencies();
+          this.updateGlassParts(null);
+          this.updateSupportingItems(null);
         }
 
         // Save new values
@@ -1236,9 +1238,7 @@ export const useMainStore = defineStore({
             registrationInfo?.firstName !== this.order.vehicle.registration?.firstName ||
             registrationInfo?.lastName !== this.order.vehicle.registration?.lastName
         ) 
-        {
+          {
-            this.resetRegistrationAndDependencies();
-
             if (!isSelectedGlassAvailableForVehicle) {
               this.resetDamageState();
               this.resetGlassPartsState();
@@ -1248,7 +1248,11 @@ export const useMainStore = defineStore({
             this.updateRegistration(registrationInfo);
           };
         
-        this.updateVehicle(vehicleInfo);
+        if(vehicleInfo)
+        {
+          this.updateVehicle(vehicleInfo);
+        }
+        
       },
       saveVin({ isSelectedGlassAvailableForVehicle, vehicleInfo }) {
         //Reset dependent state when changing

src/store/store.spec.js

@@ -11,11 +11,11 @@ describe("Store", () => {
     let store;
 
     const vueApp = createApp(App);
-    const pinia = createPinia();
-    vueApp.use(pinia);
     
     beforeEach(() => {
-        setActivePinia(createPinia());
+        const pinia = createPinia();
+        setActivePinia(pinia);
+        vueApp.use(pinia);
         store = useMainStore();
         store.applicationUser.eventBus = [];
         jest.resetAllMocks();

src/ux-components/radio/radio.vue

@@ -1,139 +1,144 @@
 <template>
     <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
     <div class="ui-radio form-check" :class="[(errors.length > 0 || hasError) ? 'has-error' : '']">
-      <input
+        <label class="d-inline-flex align-items-start form-check-label" :for="buttonID">
-        type="radio"
+            <input
-        class="form-check-input"
+            type="radio"
-        aria-checked="false"
+            class="form-check-input"
-        :name="groupName"
+            aria-checked="false"
-        :id="buttonID"
+            :name="groupName"
-        :aria-required="isRequired"
+            :id="buttonID"
-        :value="value"
+            :aria-required="isRequired"
-        :v-model="checkValue"
+            :value="value"
-        @change="handleCheckChange"
+            :v-model="checkValue"
-        :checked="checkValue"
+            @change="handleCheckChange"
-        :validationRules="validationRules"
+            :checked="checkValue"
-        />
+            :validationRules="validationRules"
-      <label class="d-flex align-items-start form-check-label" :for="buttonID">
+            />
-        <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
+            <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
-        <span v-if="screenReaderOnlyText" class="sr-only">{{
+            <span v-if="screenReaderOnlyText" class="sr-only">{{
-          screenReaderOnlyText
+                screenReaderOnlyText
-        }}</span>
+            }}</span>
-      </label>
+        </label>
     </div>
-  </template>
+</template>
 
-  <script>
+<script>
-  import { useField } from "vee-validate";
+import { useField } from "vee-validate";
 
-  export default {
+export default {
     name: "radio",
     props: {
-      groupName: String,
+        groupName: String,
-      buttonLabel: String,
+        buttonLabel: String,
-      buttonID: String,
+        buttonID: String,
-      isRequired: Boolean,
+        isRequired: Boolean,
-      value: {
+        value: {
-        type: [String, Number],
+            type: [String, Number],
-        default: "",
+            default: "",
-      },
+        },
-      screenReaderOnlyText: String,
+        screenReaderOnlyText: String,
-      selectedValues: String,
+        selectedValues: String,
-      hasError: Boolean,
+        hasError: Boolean,
-      validationRules: String,
+        validationRules: String,
-      valueToLogType: String,
+        valueToLogType: String,
     },
     data() {
-      return {
+        return {
-        checkValue: Boolean,
+            checkValue: Boolean,
-      };
+        };
     },
     created() {
-      if (this.selectedValues) {
+        if (this.selectedValues) {
-        this.checkValue = this.selectedValues === this.value;
+            this.checkValue = this.selectedValues === this.value;
-        this.handleCheckChange();
+            this.handleCheckChange();
-      } else{
+        } else{
-        this.checkValue = false;
+            this.checkValue = false;
-      }
+        }
     },
     methods: {
-      handleCheckChange() {
+        handleCheckChange() {
-        this.handleChange(this.value);
+            this.handleChange(this.value);
-        const emitEvent = {
+            const emitEvent = {
-          checkValue: this.checkValue,
+                checkValue: this.checkValue,
-          value: this.value.toString(),
+                value: this.value.toString(),
-          buttonID: this.buttonID && this.buttonID.toString(),
+                buttonID: this.buttonID && this.buttonID.toString(),
-        };
+            };
 
-        this.$emit("isCheckedChanged", emitEvent);
+            this.$emit("isCheckedChanged", emitEvent);
-        this.$emit("update:modelValue", emitEvent);
+            this.$emit("update:modelValue", emitEvent);
 
-      },
+        },
     },
     setup(props) {
-      const inputType = "radio";
+        const inputType = "radio";
-      const {
+        const {
-          value: inputValue,
+            value: inputValue,
-          handleChange,
+            handleChange,
-          errors,
+            errors,
-      } = useField(props.groupName, props.validationRules,
+        } = useField(props.groupName, props.validationRules,
-      {
+            {
-        type: inputType,
+                type: inputType,
-        checkedValue: props.value,
+                checkedValue: props.value,
-      });
+            });
-      return {
+            return {
-        handleChange,
+                handleChange,
-        errors,
+                errors,
-      };
+            };
-    },
+        },
-  };
+    };
-  </script>
+    </script>
 
-  <style lang="scss" scoped>
+    <style lang="scss" scoped>
-  .form-check {
+    .form-check {
-    position: relative;
+        position: relative;
 
-    .form-check-input {
+        label {
-      border: 1px solid $gray-500;
+            &:hover {
-      border-radius: 50%;
+                cursor: pointer;
-      margin-right: 0.5rem;
+            }
-  
-      &:checked {
-        background-color: $white;
-        background-size: 71%;
-        background-position: center;
-        border: 1px solid $blue;
-        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' xml:space='preserve'%3e%3ccircle cx='25' cy='25' r='25' fill='%231574A1'/%3e%3c/svg%3e");
-        + label {
-          p {
-            font-weight: 500;
-            font-size: .875rem;
-            color: $black;
-          }
         }
-      }
-      &:focus {
-        box-shadow: 0 0 0 2.5px $blue;
-      }
 
-      &, & + label {
+        .form-check-input {
-        margin-top: 0;
+            border: 1px solid $gray-500;
-        position: absolute;
+            border-radius: 50%;
-        top: 50%;
+            margin-right: 0.5rem;
-        transform: translateY(-50%);
-      }
-    }
 
-    &:hover {
+            &:checked {
-      .form-check-input {
+                background-color: $white;
-        box-shadow: 0 0 0 4px $blue-300;
+                background-size: 71%;
-      }
+                background-position: center;
-    }
+                border: 1px solid $blue;
-    p {
+                background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' xml:space='preserve'%3e%3ccircle cx='25' cy='25' r='25' fill='%231574A1'/%3e%3c/svg%3e");
-      font-weight: 400;
+                + label {
-      font-size: .875rem;
+                    p {
-      color: $gray-600;
+                        font-weight: 500;
-    }
+                        font-size: .875rem;
-  }
+                        color: $black;
-  </style>
+                    }
+                }
+            }
+            &:focus {
+                box-shadow: 0 0 0 2.5px $blue;
+            }
 
+            &, & + label {
+                margin-top: 0;
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+            }
+        }
+
+        &:hover {
+            .form-check-input {
+                box-shadow: 0 0 0 4px $blue-300;
+            }
+        }
+        p {
+            font-weight: 400;
+            font-size: .875rem;
+            color: $gray-600;
+        }
+    }
+    </style>