Completed Merge

src/constants/dynamic-strings.js

@@ -2,7 +2,8 @@ const dynamicStrings = {
     GLOBAL_STATE: "globalState",
     CUSTOM: "custom",
     ROUTER_LINK: "routerLink:",
-    MODAL_LINK: "modalLink"
+    MODAL_LINK: "modalLink",
+    TEXT_LINK: 'textLink'
   };
   
   export { dynamicStrings };

src/digital-components/button-question/button-question.spec.js

@@ -2,22 +2,6 @@ import { shallowMount } from "@vue/test-utils";
 import buttonQuestion from "@/digital-components/button-question/button-question";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 
-describe("buttonQuestion.vue", () => {
-    it("Should show overflow classes on fieldset if isOverflowScrollable is true", () => {
-        // Act
-        const wrapper = shallowMount(buttonQuestion, {
-            propsData: {
-                isOverflowScrollable: true,
-                groupName: "group-name",
-            },
-        });
-
-        // Assert
-        const fieldSet = wrapper.find("fieldset");
-        expect(fieldSet.classes()).toContain("overflow-scroll");
-    });
-});
-
 describe("buttonQuestion.vue", () => {
     it("Fieldset classes should contain row if button type is listCard", () => {
         // Act

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

@@ -4,16 +4,15 @@
         :class="
             isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'
         ">
-        <div v-if="questionText && answers && answers.length > 0" class="question-text d-flex px-5" 
+        <div v-if="questionText && answers && answers.length > 0" class="question-text d-flex"
             :class="{'small-question-text': isSmallQuestionText,'small-question-label-text':isSmallQuestionLabelText}">
             <span class="fw-bold w-100">{{ questionText }}</span>
         </div>
 
         <div class="w-100 d-flex justify-content-center">
             <fieldset
-                class="w-100 px-5"
+                class="w-100"
                 :aria-required="isRequired"
-                :class="getFieldSetClasses"
                 :role="isMultiSelect ? 'group' : 'radiogroup'"
                 :aria-labelledby="formatString(groupName)">
                 <legend
@@ -68,7 +67,7 @@
                 </div>
             </fieldset>
         </div>
-        <div class="row form-test-error mt-1 px-5">
+        <div class="row form-test-error mt-1">
             <error-message
                 :name="formatString(groupName)"
                 v-if="!suppressError"></error-message>
@@ -145,7 +144,7 @@ export default {
 
             const SmallQuestionTextClass = this.isSmallQuestionText
                 ? baseClasses + "small-question-text"
-                : baseClasses;            
+                : baseClasses;
 
             const SmallQuestionLabelText = this.isSmallQuestionLabelText
                 ? SmallQuestionTextClass + "small-question-label-text"
@@ -234,16 +233,6 @@ export default {
 </script>
 
 <style lang="scss">
-.button-question-overflow {
-    height: calc(100vh - 274px);
-
-    .overflow-scroll {
-        // Height will be determined by overall height of content above list
-        height: calc(100% - 400px);
-        overflow-x: hidden !important;
-        -webkit-overflow-scrolling: touch;
-    }
-}
 .button-question {
     color: $black;
 

src/digital-components/modal/modal.spec.js

@@ -1,68 +1,255 @@
+jest.mock("vee-validate", () => ({
+    useForm: jest.fn(),
+}));
+
+const mockValidate = (returnValue) => jest.fn(async () => Promise.resolve({ valid: returnValue }));
+const mockMeta = (returnValue) => jest.fn(async () => Promise.resolve(returnValue));
+
 import { shallowMount } from "@vue/test-utils";
-import Modal from "./modal";
+import modal from "./modal";
+import crypto from "crypto";
+import { useForm } from "vee-validate";
+import { Modal } from "bootstrap";
+
+const footerButtonText = "Sample footer text here.";
+const headerText = "Sample header text here.";
+
+global.crypto = crypto;
 
 describe("modal.vue", () => {
-    it("Should display header text when HeaderText is defined in the CMS", async () => {
-        // Act
-        const wrapper = shallowMount(Modal, {
-            mixins: [mockMixin],
+    it("Should display modal header text when headerText is defined", async () => {
+        // Arrange / Act
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: true,
+            validated: true,
+        };
+
+        useForm.mockReturnValue({
+            meta: mockMeta(fakeMeta),
+            validate: mockValidate(true),
+        });
+
+        const wrapper = shallowMount(modal, {
             props: {
-                cmsWidgetName: "test",
+                headerText: headerText,
+                footerButtonText: footerButtonText,
             },
             attachTo: document.body,
         });
-        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["HeaderText"]));
+
+        // Assert
+        expect(wrapper.html()).toEqual(expect.stringContaining(headerText));
     });
 
-    it("Should display subheader text when SubheaderText is defined in the CMS", async () => {
-        // Act
-        const wrapper = shallowMount(Modal, {
-            mixins: [mockMixin],
+    it("Should display footer button text when footerButtonText is defined", async () => {
+        // Arrange / Act
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: true,
+            validated: true,
+        };
+
+        useForm.mockReturnValue({
+            meta: mockMeta(fakeMeta),
+            validate: mockValidate(true),
+        });
+        const wrapper = shallowMount(modal, {
             props: {
-                cmsWidgetName: "test",
+                footerButtonText: footerButtonText,
             },
             attachTo: document.body,
         });
-        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["SubheaderText"]));
+
+        // Assert
+        expect(wrapper.html()).toEqual(expect.stringContaining(footerButtonText));
     });
 
-    it("Should insert image url when Image is defined in the CMS", async () => {
-        // Act
-        const wrapper = shallowMount(Modal, {
-            mixins: [mockMixin],
+    it("Should emit 'footer-button-event' if the form is valid", async () => {
+        // Arrange
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: true,
+            validated: true,
+        };
+
+        useForm.mockReturnValue({
+            meta: mockMeta(fakeMeta),
+            validate: mockValidate(true),
+        });
+
+        const resetButtonStyle = jest.fn();
+        const wrapper = shallowMount(modal, {
             props: {
-                cmsWidgetName: "test",
+                footerButtonText: footerButtonText,
+                headerText: headerText,
             },
             attachTo: document.body,
         });
-        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["Image"]));
+        wrapper.vm.resetButtonStyle = resetButtonStyle;
+
+        // Act
+        const buttonMain = wrapper.findComponent({ ref: "modalButtonMain" });
+        await buttonMain.trigger("click-event");
+
+        // Assert
+        expect(wrapper.emitted("footer-button-event")).toBeTruthy();
     });
 
-    it("Should display body text when BodyText is defined in the CMS", async () => {
-        // Act
-        const wrapper = shallowMount(Modal, {
-            mixins: [mockMixin],
+    it("Should not emit 'footer-button-event' if the form is invalid", async () => {
+        // Arrange
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: false,
+            validated: true,
+        };
+
+        useForm.mockReturnValue({
+            meta: mockMeta(fakeMeta),
+            validate: mockValidate(false),
+        });
+
+        const resetButtonStyle = jest.fn();
+        const wrapper = shallowMount(modal, {
             props: {
-                cmsWidgetName: "test",
+                footerButtonText: footerButtonText,
+                headerText: headerText,
             },
             attachTo: document.body,
         });
-        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["BodyText"]));
+        wrapper.vm.resetButtonStyle = resetButtonStyle;
+
+        // Act
+        const buttonMain = wrapper.findComponent({ ref: "modalButtonMain" });
+        await buttonMain.trigger("click-event");
+
+        // Assert
+        expect(wrapper.emitted("footer-button-event")).toBeFalsy();
+    });
+
+    it("Should have a disabled footer button when the form has not been touched", async () => {
+        // Arrange / Act
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: true,
+            validated: true,
+        };
+
+        useForm.mockReturnValue({
+            meta: mockMeta(fakeMeta),
+            validate: mockValidate(true),
+        });
+
+        const resetButtonStyle = jest.fn();
+        const wrapper = shallowMount(modal, {
+            props: {
+                footerButtonText: footerButtonText,
+                headerText: headerText,
+            },
+            attachTo: document.body,
+        });
+        wrapper.vm.resetButtonStyle = resetButtonStyle;
+
+        // Assert
+        expect(wrapper.vm.isFooterButtonDisabled).toBe(true);
+    });
+
+    it("Should have a disabled footer button when the form is invalid", async () => {
+        // Arrange / Act
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: true,
+            validated: true,
+        };
+
+        useForm.mockReturnValue({
+            meta: mockMeta(fakeMeta),
+            validate: mockValidate(true),
+        });
+
+        const resetButtonStyle = jest.fn();
+        const wrapper = shallowMount(modal, {
+            props: {
+                footerButtonText: footerButtonText,
+                headerText: headerText,
+            },
+            attachTo: document.body,
+        });
+        wrapper.vm.resetButtonStyle = resetButtonStyle;
+
+        // Assert
+        expect(wrapper.vm.isFooterButtonDisabled).toBe(true);
+    });
+
+    it("Should call bootstrap Modal method 'show' when calling 'openModal'", async () => {
+        // Arrange
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: true,
+            validated: true,
+        };
+
+        useForm.mockReturnValue({
+            meta: mockMeta(fakeMeta),
+            validate: mockValidate(true),
+        });
+
+        const showMock = jest.spyOn(Modal.prototype, "show");
+
+        const resetButtonStyle = jest.fn();
+        const wrapper = shallowMount(modal, {
+            props: {
+                footerButtonText: footerButtonText,
+                headerText: headerText,
+            },
+            attachTo: document.body,
+        });
+        wrapper.vm.resetButtonStyle = resetButtonStyle;
+
+        // Act
+        wrapper.vm.openModal();
+
+        // Assert
+        expect(showMock).toHaveBeenCalled();
+    });
+
+    it("Should call bootstrap Modal method 'hide' when calling 'closeModal'", async () => {
+        // Arrange
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: true,
+            validated: true,
+        };
+
+        useForm.mockReturnValue({
+            meta: mockMeta(fakeMeta),
+            validate: mockValidate(true),
+        });
+        const hideMock = jest.spyOn(Modal.prototype, "hide");
+
+        const resetButtonStyle = jest.fn();
+        const wrapper = shallowMount(modal, {
+            props: {
+                footerButtonText: footerButtonText,
+                headerText: headerText,
+            },
+            attachTo: document.body,
+        });
+        wrapper.vm.resetButtonStyle = resetButtonStyle;
+
+        // Act
+        wrapper.vm.openModal();
+        wrapper.vm.closeModal();
+
+        // Assert
+        expect(hideMock).toHaveBeenCalled();
     });
 });
-
-const mockMixin = {
-    methods: {
-        getCmsContent: jest.fn((widgetName, cmsFieldName) => {
-            return mockCmsContent[cmsFieldName];
-        }),
-    },
-};
-
-const mockCmsContent = {
-    HeaderText: "Sample header text here.",
-    SubheaderText: "Sample subheader text here.",
-    Image: "https://www.sampleImage.sample",
-    BodyText: "Sample body text here.",
-    FooterText: "Sample footer text here.",
-};

src/digital-components/modal/modal.vue

@@ -2,39 +2,38 @@
     <!-- Modal -->
     <div
         class="modal fade modal-component"
-        v-on="{ 'hidden.bs.modal': resetButtonStyle }"
-        :id="cmsWidgetName"
+        v-on="{ 'hidden.bs.modal': onModalClosed, 'shown.bs.modal': onModalOpened }"
+        :id="modalId"
         tabindex="-1"
         aria-labelledby="ModalComponentLabel"
         aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
-                <div class="modal-header">
+                <div class="modal-header mb-2 mt-2">
+                    <label
+                        v-if="headerText"
+                        class="modal-title d-flex justify-content-center pb-0 w-100">
+                        {{ headerText }}
+                    </label>
                     <button
+                        ref="closeButton"
                         type="button"
                         class="btn-close"
-                        data-bs-dismiss="modal"
+                        @mousedown="closeModal"
                         aria-label="Close"></button>
                 </div>
-                <div class="modal-body ps-4 pe-4 pt-5 pb-4">
-                    <img :src="ModalImage" class="mw-100 d-flex mx-auto mb-4" alt="" />
-                    <h5 class="mb-4" v-html="ModalHeadline"></h5>
-                    <p class="fw-bold mb-2 subheader-text" v-html="ModalSubheadertext"></p>
-                    <p class="mb-0" v-html="ModalBodyText"></p>
-                    <p
-                        class="my-4 caption modal-sub-body"
-                        v-if="ModalSubBodyText"
-                        v-html="ModalSubBodyText"></p>
+                <div class="modal-body ps-5 pe-5 pb-4 pt-0">
+                    <slot></slot>
                 </div>
                 <div class="modal-footer px-5 py-4">
-                    <buttonMain
+                    <modalButtonMain
                         isPrimary
                         class="w-100"
-                        ref="buttonMain"
-                        suppressLoader
-                        :buttonText="ModalCloseButtonText"
-                        @click-event="buttonClick"
-                        data-bs-dismiss="modal" />
+                        ref="modalButtonMain"
+                        loaderColor="white"
+                        :buttonText="footerButtonText"
+                        @click-event="validateAndEmit"
+                        :class="isFooterButtonDisabled && 'form-test-invalid'" />
                 </div>
             </div>
         </div>
@@ -42,46 +41,80 @@
 </template>
 
 <script>
-import buttonMain from "@/ux-components/button-main/button-main";
+import modalButtonMain from "@/ux-components/modal-button-main/modal-button-main";
+import { Modal } from "bootstrap";
+import { useForm } from "vee-validate";
 
 export default {
     name: "modal",
     props: {
-        cmsWidgetName: String,
+        modalId: String,
+        headerText: String,
+        footerButtonText: String,
+        onModalOpenedCallback: {
+            type: Function,
+        },
+        onModalClosedCallback: {
+            type: Function,
+        },
     },
-    computed: {
-        ModalHeadline() {
-            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
-        },
-        ModalSubheadertext() {
-            return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
-        },
-        ModalBodyText() {
-            return this.getCmsContent(this.cmsWidgetName, "BodyText");
-        },
-        ModalSubBodyText() {
-            return this.getCmsContent(this.cmsWidgetName, "BodyText2");
-        },
-        ModalImage() {
-            return this.getCmsContent(this.cmsWidgetName, "Image");
-        },
-        ModalCloseButtonText() {
-            return this.getCmsContent(this.cmsWidgetName, "FooterText");
-        },
+    setup(props) {
+        const modalId = props.modalId ? props.modalId : `modal-${crypto.randomUUID()}`;
+
+        const { meta, validate, resetForm } = useForm();
+
+        return {
+            modalId,
+            meta,
+            validate,
+            resetForm,
+        };
     },
     methods: {
+        async validateAndEmit() {
+            const validationResult = await this.validate();
+            if (validationResult.valid) {
+                this.$emit("footer-button-event");
+            } else {
+                this.resetButtonStyle();
+            }
+        },
         resetButtonStyle() {
-            this.$refs.buttonMain.resetButtonStyle();
+            this.$refs.modalButtonMain.resetButtonStyle();
+        },
+        onModalOpened() {
+            this.onModalOpenedCallback?.();
+        },
+        onModalClosed() {
+            this.resetButtonStyle();
+            this.onModalClosedCallback?.();
+        },
+        openModal() {
+            const modal = Modal.getOrCreateInstance(document.getElementById(this.modalId));
+            modal?.show();
+        },
+        closeModal() {
+            const modal = Modal.getInstance(document.getElementById(this.modalId));
+            modal?.hide();
+        },
+    },
+    computed: {
+        isFooterButtonDisabled() {
+            if (!this.meta.touched) {
+                return !this.meta.valid;
+            }
+            return !this.meta.dirty || !this.meta.valid;
         },
     },
     components: {
-        buttonMain,
+        modalButtonMain,
     },
 };
 </script>
 
 <style lang="scss">
 .modal {
+    overflow: hidden;
     top: auto;
     bottom: 0;
     h5,
@@ -92,9 +125,17 @@ export default {
     .modal-header {
         border-bottom: none;
         .btn-close {
+            position: absolute;
+            right: 1rem;
+            top: 1rem;
             background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.6874 1.82179L9.50889 8L15.6874 14.1782C16.1042 14.595 16.1042 15.2707 15.6874 15.6875C15.4843 15.8907 15.2146 16 14.9328 16C14.6514 16 14.3818 15.8906 14.1787 15.6875L8.00017 9.50934L1.82171 15.6875C1.6182 15.8907 1.34876 16 1.06708 16C0.785733 16 0.516056 15.8906 0.312965 15.6875C-0.10429 15.2706 -0.10429 14.5952 0.312797 14.1784L6.03276 8.45867L6.49146 8L0.312945 1.82177C-0.10429 1.40483 -0.10429 0.729418 0.312797 0.31262C0.728936 -0.104145 1.40489 -0.104051 1.82185 0.31262L7.54152 6.03202L8.00017 6.49065L14.1786 0.312472C14.5955 -0.104107 15.2707 -0.104201 15.6874 0.312452C16.1042 0.729289 16.1042 1.40496 15.6874 1.82179Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
             opacity: 1;
         }
+
+        .modal-title {
+            font-weight: 500;
+            color: $black;
+        }
     }
     &.modal-component {
         .modal-dialog {
@@ -141,4 +182,4 @@ body {
         }
     }
 }
-</style>
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-    <div v-for="(q, i) in questions" :key="i">
+    <div v-for="(q, i) in questions" :key="i" class="questionBlock" >
         <transition appear name="fade" mode="out-in">
             <buttonQuestion
                 v-if="q.answerSelected || q.questionSequence === currentQuestionNum"
@@ -161,3 +161,12 @@ export default {
     },
 };
 </script>
+<style lang="scss">
+
+.questionBlock:not(:nth-of-type(1)){
+    .button-question.radioQuestion >div {
+    margin-top: 0.73rem;
+    }
+}
+
+</style>

src/helpers/cms-content-helper.js

@@ -1,4 +1,4 @@
-import { dynamicStrings } from '@/constants/dynamic-strings';
+5import { dynamicStrings } from '@/constants/dynamic-strings';
 import { useMainStore } from '@/store';
 
 export function fetchCmsContentForPage(issPage) {
@@ -223,7 +223,7 @@ function mapStringToState(str) {
     }
   
     return stringBuilder.trimStart();
-  }
+}
 
 function getStoreValueFromString(str) {
     if (!str) return '';
@@ -419,6 +419,19 @@ export function doesCopyContainTextLink(copy) {
     return copy.includes(dynamicStrings.TEXT_LINK);
 }
 
+export function setupModalLinks(context) {
+  context.$nextTick(() => {
+    const elements = document.getElementsByClassName("modal-text")
+    for(let element of elements){
+      const target = element.getAttribute("modalTarget");
+      if(target)
+      {
+        element.addEventListener("click", () => context.$refs[target].openModal() );
+      }
+    };
+  });
+}
+
 export function doesCopyContainRouterLink(copy) {
     return copy.includes(this.dynamicStrings.ROUTER_LINK);
 }

src/helpers/unit-test-helper.js

@@ -48,6 +48,8 @@ export function getMountOptions(mockData) {
     mocks.queryStrings = queryStrings;
     mocks.$router = mockData?.router;
     mocks.$route = mockData?.route;
+    mocks.GaActions = GaActions;
+    mocks.pushEventToGA = jest.fn();
     mocks.$loadScript = mockData?.loadScript;
     mocks.prependActionToMethod = jest.fn();
   

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

@@ -10,7 +10,7 @@
         <alert
             ref="alertNoMatchWarning"
             v-if="displayNoMatchWarning"
-            class="mb-4"
+            class="mb-4 mt-4"
             cmsWidgetName="AlertNoMatchWarningWidget"
             alertClass="alert-warning"
             v-bind:isDismissible="false" />

src/iss-components/content-group-modal/content-group-modal.spec.js

@@ -0,0 +1,67 @@
+import { mount } from "@vue/test-utils";
+import contentGroupModal from "./content-group-modal";
+import crypto from "crypto";
+
+global.crypto = crypto;
+
+describe("content-group-modal.vue", () => {
+    it("Should display header text when HeaderText is defined in the CMS", async () => {
+        const wrapper = mount(contentGroupModal, {
+            mixins: [mockMixin],
+            props: {
+                cmsWidgetName: "test",
+            },
+            attachTo: document.body,
+        });
+        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["HeaderText"]));
+    });
+
+    it("Should display subheader text when SubheaderText is defined in the CMS", async () => {
+        const wrapper = mount(contentGroupModal, {
+            mixins: [mockMixin],
+            props: {
+                cmsWidgetName: "test",
+            },
+            attachTo: document.body,
+        });
+        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["SubheaderText"]));
+    });
+
+    it("Should insert image url when Image is defined in the CMS", async () => {
+        const wrapper = mount(contentGroupModal, {
+            mixins: [mockMixin],
+            props: {
+                cmsWidgetName: "test",
+            },
+            attachTo: document.body,
+        });
+        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["Image"]));
+    });
+
+    it("Should display body text when BodyText is defined in the CMS", async () => {
+        const wrapper = mount(contentGroupModal, {
+            mixins: [mockMixin],
+            props: {
+                cmsWidgetName: "test",
+            },
+            attachTo: document.body,
+        });
+        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["BodyText"]));
+    });
+});
+
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+            return mockCmsContent[cmsFieldName];
+        }),
+    },
+};
+
+const mockCmsContent = {
+    HeaderText: "Sample header text here.",
+    SubheaderText: "Sample subheader text here.",
+    Image: "https://www.sampleImage.sample",
+    BodyText: "Sample body text here.",
+    FooterText: "Sample footer text here.",
+};

src/iss-components/content-group-modal/content-group-modal.vue

@@ -0,0 +1,86 @@
+<template>
+    <modal
+        :ref="ModalName"
+        :modalId="ModalName"
+        :footerButtonText="ModalCloseButtonText"
+        @footer-button-event="footerButtonClick">
+        <img :src="ModalImage" class="mw-100 d-flex mx-auto mb-4" alt="" />
+        <h5 class="mb-4" v-html="ModalHeadline"></h5>
+        <p class="fw-bold mb-2 subheader-text" v-html="ModalSubheadertext"></p>
+        <p class="mb-0" v-html="ModalBodyText"></p>
+        <p
+            class="my-4 caption modal-sub-body"
+            v-if="ModalSubBodyText"
+            v-html="ModalSubBodyText"></p>
+    </modal>
+</template>
+
+<script>
+import modal from "@/digital-components/modal/modal";
+
+export default {
+    name: "content-group-modal",
+    props: {
+        cmsWidgetName: String,
+    },
+    computed: {
+        ModalName() {
+            return this.cmsWidgetName;
+        },
+        ModalHeadline() {
+            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
+        },
+        ModalSubheadertext() {
+            return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
+        },
+        ModalBodyText() {
+            return this.getCmsContent(this.cmsWidgetName, "BodyText");
+        },
+        ModalSubBodyText() {
+            return this.getCmsContent(this.cmsWidgetName, "BodyText2");
+        },
+        ModalImage() {
+            return this.getCmsContent(this.cmsWidgetName, "Image");
+        },
+        ModalCloseButtonText() {
+            return this.getCmsContent(this.cmsWidgetName, "FooterText");
+        },
+    },
+    methods: {
+        openModal() {
+            this.$refs[this.ModalName].openModal();
+        },
+
+        footerButtonClick() {
+            this.$refs[this.ModalName].closeModal();
+        },
+    },
+    components: {
+        modal,
+    },
+};
+</script>
+
+<style lang="scss">
+.modal {
+    &.modal-component {
+        .modal-dialog {
+            .modal-content {
+                .modal-body {
+                    .modal-sub-body {
+                        color: $gray-600;
+                    }
+                    ul {
+                        margin-bottom: 0;
+                    }
+                    p {
+                        &:last-child {
+                            margin-bottom: 0;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

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

@@ -1,34 +1,43 @@
 <template>
     <div :class="`page-container-grouped-styles questions-page`">
-        <loadingModal ref="loadingModal" />
-        <siteHeader cmsWidgetName="SiteHeaderWidget" />
-        <div class="fade-on-route-transition sub-container overflow-scroll">
-        <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
-        <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-            <alert
-                ref="alertFewMoreQuestions"
-                cmsWidgetName="alertWidget"
-                class="m-5"
-                alertClass="alert-warning"
-                :manualHeadline="alertFewMoreQuestionsHeader"
-                :manualCopy="alertFewMoreQuestionsCopy"
-                v-bind:isDismissible="false" />
-            <div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
-                <questionChain
-                    ref="questionChain"
-                    v-model="selectedAnswers[questionsDatum.answerKey]"
-                    :questionData="questionsDatum.questions"
-                    :index="i"
-                    v-if="showThisQuestionChain(questionsDatum, i)"
-                    :answerKey="questionsDatum.answerKey"
-                    :validationRules="validationRules" />
+        <div class="fade-on-route-transition position-relative">
+            <loadingModal ref="loadingModal" />
+            <siteHeader cmsWidgetName="SiteHeaderWidget" />
+            <div class="select-car">
+                <div class="container-fluid pb-2">
+                    <div class="row px-3">
+                        <div class="col">
+                            <div class="select-car-form rounded">
+                                <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
+                                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+                                <alert
+                                ref="alertFewMoreQuestions"
+                                cmsWidgetName="alertWidget"
+                                alertClass="alert-warning"
+                                :manualHeadline="alertFewMoreQuestionsHeader"
+                                :manualCopy="alertFewMoreQuestionsCopy"
+                                v-bind:isDismissible="false" />
+                                <div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
+                                    <questionChain
+                                    ref="questionChain"
+                                    v-model="selectedAnswers[questionsDatum.answerKey]"
+                                    :questionData="questionsDatum.questions"
+                                    :index="i"
+                                    v-if="showThisQuestionChain(questionsDatum, i)"
+                                    :answerKey="questionsDatum.answerKey"
+                                    :validationRules="validationRules" />
+                                </div>
+                                <siteFooter
+                                ref="siteFooter"
+                                cmsWidgetName="SiteFooterWidget"
+                                :isForwardActionDisabled="!isMetaValid"
+                                @back-clicked="handleBackButtonAction"
+                                @ForwardClicked="handleForwardButtonAction" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-            <siteFooter
-                ref="siteFooter"
-                cmsWidgetName="SiteFooterWidget"
-                :isForwardActionDisabled="!isMetaValid"
-                @back-clicked="handleBackButtonAction"
-                @ForwardClicked="handleForwardButtonAction" />
         </div>
     </div>
 </template>
@@ -95,10 +104,6 @@ export default {
 </script>
 
 <style lang="scss">
- .overflow-scroll {
-        height: calc(100% - 180px);
-        overflow-x: hidden !important;
- }
 .questions-page {
     .question-text {
         margin-bottom: 0.5rem;

src/iss-components/site-header/menu-modal/menu-modal.spec.js

@@ -24,12 +24,12 @@ describe("menu-modal.vue", () => {
         expect(modalFooter.text()).toContain("Safelite Group");
     });
 
-    it("Should return Terms of use text link text", async () => {
+    it("Should return Terms of service text link text", async () => {
         // Act
         const wrapper = shallowMount(menuModal);
 
         // Expect
-        expect(wrapper.html()).toContain("Terms of use");
+        expect(wrapper.html()).toContain("Terms of service");
     });
 
     it('Should return "Your privacy choices" text link text', async () => {

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

@@ -7,20 +7,7 @@
         </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 }" :style="`height: calc(100% - ${currentFooterAndHeaderHeight}px);`">
-        <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)">
-            <div class="bar1"></div>
-            <div class="bar2"></div>
-            <div class="bar3"></div>
-        </button>
-    </div>
+    <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-dialog modal-fullscreen">
         <div class="modal-content">
             <div class="modal-header visually-hidden">
@@ -29,7 +16,7 @@
             <div class="modal-body d-flex flex-column">
                 <textLink
                 linkType="navigation"
-                text="Terms of use"
+                text="Terms of service"
                 href="//www.safelite.com/terms-of-use"
                 target="_blank" />
                 <textLink
@@ -78,8 +65,8 @@ export default {
         show() {
             this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72;
             this.isActive = true;
-            document.querySelector('.page-container-grouped-styles').scrollTo({
-                top: 0,  behavior: 'smooth'
+            document.querySelector('.fade-on-route-transition').scrollTo({
+                top: 0,  behavior: 'instant'
             });
         },
         hide() {
@@ -112,7 +99,7 @@ export default {
             justify-content: center;
             align-items: center;
             padding: 0;//Required to prevent 'squish' on iPhone
-            z-index: 1050;
+            z-index: 1060;
             .bar1,
             .bar2,
             .bar3 {

src/iss-components/steering-text/steering-text.spec.js

@@ -0,0 +1,45 @@
+import { shallowMount } from "@vue/test-utils";
+import steeringTextModal from "./steering-text";
+import { createApp } from 'vue';
+import { createPinia } from "pinia";
+import App from '@/App.vue';
+
+describe("steering-text.vue", () => {
+    test("Should display steering text from CMS for state MA", async () => {
+        // Act
+       
+       const wrapper = shallowMount(steeringTextModal, {
+        mixins: [mockMixin],
+        props: {
+            cmsWidgetName: "MASteeringTextWidget",
+        },
+        attachTo: document.body,
+    });
+    expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["BodyText"]));
+    });
+    
+    
+});
+
+const vueApp = createApp(App);
+const pinia = createPinia();
+vueApp.use(pinia);
+///////////////
+// Constants //
+///////////////
+
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+            return mockCmsContent[cmsFieldName];
+        }),
+    },
+};
+
+
+const mockCmsContent = {
+    BodyText: "MASteeringText",
+   
+};
+
+

src/iss-components/steering-text/steering-text.vue

@@ -0,0 +1,37 @@
+<template>
+    <div>       
+        <textBlock          
+            cmsWidgetName="MASteeringText"         
+            id="SteeringTextContent"
+        />
+        <div>
+            <p class="small" v-if="isStateMA" v-html="MASteeringText" ></p>
+        </div>  
+       
+    </div>
+   
+</template>
+
+<script>
+import { useMainStore } from "@/store";
+
+ export default{
+    name: "steeringTextModal",    
+    computed: {     
+        MASteeringText() {            
+                return this.getCmsContent("MASteeringText", "BodyText");                
+            },
+        isStateMA()
+            {
+                if (this.mainStore.order.customer.address.state=='MA')
+                {
+                    return true
+                }
+            }
+    },
+    setup() {
+        const mainStore = useMainStore();
+        return { mainStore };
+    }
+ }
+</script>

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

@@ -1,60 +1,65 @@
 <template>
-    <Form
-        @submit="onSubmit"
-        @invalid-submit="onInvalidSubmit"
-        ref="theForm"
-        v-slot="{ meta }"
-        autocomplete="off">
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
         <div class="page-container-grouped-styles">
-            <siteHeader cmsWidgetName="SiteHeaderWidget" ref="siteHeader" />
-            <div class="fade-on-route-transition sub-container overflow-scroll px-5">
-                <vehicleBanner
-                    class="mb-3"
-                    cmsWidgetName="VehicleBannerWidget"
-                    ref="vehicleBanner"
-                    :displayGenericVehicleImage="false" />
-                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" ref="siteSubHeader" />
-                <alert
-                    ref="alertVinNotFound"
-                    v-if="displayVinNotFoundAlert"
-                    class="mb-4"
-                    cmsWidgetName="AlertVinNotFoundWidget"
-                    alertClass="alert-danger"
-                    v-bind:isDismissible="false" />
-                <alert
-                    ref="alertMatchedDifferentVehicle"
-                    v-if="displayMatchedDifferentVehicleAlert"
-                    class="mb-4"
-                    :manualHeadline="AlertMatchedDifferentVehicleHeader"
-                    :manualCopy="AlertMatchedDifferentVehicleBody"
-                    alertClass="alert-warning"
-                    v-bind:isDismissible="false" />
-                <alert
-                        ref="alertMatchedTwoIdenticalYMMVehicle"
-                        v-if="displayMatchedTwoIdenticalYMMVehicleAlert"
-                        class="mb-4"
-                        cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget"
-                        :manualHeadline="AlertMatchedTwoIdenticalYMMVehicleHeader"
-                        :manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
-                        alertClass="alert-warning"
-                        v-bind:isDismissible="false" />
-                <alert
-                    ref="alertVinLookupsByHomeAddressNotAllowed"
-                    v-if="displayVinLookupByHomeAddressNotAllowedAlert"
-                    class="mb-4"
-                    cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
-                    alertClass="alert-danger"
-                    v-bind:isDismissible="false" />
+            <div class="fade-on-route-transition position-relative">
+                <siteHeader cmsWidgetName="SiteHeaderWidget" />
+                <div class="select-car">
+                    <div class="container-fluid pb-2">
+                        <div class="row px-3">
+                            <div class="col">
+                                <div class="select-car-form rounded">
+                                    <vehicleBanner
+                                    class="mb-3"
+                                    cmsWidgetName="VehicleBannerWidget"
+                                    ref="vehicleBanner"
+                                    :displayGenericVehicleImage="false" />
+                                    <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" ref="siteSubHeader" />
+                                    <alert
+                                    ref="alertVinNotFound"
+                                    v-if="displayVinNotFoundAlert"
+                                    class="mb-4 mt-4"
+                                    cmsWidgetName="AlertVinNotFoundWidget"
+                                    alertClass="alert-danger"
+                                    v-bind:isDismissible="false" />
+                                    <alert
+                                    ref="alertMatchedDifferentVehicle"
+                                    v-if="displayMatchedDifferentVehicleAlert"
+                                    class="mb-4 mt-4"
+                                    :manualHeadline="AlertMatchedDifferentVehicleHeader"
+                                    :manualCopy="AlertMatchedDifferentVehicleBody"
+                                    alertClass="alert-warning"
+                                    v-bind:isDismissible="false" />
+                                    <alert
+                                    ref="alertMatchedTwoIdenticalYMMVehicle"
+                                    v-if="displayMatchedTwoIdenticalYMMVehicleAlert"
+                                    class="mb-4 mt-4"
+                                    cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget"
+                                    :manualHeadline="AlertMatchedTwoIdenticalYMMVehicleHeader"
+                                    :manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
+                                    alertClass="alert-warning"
+                                    v-bind:isDismissible="false" />
+                                    <alert
+                                    ref="alertVinLookupsByHomeAddressNotAllowed"
+                                    v-if="displayVinLookupByHomeAddressNotAllowedAlert"
+                                    class="mb-4 mt-4"
+                                    cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
+                                    alertClass="alert-danger"
+                                    v-bind:isDismissible="false" />
 
-                <customerQuestions ref="customerQuestions" v-model="customerQuestions" />
+                                    <customerQuestions ref="customerQuestions" v-model="customerQuestions" />
 
-                <siteFooter
-                    cmsWidgetName="SiteFooterWidget"
-                    ref="siteFooter"
-                    :isDisabled="!meta.valid"
-                    @ForwardClicked="forwardButtonAction"
-                    @back-clicked="backButtonAction"
-                    :isForwardActionDisabled="!meta.valid" />
+                                    <siteFooter
+                                    cmsWidgetName="SiteFooterWidget"
+                                    ref="siteFooter"
+                                    :isDisabled="!meta.valid"
+                                    @ForwardClicked="forwardButtonAction"
+                                    @back-clicked="backButtonAction"
+                                    :isForwardActionDisabled="!meta.valid" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </Form>
@@ -147,211 +152,203 @@ export default {
             let vehicleInfoToCommit = {};
 
             const vinLookupResponse = useMainStore().lookupVinByAddress ({
-                    licenseLastName: this.customerQuestions.lastName,
-                    licenseStreetAddress: this.customerQuestions.addressQuestions.streetAddress,
-                    licenseZip: this.customerQuestions.addressQuestions.zipCode,
-                    licenseState: this.customerQuestions.addressQuestions.state,
-                }
-            );
-
-            // Settle promises and get results
-            const promiseResultMap = [
-                {
-                    resultKey: "vinLookupResponse",
-                    promise: vinLookupResponse,
-                }
-            ];
-
-            const resultMap = await settleAllPromises(promiseResultMap);
-            // If VIN Lookup by address is forbidden by State Restrictions then show an alert
-            if (!resultMap.vinLookupResponse.isStatePermissible) {
-                // State Restrictions forbid lookup by address
-                this.displayVinLookupByHomeAddressNotAllowedAlert = true;
-                this.$refs.siteFooter.disableForwardButton();
-                return this.$refs.siteFooter.removeLoader();
+                licenseLastName: this.customerQuestions.lastName,
+                licenseStreetAddress: this.customerQuestions.addressQuestions.streetAddress,
+                licenseZip: this.customerQuestions.addressQuestions.zipCode,
+                licenseState: this.customerQuestions.addressQuestions.state,
             }
+        );
 
-            const carsFound = resultMap.vinLookupResponse.vinVehicles;
-
-            // Handle cases for different amounts of VINS found for the address.
-            if (carsFound.length == 1) {
-                // Single VIN found
-                const carFound = carsFound[0].vehicle;
-
-                this.isCarIdDifferent = carFound.carId !== useMainStore().order.vehicle.carId;
-                if (this.isCarIdDifferent && carFound.carId !== this.previouslyEnteredCarId) {
-                    // Display Alert
-                    this.previouslyEnteredCarId = carFound.carId;
-                    this.customAlertData.vehicleInfo = carFound;
-                    if(this.isTwoIdenticalYMMVehicleFound){
-                        this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
-                        this.forwardButtonCarStyle= carFound.style;
-                    }
-                    else{
-                        this.displayMatchedDifferentVehicleAlert = true;
-                    }
-
-                    this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
-                        carFound.carId
-                    );
-
-                    // Update button "Continue with..."
-                    this.$refs.siteFooter.updateButtonText(
-                        `Continue with ${carFound.year} ${carFound.make} ${carFound.model} ${this.forwardButtonCarStyle}`
-                    );
-                    return this.$refs.siteFooter.removeLoader();
-                }
-
-                // update data
-                vehicleInfoToCommit = Object.assign(carFound, { vin: carsFound[0].vin });
-            } else if (carsFound.length > 1) {
-
-                // If multiple cars were found and one and only one of them matches the carId entered, save the vehicle info
-                const matchingCars = carsFound.filter(
-                    (vin) => vin.vehicle.carId === this.mainStore.order.vehicle.carId
-                );
-
-                if (matchingCars.length === 1) {
-                    vehicleInfoToCommit = Object.assign(matchingCars[0].vehicle, {
-                        vin: matchingCars[0].vin,
-                    });
-                }
-            } else {
-                // No VINS found.
-                this.displayVinNotFoundAlert = true;
-                this.$refs.siteFooter.disableForwardButton();
-                return this.$refs.siteFooter.removeLoader();
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "vinLookupResponse",
+                promise: vinLookupResponse,
             }
+        ];
 
-            // Save vehicle, customer, service and registration information
-            await useMainStore().saveRegistrationAddressLookup(
-                {
-                    isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle,
-                    vehicleInfo:
-                        Object.keys(vehicleInfoToCommit).length === 0
-                            ? useMainStore().order.vehicle
-                            : vehicleInfoToCommit,
-                    registrationInfo: {
-                        firstName: this.customerQuestions.firstName,
-                        lastName: this.customerQuestions.lastName,
-                        address: this.customerQuestions.addressQuestions.streetAddress,
-                        city: this.customerQuestions.addressQuestions.city,
-                        state: this.customerQuestions.addressQuestions.state,
-                        zipCode: this.customerQuestions.addressQuestions.zipCode,
-                    },
-                },
-                false
-            );
-
-            return await this.navigateForward(carsFound);
-        },
-        async navigateForward(carsFound) {
-            // Match vehicles found to vehicles in state.
-            const matchingCars = carsFound.filter(
-                (car) => car.vehicle.carId === useMainStore().order.vehicle.carId
-            );
-
-            // If a different vehicle is found than the one entered and the selected glass is not available for that vehicle then navigate back to "vehicle-damage"
-            // display vehicle changed alert on that page.
-            if (
-                this.isCarIdDifferent &&
-                !this.isSelectedGlassAvailableForVehicle
-            ) {
-                this.$router.navigate(
-                    this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
-                    this.$route,
-                    {},
-                    { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
-                );
-            } else if (matchingCars.length === 1) {
-                await this.navigateForwardWithSingleCarMatch();
-            } else {
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES,
-                    this.$route,
-                    {},
-                    {},
-                    carsFound
-                );
-            }
-        },
-        resetWarningsAndErrors() {
-            this.displayVinNotFoundAlert = false;
-            this.displayMatchedDifferentVehicleAlert = false;
-            this.displayVinLookupByHomeAddressNotAllowedAlert = false;
-            this.$refs.siteFooter.enableForwardAction();
-        },
-    },
-    mounted() {
-        this.attachCustomEvents();
-
-    },
-    computed: {
-        AlertMatchedDifferentVehicleHeader() {
-            return this.getCmsContent(
-                "AlertMatchedDifferentVehicleWidget",
-                "HeadlineText"
-            ).replaceAll("{custom:damage}", getDamageString());
-        },
-        AlertMatchedDifferentVehicleBody() {
-            const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
-            const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
-
-            return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
-                .replaceAll("{custom:damage}", getDamageString())
-                .replaceAll("{custom:vinYmmFound}", vinYmmFound)
-                .replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
-        },
-        AlertMatchedTwoIdenticalYMMVehicleHeader() {
-            return this.getCmsContent(
-                "AlertMatchedTwoIdenticalYMMVehicleWidget",
-                "HeadlineText"
-            ).replaceAll("{custom:damage}", getDamageString());
-        },
-        AlertMatchedTwoIdenticalYMMVehicleBody() {
-            const vinYmmsFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model} ${this.customAlertData?.vehicleInfo?.style}`;
-            const vinYmmsExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model} ${this.mainStore.order.vehicle.style}`;
-
-            return this.getCmsContent("AlertMatchedTwoIdenticalYMMVehicleWidget", "BodyText")
-                .replaceAll("{custom:damage}", getDamageString())
-                .replaceAll("{custom:vinYmmsFound}", vinYmmsFound)
-                .replaceAll("{custom:vinYmmsExpected}", vinYmmsExpected);
-        },
-        isTwoIdenticalYMMVehicleFound(){
-            const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
-            const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
-            return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
+        const resultMap = await settleAllPromises(promiseResultMap);
+        // If VIN Lookup by address is forbidden by State Restrictions then show an alert
+        if (!resultMap.vinLookupResponse.isStatePermissible) {
+            // State Restrictions forbid lookup by address
+            this.displayVinLookupByHomeAddressNotAllowedAlert = true;
+            this.$refs.siteFooter.disableForwardButton();
+            return this.$refs.siteFooter.removeLoader();
         }
-    },
-    watch: {
-        customerQuestions: {
-            handler(newValue) {
-                // if they modify one of the lookup fields (address, city, state, zipCode, or lastName), then modify the button text back to "Get my personalized quote"
+
+        const carsFound = resultMap.vinLookupResponse.vinVehicles;
+
+        // Handle cases for different amounts of VINS found for the address.
+        if (carsFound.length == 1) {
+            // Single VIN found
+            const carFound = carsFound[0].vehicle;
+
+            this.isCarIdDifferent = carFound.carId !== useMainStore().order.vehicle.carId;
+            if (this.isCarIdDifferent && carFound.carId !== this.previouslyEnteredCarId) {
+                // Display Alert
+                this.previouslyEnteredCarId = carFound.carId;
+                this.customAlertData.vehicleInfo = carFound;
+                if(this.isTwoIdenticalYMMVehicleFound){
+                    this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
+                    this.forwardButtonCarStyle= carFound.style;
+                }
+                else{
+                    this.displayMatchedDifferentVehicleAlert = true;
+                }
+
+                this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
+                    carFound.carId
+                );
+
+                // Update button "Continue with..."
                 this.$refs.siteFooter.updateButtonText(
-                    this.getCmsContent("siteFooterWidget", "ForwardButtonText")
+                    `Continue with ${carFound.year} ${carFound.make} ${carFound.model} ${this.forwardButtonCarStyle}`
                 );
-                this.resetWarningsAndErrors();
+                return this.$refs.siteFooter.removeLoader();
+            }
+
+            // update data
+            vehicleInfoToCommit = Object.assign(carFound, { vin: carsFound[0].vin });
+        } else if (carsFound.length > 1) {
+
+            // If multiple cars were found and one and only one of them matches the carId entered, save the vehicle info
+            const matchingCars = carsFound.filter(
+                (vin) => vin.vehicle.carId === this.mainStore.order.vehicle.carId
+            );
+
+            if (matchingCars.length === 1) {
+                vehicleInfoToCommit = Object.assign(matchingCars[0].vehicle, {
+                    vin: matchingCars[0].vin,
+                });
+            }
+        } else {
+            // No VINS found.
+            this.displayVinNotFoundAlert = true;
+            this.$refs.siteFooter.disableForwardButton();
+            return this.$refs.siteFooter.removeLoader();
+        }
+
+        // Save vehicle, customer, service and registration information
+        await useMainStore().saveRegistrationAddressLookup(
+            {
+                isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle,
+                vehicleInfo:
+                Object.keys(vehicleInfoToCommit).length === 0
+                ? useMainStore().order.vehicle
+                : vehicleInfoToCommit,
+                registrationInfo: {
+                    firstName: this.customerQuestions.firstName,
+                    lastName: this.customerQuestions.lastName,
+                    address: this.customerQuestions.addressQuestions.streetAddress,
+                    city: this.customerQuestions.addressQuestions.city,
+                    state: this.customerQuestions.addressQuestions.state,
+                    zipCode: this.customerQuestions.addressQuestions.zipCode,
+                },
             },
-            deep: true,
+            false
+        );
+
+        return await this.navigateForward(carsFound);
+    },
+    async navigateForward(carsFound) {
+        // Match vehicles found to vehicles in state.
+        const matchingCars = carsFound.filter(
+            (car) => car.vehicle.carId === useMainStore().order.vehicle.carId
+        );
+
+        // If a different vehicle is found than the one entered and the selected glass is not available for that vehicle then navigate back to "vehicle-damage"
+        // display vehicle changed alert on that page.
+        if (
+            this.isCarIdDifferent &&
+            !this.isSelectedGlassAvailableForVehicle
+        ) {
+            this.$router.navigate(
+                this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
+                this.$route,
+                {},
+                { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
+            );
+        } else if (matchingCars.length === 1) {
+            await this.navigateForwardWithSingleCarMatch();
+        } else {
+            this.$router.navigate(
+                this.navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES,
+                this.$route,
+                {},
+                {},
+                carsFound
+            );
         }
     },
-    components: {
-        siteHeader,
-        siteFooter,
-        vehicleBanner,
-        siteSubHeader,
-        customerQuestions,
-        textboxQuestion,
-        alert,
-        Form,
+    resetWarningsAndErrors() {
+        this.displayVinNotFoundAlert = false;
+        this.displayMatchedDifferentVehicleAlert = false;
+        this.displayVinLookupByHomeAddressNotAllowedAlert = false;
+        this.$refs.siteFooter.enableForwardAction();
     },
+},
+mounted() {
+    this.attachCustomEvents();
+
+},
+computed: {
+    AlertMatchedDifferentVehicleHeader() {
+        return this.getCmsContent(
+            "AlertMatchedDifferentVehicleWidget",
+            "HeadlineText"
+        ).replaceAll("{custom:damage}", getDamageString());
+    },
+    AlertMatchedDifferentVehicleBody() {
+        const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
+        const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+
+        return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
+        .replaceAll("{custom:damage}", getDamageString())
+        .replaceAll("{custom:vinYmmFound}", vinYmmFound)
+        .replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
+    },
+    AlertMatchedTwoIdenticalYMMVehicleHeader() {
+        return this.getCmsContent(
+            "AlertMatchedTwoIdenticalYMMVehicleWidget",
+            "HeadlineText"
+        ).replaceAll("{custom:damage}", getDamageString());
+    },
+    AlertMatchedTwoIdenticalYMMVehicleBody() {
+        const vinYmmsFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model} ${this.customAlertData?.vehicleInfo?.style}`;
+        const vinYmmsExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model} ${this.mainStore.order.vehicle.style}`;
+
+        return this.getCmsContent("AlertMatchedTwoIdenticalYMMVehicleWidget", "BodyText")
+        .replaceAll("{custom:damage}", getDamageString())
+        .replaceAll("{custom:vinYmmsFound}", vinYmmsFound)
+        .replaceAll("{custom:vinYmmsExpected}", vinYmmsExpected);
+    },
+    isTwoIdenticalYMMVehicleFound(){
+        const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
+        const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+        return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
+    }
+},
+watch: {
+    customerQuestions: {
+        handler(newValue) {
+            // if they modify one of the lookup fields (address, city, state, zipCode, or lastName), then modify the button text back to "Get my personalized quote"
+            this.$refs.siteFooter.updateButtonText(
+                this.getCmsContent("siteFooterWidget", "ForwardButtonText")
+            );
+            this.resetWarningsAndErrors();
+        },
+        deep: true,
+    }
+},
+components: {
+    siteHeader,
+    siteFooter,
+    vehicleBanner,
+    siteSubHeader,
+    customerQuestions,
+    textboxQuestion,
+    alert,
+    Form,
+},
 };
 </script>
-<style lang="scss">
-
-.overflow-scroll {
-    height: calc(100% - 180px);   
-    overflow-X: hidden !important;
-
-}
-</style>

src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="px-5">
+    <div>
         <alert
             ref="differentVehicleAlert"
             v-if="displayMatchedDifferentVehicleAlert"

src/layouts/address-vehicles/address-vehicles.vue

@@ -3,18 +3,15 @@
     @submit="onSubmit"
     @invalidSubmit="onInvalidSubmit"
     ref="theForm"
-    v-slot="{ meta }"
-  >
-    <div class="page-container-grouped-styles ">
+    v-slot="{ meta }">
+    <div class="page-container-grouped-styles">
       <siteHeader cmsWidgetName="SiteHeaderWidget" />
-      <vehicleBanner
-        class="mb-3"
-        cmsWidgetName="VehicleBannerWidget"
-        :displayGenericVehicleImage="false"
-      />
-      <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-
-      <div class="px-5 ">
+      <div class="fade-on-route-transition sub-container overflow-scroll px-5">
+        <vehicleBanner
+          class="mb-3"
+          cmsWidgetName="VehicleBannerWidget"
+          :displayGenericVehicleImage="false" />
+        <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
         <alert
           cmsWidgetName="FoundMultipleVehicles"
           ref="alertFoundMultipleVehicles"
@@ -23,27 +20,19 @@
           :manualHeadline="AlertFoundMultipleVehiclesHeader"
           manualCopy=""
           v-bind:isDismissible="false"
-          id="multiple-vehicles-alert"
-        />
-      </div>
-        <div class="overflow-scroll">
-      <addressVehiclesQuestion
-        ref="addressVehiclesQuestion"
-        cmsWidgetName="VehicleConfirmationQuestion"
-        :vehicles="VehiclesForQuestions"
-        :vehicleSelected ="VehicleSelected"
-        validationRules="vehicle-required"
-        v-model="selectedVehicleVin"
-        :isCarIdDifferent="isCarIdDifferent"
-        :displayMatchedDifferentVehicleAlert = "displayMatchedDifferentVehicleAlert"
-        :displayMatchedTwoIdenticalYMMVehicleAlert = "displayMatchedTwoIdenticalYMMVehicleAlert"
-      
-      />
-      
-      <div
-        class="alert-provide-vin my-3 px-5"
-        v-if="splitAlertProvideVinBodyForLink.length"
-      >
+          id="multiple-vehicles-alert" />
+        <addressVehiclesQuestion
+          ref="addressVehiclesQuestion"
+          cmsWidgetName="VehicleConfirmationQuestion"
+          :vehicles="VehiclesForQuestions"
+          :vehicleSelected ="VehicleSelected"
+          validationRules="vehicle-required"
+          v-model="selectedVehicleVin"
+          :isCarIdDifferent="isCarIdDifferent"
+          :displayMatchedDifferentVehicleAlert = "displayMatchedDifferentVehicleAlert"
+          :displayMatchedTwoIdenticalYMMVehicleAlert = "displayMatchedTwoIdenticalYMMVehicleAlert" />
+      <div class="alert-provide-vin my-3"
+        v-if="splitAlertProvideVinBodyForLink.length">
         <span v-for="copy in splitAlertProvideVinBodyForLink" :key="copy">
           <span v-if="doesCopyContainRouterLink(copy)" class="text-body">
             <router-link
@@ -51,21 +40,19 @@
                 query: { issPage: `${getRouterLinkRouteFromCopy(copy)}` },
                 name: 'root',
               }"
-              >{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link
-            >
+              >{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link >
           </span>
           <span v-else class="m-0 text-body" v-html="copy"></span>
         </span>
       </div>
+      <siteFooter
+        cmsWidgetName="SiteFooterWidget"
+        :isForwardActionDisabled="!meta.valid"
+        @backClicked="backButtonAction"
+        @forwardClicked="forwardButtonAction"
+        ref="siteFooter" />
+      </div>
     </div>
-  </div>
-    <siteFooter
-      cmsWidgetName="SiteFooterWidget"
-      :isForwardActionDisabled="!meta.valid"
-      @backClicked="backButtonAction"
-      @forwardClicked="forwardButtonAction"
-      ref="siteFooter"
-    />
   </Form>
 </template>
 
@@ -303,9 +290,9 @@ export default {
 #multiple-vehicles-alert p {
   margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body text
 }
+
 .overflow-scroll {    
-    height: calc(100% - 432px);   
+    height: calc(100% - 180px);   
     overflow-X: hidden !important;
-   
 }
 </style>

src/layouts/contact-details/contact-details.vue

@@ -0,0 +1,81 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
+        <div class="page-container-grouped-styles">
+            <div class="fade-on-route-transition position-relative">
+                <siteHeader cmsWidgetName="SiteHeaderWidget"/>
+                <div class="container-fluid pb-2">
+                    <p>Placeholder for contact details page</p>
+                    <siteFooter
+                    cmsWidgetName="SiteFooterWidget"
+                    ref="siteFooter"
+                    :isForwardActionDisabled="!meta.valid"
+                    @ForwardClicked="forwardButtonAction" 
+                    @back-clicked="backButtonAction"
+                    />
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+<script>
+// Components
+import siteHeader from '@/iss-components/site-header/site-header';
+import siteFooter from "@/iss-components/site-footer/site-footer";
+
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { Form } from "vee-validate";
+import BaseFormMixin from '@/mixins/base-form-mixin.js';
+import { useMainStore } from '@/store';
+
+export default {
+    name: "contact-details",
+    mixins: [BaseFormMixin],
+    data() {
+
+    },
+    setup() {
+        const mainStore = useMainStore();
+        return { mainStore };
+    },
+    async beforeRouteEnter(to, from, next)
+    {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },];
+
+            //use resultMap to populate layout content.
+            let resultMap = await settleAllPromises(promiseResultMap);
+
+            next((vm) => {
+                vm.setCmsContent(resultMap.cmsContent);
+            });
+        },
+        methods:
+        {
+            backButtonAction() {
+                this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+            },
+
+            forwardButtonAction() {
+            },
+
+            navigateForward() {
+            },
+        },
+        components: {
+            siteHeader,
+            siteFooter,
+            Form,
+        },
+    }
+</script>
+<style lang="scss">
+</style>

src/layouts/coverage-statement/coverage-statement.spec.js

@@ -8,7 +8,7 @@ import { useMainStore } from "@/store";
 import baseMixin from "@/mixins/base-mixin";
 import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
 import { applicationConfig } from "@/constants/application-config";
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { fetchCmsContentForPage, setupModalLinks } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper.js";
 
 jest.mock("@/helpers/damage-helper", () => ({
@@ -20,9 +20,10 @@ jest.mock("@/helpers/layout-helper.js", () => ({
     settleAllPromises: jest.fn(),
 }));
 
-// Mock fetchCmsContentForPage
+// Mock fetchCmsContentForPage, setupModalLinks
 jest.mock("@/helpers/cms-content-helper", () => ({
     fetchCmsContentForPage: jest.fn(),
+    setupModalLinks: jest.fn(),
 }));
 
 describe("coverage-statement.vue...", () => {

src/layouts/coverage-statement/coverage-statement.vue

@@ -1,48 +1,48 @@
 <template>
-  <Form
-    @submit="onSubmit"
-    @invalidSubmit="onInvalidSubmit"
-    v-slot="{ meta }"
-  >
-    <div class="page-container-grouped-styles">
-      <siteHeader
-        cmsWidgetName="SiteHeaderWidget"
-      />
-      <div class="fade-on-route-transition sub-container overflow-scroll  px-5">
-        <textBlock
-            cmsWidgetName="verifyingCoverageStatement"
-            typeStyle="h5"
-            justifyText="center"
-            class="mt-0 mb-4"
-            id="coverage-statement-text-block"
-        />
-        <div>
-          <p
-            v-html="continueWithSchedulingBodyText"
-            class="mt-0 small" >
-          </p>
-        </div>
-        <textBlock
-            cmsWidgetName="whatHappensNextCopy"
-            class="mt-4 mb-2 fw-bold"
-            id="coverage-statement-text-block"
-        />
-        <div>
-          <p class="small"
-            v-html="bodyText" 
-            ref="coverageStatementBodyText">
-          </p>
-        </div>
-        <recalModal cmsWidgetName="RecalModal" />
-        <siteFooter
-          cmsWidgetName="SiteFooterWidget"
-          :isForwardActionDisabled="!meta.valid"
-          @backClicked="navigateBack"
-          @forwardClicked="forwardButtonAction"
-          ref="siteFooter"
-        />
+  <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
+      <div class="page-container-grouped-styles">
+          <div class="fade-on-route-transition position-relative">
+              <siteHeader cmsWidgetName="SiteHeaderWidget" />
+              <div class="select-car">
+                  <div class="container-fluid pb-2">
+                      <div class="row px-3">
+                          <div class="col">
+                              <div class="select-car-form rounded">
+                                  <textBlock
+                                  cmsWidgetName="verifyingCoverageStatement"
+                                  typeStyle="h5"
+                                  justifyText="center"
+                                  class="mt-0 mb-4"
+                                  id="coverage-statement-text-block"
+                                  />
+                                  <div>
+                                      <p v-html="continueWithSchedulingBodyText" class="mt-0 small" ></p>
+                                  </div>
+                                  <textBlock
+                                  cmsWidgetName="whatHappensNextCopy"
+                                  class="mt-4 mb-2 fw-bold"
+                                  id="coverage-statement-text-block"
+                                  />
+                                  <div>
+                                      <p class="small" v-html="bodyText" ref="coverageStatementBodyText"></p>
+                                  </div>
+                                  
+                                  <steeringText  cmsWidgetName="MASteeringText" ></steeringText>
+                                  <siteFooter
+                                  cmsWidgetName="SiteFooterWidget"
+                                  :isForwardActionDisabled="!meta.valid"
+                                  @backClicked="navigateBack"
+                                  @forwardClicked="forwardButtonAction"
+                                  ref="siteFooter"
+                                  />
+                              </div>
+                          </div>
+                      </div>
+                  </div>
+              </div>
+          </div>
       </div>
-    </div>
+      <recalModal ref="RecalModal" cmsWidgetName="RecalModal" />	
   </Form>
 </template>
 <script>
@@ -55,9 +55,9 @@ import siteHeader from '@/iss-components/site-header/site-header.vue';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import textBlock from "@/digital-components/text-block/text-block";
 import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal.vue';
-
+import steeringText from "@/iss-components/steering-text/steering-text.vue";
 // Import Supporting Files
-import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import { fetchCmsContentForPage, setupModalLinks } from '@/helpers/cms-content-helper';
 import { settleAllPromises } from '@/helpers/layout-helper';
 import { getDamageString } from '@/helpers/damage-helper.js';
 import { useMainStore } from "@/store";
@@ -67,109 +67,109 @@ export default {
   name: 'coverage-statement',
   mixins: [baseFormMixin, vehicleQuestionsMixin],
   components: {
-    siteFooter,
-    siteHeader,
-    siteSubHeader,
-    Form,
-    textBlock,
-    recalModal
+      siteFooter,
+      siteHeader,
+      siteSubHeader,
+      Form,
+      textBlock,
+      recalModal,
+      steeringText
+  },
+  mounted() { 
+    setupModalLinks(this);
   },
   computed: {
-    bodyText() {
-      if (useMainStore().order.damage.isRepair) {
-        return this.unverifiedNonADASRepairBodyText;
-      }
-      else {
-        let parts = useMainStore().order.lineItems.glassParts;
+      bodyText() {
+          if (useMainStore().order.damage.isRepair) {
+              return this.unverifiedNonADASRepairBodyText;
+          }
+          else {
+              let parts = useMainStore().order.lineItems.glassParts;
 
-        // if ADAS, display ADASNextSteps
-        if (parts.filter(part => part.requiresRecalibration).length > 0) {
-          return this.unverifiedADASNextStepsBodyText;
-        }
-        // if non-ADAS, display NonADASNextSteps
-        else {
-          return this.unverifiedNonADASNextStepsBodyText;
-        }
-      }
-    },
-    continueWithSchedulingBodyText() {
-      return this.getCmsContent("continueWithSchedulingCopy", "BodyText");
-    },
-    unverifiedADASNextStepsBodyText() {
-      return this.getCmsContent("UnverifiedADASNextStepsWidget", "BodyText").replaceAll("{custom:damage}", this.damageText);
-    },
-    unverifiedNonADASNextStepsBodyText() {
-      return this.getCmsContent("UnverifiedNonADASNextStepsWidget", "BodyText").replaceAll("{custom:damage}", this.damageText);
-    },
-    unverifiedNonADASRepairBodyText() {
-      return this.getCmsContent("UnverifiedNonADASRepairWidget", "BodyText");
-    },
-    damageText() {
-    var damageString = getDamageString();
-    return damageString == "match" ? "" : damageString;
-    },
+              // if ADAS, display ADASNextSteps
+              if (parts.filter(part => part.requiresRecalibration).length > 0) {
+                  return this.unverifiedADASNextStepsBodyText;
+              }
+              // if non-ADAS, display NonADASNextSteps
+              else {
+                  return this.unverifiedNonADASNextStepsBodyText;
+              }
+          }
+      },
+      continueWithSchedulingBodyText() {
+          return this.getCmsContent("continueWithSchedulingCopy", "BodyText");
+      },
+      unverifiedADASNextStepsBodyText() {
+          return this.getCmsContent("UnverifiedADASNextStepsWidget", "BodyText").replaceAll("{custom:damage}", this.damageText);
+      },
+      unverifiedNonADASNextStepsBodyText() {
+          return this.getCmsContent("UnverifiedNonADASNextStepsWidget", "BodyText").replaceAll("{custom:damage}", this.damageText);
+      },
+      unverifiedNonADASRepairBodyText() {
+          return this.getCmsContent("UnverifiedNonADASRepairWidget", "BodyText");
+      },
+      damageText() {
+          var damageString = getDamageString();
+          return damageString == "match" ? "" : damageString;
+      },
   },
   async beforeRouteEnter(to, from, next) {
-    // Call APIs
-    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+      // Call APIs
+      const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
-    // Settle promises and get results
-    const promiseResultMap = [
-      {
-        resultKey: 'cmsContent',
-        promise: cmsContentPromise,
-      },
-    ];
+      // Settle promises and get results
+      const promiseResultMap = [
+          {
+              resultKey: 'cmsContent',
+              promise: cmsContentPromise,
+          },
+      ];
 
-    const resultMap = await settleAllPromises(promiseResultMap);
+      const resultMap = await settleAllPromises(promiseResultMap);
 
-    next((vm) => {
-      vm.setCmsContent(resultMap.cmsContent);
-    });
+      next((vm) => {
+          vm.setCmsContent(resultMap.cmsContent);
+      });
   },
   methods: {
-    arePagePrerequisitesValid() {
-      if (useMainStore().order.vehicle.vin) {
-        return true;
-      }
-        return false;
-    },
+      arePagePrerequisitesValid() {
+          if (useMainStore().order.vehicle.vin) {
+              return true;
+          }
+          return false;
+      },
 
-    async forwardButtonAction() {
-      return this.navigateForward();
-    },
+      async forwardButtonAction() {
+          return this.navigateForward();
+      },
 
-    navigateForward() {
-      this.$router.navigate(
-        this.navigationScenarios.CLICKED_FORWARD_COVERAGE_STATEMENT,
-        this.$route
-      );
-    },
+      navigateForward() {
+          this.$router.navigate(
+              this.navigationScenarios.CLICKED_FORWARD_COVERAGE_STATEMENT,
+              this.$route
+          );
+      },
   },
 };
 </script>
 
 <style lang="scss">
-.overflow-scroll {    
-    height: calc(100% - 168px);   
-    overflow-X: hidden !important;   
-}
 ol {
-    margin-left: -1rem;
-      li {
-          margin-bottom: .5rem;
+  margin-left: -1rem;
+  li {
+      margin-bottom: .5rem;
+      line-height: 1.5rem;
+      a {
           line-height: 1.5rem;
-          a {
-            line-height: 1.5rem;
-            padding: 0;
-          }
+          padding: 0;
       }
+  }
 }
 #coverage-statement-text-block {
-    color: #000000;
+  color: $black;
 }
 p strong {
-    color: #000000;
-    font-weight: 500;
+  color: $black;
+  font-weight: 500;
 }
-</style>
+</style>

src/layouts/coverage-statement/recal-modal/recal-modal.spec.js

@@ -1,10 +1,10 @@
-import { shallowMount } from "@vue/test-utils";
+import { shallowMount, mount } from "@vue/test-utils";
 import recalModal from "@/layouts/coverage-statement/recal-modal/recal-modal.vue";
 
 describe("modal.vue", () => {
     it("Should display header text when HeaderText is defined in the CMS", async () => {
         // Act
-        const wrapper = shallowMount(recalModal, {
+        const wrapper = mount(recalModal, {
             mixins: [mockMixin],
             props: {
                 cmsWidgetName: "test",
@@ -16,7 +16,7 @@ describe("modal.vue", () => {
 
     it("Should display subheader text when SubheaderText is defined in the CMS", async () => {
         // Act
-        const wrapper = shallowMount(recalModal, {
+        const wrapper = mount(recalModal, {
             mixins: [mockMixin],
             props: {
                 cmsWidgetName: "test",
@@ -28,7 +28,7 @@ describe("modal.vue", () => {
 
     it("Should insert image url when Image is defined in the CMS", async () => {
         // Act
-        const wrapper = shallowMount(recalModal, {
+        const wrapper = mount(recalModal, {
             mixins: [mockMixin],
             props: {
                 cmsWidgetName: "test",
@@ -40,7 +40,7 @@ describe("modal.vue", () => {
 
     it("Should display body text when BodyText is defined in the CMS", async () => {
         // Act
-        const wrapper = shallowMount(recalModal, {
+        const wrapper = mount(recalModal, {
             mixins: [mockMixin],
             props: {
                 cmsWidgetName: "test",

src/layouts/coverage-statement/recal-modal/recal-modal.vue

@@ -1,55 +1,45 @@
 <template>
-    <!-- Modal -->
-    <div
-        class="modal fade modal-component"
-        v-on="{ 'hidden.bs.modal': resetButtonStyle }"
-        :id="cmsWidgetName"
-        tabindex="-1"
-        aria-labelledby="ModalComponentLabel"
-        aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button
-                        type="button"
-                        class="btn-close"
-                        data-bs-dismiss="modal"
-                        aria-label="Close"></button>
-                </div>
-                <div class="modal-body ps-4 pe-4 pt-0 pb-5">
-                    <h5 class="mb-4 text-center" v-html="ModalHeadline"></h5>
-                    <img :src="ModalImage" class="mw-100 d-flex mx-auto mb-4" alt="" />
-                    <p class="fw-bold mb-2 subheader-text" v-html="ModalSubheadertext"></p>
-                    <p class="mb-0 small" v-html="ModalBodyText"></p>
-                    <p
-                        class="my-4 caption modal-sub-body"
-                        v-if="ModalSubBodyText"
-                        v-html="ModalSubBodyText"></p>
-                </div>
-                <div class="modal-footer px-5 py-4">
-                    <buttonMain
-                        isPrimary
-                        class="w-100"
-                        ref="buttonMain"
-                        suppressLoader
-                        :buttonText="ModalCloseButtonText"
-                        @click-event="buttonClick"
-                        data-bs-dismiss="modal" />
-                </div>
-            </div>
+    <modal
+        :ref="ModalName"
+        :modalId="ModalName"
+        :footerButtonText="ModalCloseButtonText" 
+        @footer-button-event="closeModal"
+       >
+        <div class="recal-modal-body ps-4 pe-4 pt-0 pb-5">
+            <h5 class="mb-4 text-center" v-html="ModalHeadline"></h5>
+            <img :src="ModalImage" class="mw-100 d-flex mx-auto mb-4" alt="" />
+            <p class="fw-bold mb-2 subheader-text" v-html="ModalSubheadertext"></p>
+            <p class="mb-0 small" v-html="ModalBodyText"></p>
+            <p
+                class="my-4 caption modal-sub-body"
+                v-if="ModalSubBodyText"
+                v-html="ModalSubBodyText">
+            </p>
         </div>
-    </div>
+    </modal>
+
 </template>
 
 <script>
-import buttonMain from "@/ux-components/button-main/button-main";
+import modal from "@/digital-components/modal/modal";
 
 export default {
-    name: "modal",
+    name: "recal-modal",
     props: {
         cmsWidgetName: String,
     },
+    methods: {
+        openModal() {
+            this.$refs[this.ModalName].openModal();
+        },
+        closeModal() {
+            this.$refs[this.ModalName].closeModal();
+        },
+    },
     computed: {
+        ModalName() {
+            return this.cmsWidgetName;
+        },
         ModalHeadline() {
             return this.getCmsContent(this.cmsWidgetName, "HeaderText");
         },
@@ -69,77 +59,30 @@ export default {
             return this.getCmsContent(this.cmsWidgetName, "FooterText");
         },
     },
-    methods: {
-        resetButtonStyle() {
-            this.$refs.buttonMain.resetButtonStyle();
-        },
-    },
     components: {
-        buttonMain,
+        modal,
     },
 };
 </script>
 
 <style lang="scss">
-.modal {
-    top: auto;
-    bottom: 0;
-    overflow: hidden;
-    h5,
-    strong,
-    .subheader-text {
-        color: $black;
-    }
-    .modal-header {
-        border-bottom: none;
-        .btn-close {
-            background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.6874 1.82179L9.50889 8L15.6874 14.1782C16.1042 14.595 16.1042 15.2707 15.6874 15.6875C15.4843 15.8907 15.2146 16 14.9328 16C14.6514 16 14.3818 15.8906 14.1787 15.6875L8.00017 9.50934L1.82171 15.6875C1.6182 15.8907 1.34876 16 1.06708 16C0.785733 16 0.516056 15.8906 0.312965 15.6875C-0.10429 15.2706 -0.10429 14.5952 0.312797 14.1784L6.03276 8.45867L6.49146 8L0.312945 1.82177C-0.10429 1.40483 -0.10429 0.729418 0.312797 0.31262C0.728936 -0.104145 1.40489 -0.104051 1.82185 0.31262L7.54152 6.03202L8.00017 6.49065L14.1786 0.312472C14.5955 -0.104107 15.2707 -0.104201 15.6874 0.312452C16.1042 0.729289 16.1042 1.40496 15.6874 1.82179Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
-            opacity: 1;
+
+    .recal-modal-body {
+        .modal-sub-body {
+            color: $gray-600;
         }
-    }
-    &.modal-component {
-        .modal-dialog {
-            max-width: 576px;
-            margin: 0 auto;
-            .modal-content {
-                margin: 0 auto;
-                box-shadow: 0px 16px 48px -16px rgba(0, 0, 0, 0.25);
-                border-radius: 1.5rem 1.5rem 0 0;
-                .modal-body {
-                    .modal-sub-body {
-                        color: $gray-600;
-                    }
-                    ul {
-                        margin-bottom: 0;
-                    }
-                    p {
-                        &:last-child {
-                            margin-bottom: 0;
-                        }
-                    }
-                }
-            }
-            &.modal-dialog-centered {
-                align-items: flex-end;
-                min-height: 100%;
+        ul {
+            margin-bottom: 0;
+        }
+        p {
+            &:last-child {
+                margin-bottom: 0;
             }
         }
-        .modal-footer {
-            border-top: none;
-            background-color: $gray-100;
-            box-shadow: 0px -1px 0px rgba(179, 180, 181, 0.3);
-            button {
-                margin: 0;
-            }
+        .subheader-text {
+            color: $black;
         }
     }
-}
-body {
-    .modal-backdrop {
-        height: 100%;
-        &.show {
-            opacity: 0.4;
-        }
-    }
-}
+          
+
 </style>

src/layouts/entry-page/entry-page.vue

@@ -146,11 +146,11 @@
                             break;
 
                         case "returnurl":
-                            this.mainStore.iisConfig.returnURL = value;
+                            this.mainStore.issConfig.returnURL = value;
                             break;
 
                         case "returnurl2":
-                            this.mainStore.iisConfig.returnURL2 = value;
+                            this.mainStore.issConfig.returnURL2 = value;
                             break;
 
                         // Not stored

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

@@ -1,67 +1,71 @@
 <template>
-  <Form
-      @submit="onSubmit"
-      @invalid-submit="onInvalidSubmit"
-      v-slot="{ meta }">
-    <div class="page-container-grouped-styles">
-      <siteHeader cms-widget-name="SiteHeaderWidget" />
-      <div class="fade-on-route-transition sub-container overflow-scroll mt-5 px-5">
-        <vehicleBanner
-            class="mb-3"
-            cms-widget-name="VehicleBannerWidget"
-            :display-generic-vehicle-image="false" />
-        <siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
-        <alert
-          ref="alertVinNotFound"
-          v-if="displayVinNotFoundAlert"
-          class="mb-4"
-          cmsWidgetName="AlertVinNotFoundWidget"
-          alertClass="alert-danger"
-          v-bind:isDismissible="false" />
-        <alert
-          ref="alertMatchedDifferentVehicle"
-          v-if="displayMatchedDifferentVehicleAlert"
-          class="mb-4"
-          cmsWidgetName="AlertMatchedDifferentVehicleWidget"
-          :manualHeadline="AlertMatchedDifferentVehicleHeader"
-          :manualCopy="AlertMatchedDifferentVehicleBody"
-          alertClass="alert-warning"
-          v-bind:isDismissible="false" />
-          <alert
-          ref="alertMatchedTwoIdenticalYMMVehicle"
-          v-if="displayMatchedTwoIdenticalYMMVehicleAlert"
-          class="mb-4"
-          cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget"
-          :manualHeadline="AlertMatchedTwoIdenticalYMMVehicleHeader"
-          :manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
-          alertClass="alert-warning"
-          v-bind:isDismissible="false" />
-        <textboxQuestion
-          cmsWidgetName="LicensePlateNumberQuestionWidget"
-          v-model="licensePlate"
-          isRequired
-          disableAutoFill
-          id="license-plate-question-wrapper"
-          inputId="license-plate-question"
-          validationRules="license-plate-required" />
-        <dropdownQuestion
-          cmsWidgetName="StateQuestionWidget"
-          v-model="licenseState"
-          ref="state"
-          inputId="8fdf9dc2e13e430eb57529499dceb3eb"
-          :options="stateOptions"
-          disableAutoFill
-          validationRules="state-required"
-          class="mt-4" />
-        <siteFooter
-          :isForwardActionDisabled="!meta.valid"
-          cms-widget-name="SiteFooterWidget"
-          @back-clicked="backButtonAction"
-          @forward-clicked="forwardButtonAction"
-          ref="siteFooter" />
-      </div>
-    </div>
-  </Form>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
+        <div class="page-container-grouped-styles">
+            <div class="fade-on-route-transition position-relative">
+                <siteHeader cmsWidgetName="SiteHeaderWidget" />
+                <div class="select-car">
+                    <div class="container-fluid pb-2">
+                        <div class="row px-3">
+                            <div class="col">
+                                <div class="select-car-form rounded">
+                                    <vehicleBanner class="mb-3" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" />
+                                    <siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
+                                    <alert
+                                    ref="alertVinNotFound"
+                                    v-if="displayVinNotFoundAlert"
+                                    class="mb-4"
+                                    cmsWidgetName="AlertVinNotFoundWidget"
+                                    alertClass="alert-danger"
+                                    v-bind:isDismissible="false" />
+                                    <alert
+                                    ref="alertMatchedDifferentVehicle"
+                                    v-if="displayMatchedDifferentVehicleAlert"
+                                    class="mb-4"
+                                    cmsWidgetName="AlertMatchedDifferentVehicleWidget"
+                                    :manualHeadline="AlertMatchedDifferentVehicleHeader"
+                                    :manualCopy="AlertMatchedDifferentVehicleBody"
+                                    alertClass="alert-warning"
+                                    v-bind:isDismissible="false" />
+                                    <alert
+                                    ref="alertMatchedTwoIdenticalYMMVehicle"
+                                    v-if="displayMatchedTwoIdenticalYMMVehicleAlert"
+                                    class="mb-4"
+                                    cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget"
+                                    :manualHeadline="AlertMatchedTwoIdenticalYMMVehicleHeader"
+                                    :manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
+                                    alertClass="alert-warning"
+                                    v-bind:isDismissible="false" />
+                                    <textboxQuestion
+                                    cmsWidgetName="LicensePlateNumberQuestionWidget"
+                                    v-model="licensePlate"
+                                    isRequired
+                                    disableAutoFill
+                                    id="license-plate-question-wrapper"
+                                    inputId="license-plate-question"
+                                    validationRules="license-plate-required" />
+                                    <dropdownQuestion
+                                    cmsWidgetName="StateQuestionWidget"
+                                    v-model="licenseState"
+                                    ref="state"
+                                    inputId="8fdf9dc2e13e430eb57529499dceb3eb"
+                                    :options="stateOptions"
+                                    disableAutoFill
+                                    validationRules="state-required"
+                                    class="mt-4" />
+                                    <siteFooter
+                                    :isForwardActionDisabled="!meta.valid"
+                                    cms-widget-name="SiteFooterWidget"
+                                    @back-clicked="backButtonAction"
+                                    @forward-clicked="forwardButtonAction"
+                                    ref="siteFooter" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </Form>
 </template>
 <script>
 // Import Supporting Files
@@ -92,55 +96,55 @@ defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIR
 defineRule("state-required", required(errorMessages.STATE_REQUIRED));
 
 export default {
-  name: 'license-plate-lookup',
-  mixins: [baseFormMixin, vinPagesMixin],
-  async beforeRouteEnter(to, from, next) {
-    // Call APIs
-    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+    name: 'license-plate-lookup',
+    mixins: [baseFormMixin, vinPagesMixin],
+    async beforeRouteEnter(to, from, next) {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
-    // Settle promises and get results
-    const promiseResultMap = [
-      {
-        resultKey: 'cmsContent',
-        promise: cmsContentPromise,
-      },
-    ];
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: 'cmsContent',
+                promise: cmsContentPromise,
+            },
+        ];
 
-    const resultMap = await settleAllPromises(promiseResultMap);
+        const resultMap = await settleAllPromises(promiseResultMap);
 
-    // Call the "next" function to complete the transition to this page.
-    next((vm) => {
-      vm.setCmsContent(resultMap.cmsContent);
-    });
-  },
-  data() {
-    return {
-      activeVehicleLookupAlertType: null,
-      vehicleFromLookup: null,
-      licensePlate: null,
-      licenseState: useMainStore().order.customer.address.state,
-      displayVinNotFoundAlert: false,
-      displayMatchedDifferentVehicleAlert: false,
-      displayMatchedTwoIdenticalYMMVehicleAlert: false,
-      previouslyEnteredCarId: "",
-      isCarIdDifferent: false,
-      customAlertData: {},
-      isSelectedGlassAvailableForVehicle: true,
-      forwardButtonCarStyle:"",
-   };
-  },
-  methods: {
-    arePagePrerequisitesValid() {
-      return this.mainStore.order.vehicle.carId !== null;
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
     },
-    loadDefaultsFromStore() {
-      this.customerQuestions = this.mainStore.customerData.addressQuestions.state;
+    data() {
+        return {
+            activeVehicleLookupAlertType: null,
+            vehicleFromLookup: null,
+            licensePlate: null,
+            licenseState: useMainStore().order.customer.address.state,
+            displayVinNotFoundAlert: false,
+            displayMatchedDifferentVehicleAlert: false,
+            displayMatchedTwoIdenticalYMMVehicleAlert: false,
+            previouslyEnteredCarId: "",
+            isCarIdDifferent: false,
+            customAlertData: {},
+            isSelectedGlassAvailableForVehicle: true,
+            forwardButtonCarStyle:"",
+        };
     },
-    backButtonAction() {
-      // route to move backwards
-      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-    },
-    attachCustomEvents() {
+    methods: {
+        arePagePrerequisitesValid() {
+            return this.mainStore.order.vehicle.carId !== null;
+        },
+        loadDefaultsFromStore() {
+            this.customerQuestions = this.mainStore.customerData.addressQuestions.state;
+        },
+        backButtonAction() {
+            // route to move backwards
+            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        attachCustomEvents() {
             this.prependActionToMethod(this, this.forwardButtonAction, () => {
                 this.pushEventToGA(
                     this.$route.query[this.queryStrings.ISS_PAGE],
@@ -149,179 +153,174 @@ export default {
                     true
                 );
             });
-    },
-    // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
-    async forwardButtonAction() {
-      this.resetWarningsAndErrors();
-
-      // Lookup VIN
-      const vinLookupResponse = await useMainStore().lookupVinByPlate(
-          this.licensePlate, this.licenseState);
-
-      // Settle promises and get results
-      const promiseResultMap = [
-        {
-          resultKey: "vinLookupResponse",
-          promise: vinLookupResponse,
         },
-      ];
+        // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
+        async forwardButtonAction() {
+            this.resetWarningsAndErrors();
 
-      const resultMap = await settleAllPromises(promiseResultMap);
+            // Lookup VIN
+            const vinLookupResponse = await useMainStore().lookupVinByPlate(
+                this.licensePlate, this.licenseState);
 
-      // No VIN found
-      if (resultMap.vinLookupResponse.error) {
-        this.displayVinNotFoundAlert = true;
-        this.$refs.siteFooter.disableForwardButton();
-        return this.$refs.siteFooter.removeLoader();
-      };
+                // Settle promises and get results
+                const promiseResultMap = [
+                    {
+                        resultKey: "vinLookupResponse",
+                        promise: vinLookupResponse,
+                    },
+                ];
 
-      // Vehicle found from VIN lookup
-      const vehicleFromLookup = resultMap.vinLookupResponse.vehicle;
+                const resultMap = await settleAllPromises(promiseResultMap);
 
-      // Check if the CarId has changed
-      this.isCarIdDifferent =
-          vehicleFromLookup.carId !== useMainStore().order.vehicle.carId;
-      // Handle changing car
-      if (
-          this.isCarIdDifferent &&
-          vehicleFromLookup.carId !== this.previouslyEnteredCarId
-      ) {
-          // Display Alert
-          this.previouslyEnteredCarId = vehicleFromLookup.carId;
-          this.customAlertData.vehicleInfo = vehicleFromLookup;
+                // No VIN found
+                if (resultMap.vinLookupResponse.error) {
+                    this.displayVinNotFoundAlert = true;
+                    this.$refs.siteFooter.disableForwardButton();
+                    return this.$refs.siteFooter.removeLoader();
+                };
 
-          if(this.isTwoIdenticalYMMVehicleFound){
-            this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
-            this.forwardButtonCarStyle= vehicleFromLookup.style;
-          }
-          else{
-            this.displayMatchedDifferentVehicleAlert = true;
-          }
+                // Vehicle found from VIN lookup
+                const vehicleFromLookup = resultMap.vinLookupResponse.vehicle;
 
-          this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
-            vehicleFromLookup.carId
-          );
+                // Check if the CarId has changed
+                this.isCarIdDifferent =
+                vehicleFromLookup.carId !== useMainStore().order.vehicle.carId;
+                // Handle changing car
+                if (
+                    this.isCarIdDifferent &&
+                    vehicleFromLookup.carId !== this.previouslyEnteredCarId
+                ) {
+                    // Display Alert
+                    this.previouslyEnteredCarId = vehicleFromLookup.carId;
+                    this.customAlertData.vehicleInfo = vehicleFromLookup;
 
-          // Update button "Continue with..."
-          this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleFromLookup.year} ${vehicleFromLookup.make} ${vehicleFromLookup.model} ${this.forwardButtonCarStyle}`);
-          return this.$refs.siteFooter.removeLoader();
-      }
+                    if(this.isTwoIdenticalYMMVehicleFound){
+                        this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
+                        this.forwardButtonCarStyle= vehicleFromLookup.style;
+                    }
+                    else{
+                        this.displayMatchedDifferentVehicleAlert = true;
+                    }
 
-      // Save vehicle, license plate, and registration information
-      await useMainStore().saveRegistrationLicensePlateLookup(
-          {
-              isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle,
-              vehicleInfo: Object.assign(vinLookupResponse.data.vehicle, { vin: vinLookupResponse.data.vin }),
-              registrationInfo: {
-                  licensePlate: this.licensePlate,
-                  state: this.licenseState,
-              },
-          },
-          false
-      );
+                    this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
+                        vehicleFromLookup.carId
+                    );
 
-      return await this.navigateForward();
-    },
-    async navigateForward() {
-      // If a different vehicle is found than the one entered and the selected glass is not available for that vehicle then navigate back to "vehicle-damage"
-      // display vehicle changed alert on that page.
-      if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
-        this.$router.navigate(
-          this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
-          this.$route,
-          {},
-          { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
-        );
-      } else {
-        await this.navigateForwardWithSingleCarMatch();
-      }
-    },
-    resetWarningsAndErrors() {
-      this.displayVinNotFoundAlert = false;
-      this.displayMatchedDifferentVehicleAlert = false;
-    },
-  },
-  mounted() {
-      this.attachCustomEvents();
-      this.loadDefaultsFromStore();
-  },
-  computed: {
-      AlertMatchedDifferentVehicleHeader() {
-            return this.getCmsContent(
-                "AlertMatchedDifferentVehicleWidget",
-                "HeadlineText"
-            ).replaceAll("{custom:damage}", getDamageString());
-      },
-      AlertMatchedDifferentVehicleBody() {
-            const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
-            const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+                    // Update button "Continue with..."
+                    this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleFromLookup.year} ${vehicleFromLookup.make} ${vehicleFromLookup.model} ${this.forwardButtonCarStyle}`);
+                    return this.$refs.siteFooter.removeLoader();
+                }
 
-            return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
+                // Save vehicle, license plate, and registration information
+                await useMainStore().saveRegistrationLicensePlateLookup(
+                    {
+                        isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle,
+                        vehicleInfo: Object.assign(vinLookupResponse.data.vehicle, { vin: vinLookupResponse.data.vin }),
+                        registrationInfo: {
+                            licensePlate: this.licensePlate,
+                            state: this.licenseState,
+                        },
+                    },
+                    false
+                );
+
+                return await this.navigateForward();
+            },
+            async navigateForward() {
+                // If a different vehicle is found than the one entered and the selected glass is not available for that vehicle then navigate back to "vehicle-damage"
+                // display vehicle changed alert on that page.
+                if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
+                    this.$router.navigate(
+                        this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
+                        this.$route,
+                        {},
+                        { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
+                    );
+                } else {
+                    await this.navigateForwardWithSingleCarMatch();
+                }
+            },
+            resetWarningsAndErrors() {
+                this.displayVinNotFoundAlert = false;
+                this.displayMatchedDifferentVehicleAlert = false;
+            },
+        },
+        mounted() {
+            this.attachCustomEvents();
+            this.loadDefaultsFromStore();
+        },
+        computed: {
+            AlertMatchedDifferentVehicleHeader() {
+                return this.getCmsContent(
+                    "AlertMatchedDifferentVehicleWidget",
+                    "HeadlineText"
+                ).replaceAll("{custom:damage}", getDamageString());
+            },
+            AlertMatchedDifferentVehicleBody() {
+                const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
+                const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+
+                return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
                 .replaceAll("{custom:damage}", getDamageString())
                 .replaceAll("{custom:vinYmmFound}", vinYmmFound)
                 .replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
-      },
-      AlertMatchedTwoIdenticalYMMVehicleHeader() {
-            return this.getCmsContent(
-                "AlertMatchedTwoIdenticalYMMVehicleWidget",
-                "HeadlineText"
-            ).replaceAll("{custom:damage}", getDamageString());
-      },
-      AlertMatchedTwoIdenticalYMMVehicleBody() {
-            const vinYmmsFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model} ${this.customAlertData?.vehicleInfo?.style}`;
-            const vinYmmsExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model} ${this.mainStore.order.vehicle.style}`;
+            },
+            AlertMatchedTwoIdenticalYMMVehicleHeader() {
+                return this.getCmsContent(
+                    "AlertMatchedTwoIdenticalYMMVehicleWidget",
+                    "HeadlineText"
+                ).replaceAll("{custom:damage}", getDamageString());
+            },
+            AlertMatchedTwoIdenticalYMMVehicleBody() {
+                const vinYmmsFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model} ${this.customAlertData?.vehicleInfo?.style}`;
+                const vinYmmsExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model} ${this.mainStore.order.vehicle.style}`;
 
-            return this.getCmsContent("AlertMatchedTwoIdenticalYMMVehicleWidget", "BodyText")
+                return this.getCmsContent("AlertMatchedTwoIdenticalYMMVehicleWidget", "BodyText")
                 .replaceAll("{custom:damage}", getDamageString())
                 .replaceAll("{custom:vinYmmsFound}", vinYmmsFound)
                 .replaceAll("{custom:vinYmmsExpected}", vinYmmsExpected);
-      },
-      isTwoIdenticalYMMVehicleFound(){
-            const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
-            const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
-            return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
+            },
+            isTwoIdenticalYMMVehicleFound(){
+                const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
+                const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+                return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
+            },
+            stateOptions: {
+                get: function () {
+                    return states;
+                },
+            },
         },
-      stateOptions: {
-        get: function () {
-            return states;
+        watch: {
+            licensePlate() {
+                this.$refs.siteFooter.updateButtonText(
+                    this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
+                );
+            },
+            registrationZipCode() {
+                this.$refs.siteFooter.updateButtonText(
+                    this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
+                );
+            },
         },
-    },
-  },
-  watch: {
-      licensePlate() {
-          this.$refs.siteFooter.updateButtonText(
-              this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
-          );
-      },
-      registrationZipCode() {
-          this.$refs.siteFooter.updateButtonText(
-              this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
-          );
-      },
-  },
-  components: {
-    Form,
-    siteFooter,
-    siteHeader,
-    siteSubHeader,
-    vehicleBanner,
-    textboxQuestion,
-    dropdownQuestion,
-    alert
-  },
-};
-</script>
+        components: {
+            Form,
+            siteFooter,
+            siteHeader,
+            siteSubHeader,
+            vehicleBanner,
+            textboxQuestion,
+            dropdownQuestion,
+            alert
+        },
+    };
+    </script>
 
-<style>
-
- .overflow-scroll {
-        height: calc(100% - 220px);
-        overflow-x: hidden !important;
- }
-#license-plate-question-wrapper .form-test-error {
-  /**
-  Override extra margin-bottom in the error message in TextboxQuestion
-  */
-  margin-bottom: 0 !important;
-}
-</style>
+    <style lang="scss">
+    #license-plate-question-wrapper .form-test-error {
+        /**
+        Override extra margin-bottom in the error message in TextboxQuestion
+        */
+        margin-bottom: 0 !important;
+    }
+    </style>

src/layouts/part-questions/part-questions.spec.js

@@ -350,7 +350,7 @@ function setupMocks({
         ],
         route: {
             query: {
-                fmgPage: "part-questions",
+                issPage: "part-questions",
             },
         },
         data() {

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

@@ -1,13 +1,14 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
-        <div class="page-container-grouped-styles  ">
-            <siteHeader cmsWidgetName="SiteHeaderWidget"/>
-            <div class="fade-on-route-transition px-5 overflow-scroll">
-                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header"/>
-                <addressQuestions ref="addressQuestions" v-model="customerQuestions.addressQuestions" includeStreetAddress2="true" id="address-questions-wrapper"/>
-                <div class="row mt-4 ">
-                    <div class="col">
-                        <textboxQuestion
+        <div class="page-container-grouped-styles">
+            <div class="fade-on-route-transition position-relative">
+                <siteHeader cmsWidgetName="SiteHeaderWidget"/>
+                <div class="container-fluid pb-2">
+                    <div class="row mt-4 px-3">
+                        <div class="col">
+                            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header"/>
+                            <addressQuestions ref="addressQuestions" v-model="customerQuestions.addressQuestions" includeStreetAddress2="true" id="address-questions-wrapper"/>
+                            <textboxQuestion
                             inputId="firstNameField"
                             cmsWidgetName="PolicyholderFirstNameQuestion"
                             v-model="customerQuestions.firstName"
@@ -15,11 +16,7 @@
                             ref="policyHolderFirstName"
                             disableAutoFill
                             validationRules="first-name-required" />
-                    </div>        
-                </div>
-                <div class="row mt-4 mb-2">
-                    <div class="col">
-                        <textboxQuestion
+                            <textboxQuestion
                             inputId="lastNameField"
                             cmsWidgetName="PolicyholderLastNameQuestion"
                             v-model="customerQuestions.lastName"
@@ -27,15 +24,16 @@
                             ref="policyHolderLastName"
                             disableAutoFill
                             validationRules="last-name-required" />
-                    </div>        
-                </div>
-                <siteFooter
+                        </div>
+                    </div>
+                    <siteFooter
                     cmsWidgetName="SiteFooterWidget"
                     ref="siteFooter"
                     :isForwardActionDisabled="!meta.valid"
                     @ForwardClicked="forwardButtonAction"
                     @back-clicked="backButtonAction"
-                     />
+                    />
+                </div>
             </div>
         </div>
     </Form>
@@ -60,7 +58,7 @@ import { useMainStore } from '@/store';
 //define validation rules
 defineRule("first-name-required", required(errorMessages.POLICYHOLDER_FIRST_NAME_REQUIRED));
 defineRule("last-name-required", required(errorMessages.POLICYHOLDER_LAST_NAME_REQUIRED));
-    
+
 export default {
     name: "policy-holder-details",
     mixins: [BaseFormMixin],
@@ -73,94 +71,90 @@ export default {
         const mainStore = useMainStore();
         return { mainStore };
     },
-    async beforeRouteEnter(to, from, next) 
+    async beforeRouteEnter(to, from, next)
     {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
         // Settle promises and get results
         const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },];
+
+
+            //use resultMap to populate layout content.
+            let resultMap = await settleAllPromises(promiseResultMap);
+
+            next((vm) => {
+                vm.setCmsContent(resultMap.cmsContent);
+            });
+        },
+        methods:
         {
-            resultKey: "cmsContent",
-            promise: cmsContentPromise,
-        },];
+            backButtonAction() {
+                this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+            },
 
-                
-        //use resultMap to populate layout content.
-        let resultMap = await settleAllPromises(promiseResultMap);
+            forwardButtonAction()
+            {
+                this.mainStore.updatePolicyHolderDetails(this.customerQuestions);
+                return this.navigateForward();
+            },
 
-        next((vm) => {
-           vm.setCmsContent(resultMap.cmsContent);
-        });
-    },
-    methods:
+            navigateForward() {
+                this.$router.navigate(
+                    this.navigationScenarios.CLICKED_FORWARD_POLICY_HOLDER_DETAILS,
+                    this.$route
+                );
+            },
+            getPolicyHolderDetailsFromStore() {
+                return {
+                    addressQuestions :
+                    {
+                        streetAddress: this.mainStore.order.customer.address.streetAddress,
+                        streetAddress2: this.mainStore.order.customer.address.streetAddress2,
+                        city: this.mainStore.order.customer.address.city,
+                        state: this.mainStore.order.customer.address.state,
+                        zipCode: this.mainStore.order.customer.address.zipCode,
+                    },
+                    firstName : this.mainStore.order.customer.firstName,
+                    lastName : this.mainStore.order.customer.lastName,
+                }
+            },
+        },
+        components: {
+            siteHeader,
+            siteSubHeader,
+            textboxQuestion,
+            addressQuestions,
+            siteFooter,
+            Form,
+        },
+    }
+    </script>
+    <style lang="scss">
+    .alert.alert-warning
     {
-        backButtonAction() {
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
-        
-        forwardButtonAction()
-        {
-            this.mainStore.updatePolicyHolderDetails(this.customerQuestions);
-            return this.navigateForward();
-        },
+        margin-top: 20px;
+    }
 
-        navigateForward() {            
-            this.$router.navigate(
-                this.navigationScenarios.CLICKED_FORWARD_POLICY_HOLDER_DETAILS,
-                this.$route
-            );
-        },
-        getPolicyHolderDetailsFromStore() {
-            return {
-                addressQuestions :
-                {
-                    streetAddress: this.mainStore.order.customer.address.streetAddress,
-                    streetAddress2: this.mainStore.order.customer.address.streetAddress2,
-                    city: this.mainStore.order.customer.address.city,
-                    state: this.mainStore.order.customer.address.state,
-                    zipCode: this.mainStore.order.customer.address.zipCode,
-                },
-                firstName : this.mainStore.order.customer.firstName,
-                lastName : this.mainStore.order.customer.lastName,
-            }
-        },
-    },
-    components: {
-        siteHeader,
-        siteSubHeader,
-        textboxQuestion,
-        addressQuestions,
-        siteFooter,
-        Form,
-    },
-}
-</script>
-<style lang="scss">
-.overflow-scroll {    
-    height: calc(100% - 168px);   
-    overflow-X: hidden !important;   
-}
-.alert.alert-warning
-{
-    margin-top: 20px;
-}
+    #sub-header p {
+        font-size: 16px;
+        line-height: 26px;
+        color: #4D5151;
+    }
 
-#sub-header p {
-    font-size: 16px;
-    line-height: 26px;
-    color: #4D5151;
-}
+    #address-questions-wrapper {
+        margin-top: 24px;
+    }
 
-#address-questions-wrapper {
-    margin-top: 24px;
-}
+    #address-questions-wrapper .alert.heading  {
+        line-height: 24px;
+    }
 
-#address-questions-wrapper .alert.heading  {
-    line-height: 24px;
-}
-
-#address-questions-wrapper .form-test-error {
-    line-height: 24px;
-}
-</style>
+    #address-questions-wrapper .form-test-error {
+        line-height: 24px;
+    }
+    </style>

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

@@ -1,43 +1,56 @@
 <template>
-  <Form @submit="onSubmit" @invalidSubmit="onInvalidSubmit" v-slot="{ meta }">
-    <div class="page-container-grouped-styles overflow-auto">
-      <siteHeader cmsWidgetName="SiteHeaderWidget" />
-      <siteSubHeader cmsWidgetName="SiteSubHeader" id="sub-header" />
-      <div class="fade-on-route-transition sub-container make-tall px-5">
-        <div v-html="ProviderPreferenceHeaderText"  class="text-center mt-4 mb-4" ></div>
-        <div
-            v-html="ProviderPreferenceBodyText"
-            class="mt-0" 
-        ></div>
-        <shoppreferenceModal cmsWidgetName="ShopPreferenceDrawer" /> 
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
+        <div class="page-container-grouped-styles">
+            <div class="fade-on-route-transition position-relative">
+                <siteHeader cmsWidgetName="SiteHeaderWidget" />
+                <siteSubHeader cmsWidgetName="SiteSubHeader" id="sub-header" />
+                <div class="select-car">
+                    <div class="container-fluid pb-2">
+                        <div class="row px-3">
+                            <div class="col">
+                                <div class="select-car-form rounded">
+                                    <div v-html="ProviderPreferenceHeaderText"  class="text-center mb-5 modal-link" ></div>
+                                    <div
+                                    v-html="ProviderPreferenceBodyText"
+                                    class="mt-0 body-text"
+                                    ></div>
+                                    
+                                    <buttonQuestion
+                                    cmsWidgetName="ServiceLocationQuestion"
+                                    :questionText="questionText"
+                                    :answers="answersFromCms"
+                                    buttonTypeString="listButton"
+                                    isRequired
+                                    v-model="SelectedshopLocation"
+                                    validationRules="questions-required" />
 
-        <buttonQuestion
-            cmsWidgetName="ServiceLocationQuestion"
-            :questionText="questionText"
-            :answers="answersFromCms"
-            buttonTypeString="listButton"
-            isRequired
-            v-model="SelectedshopLocation"
-            validationRules="questions-required" />
-
-        <siteFooter
-          cmsWidgetName="SiteFooterWidget"
-          :isForwardActionDisabled="isForwardActionDisabled"
-          @backClicked="backButtonAction"
-          @forwardClicked="forwardButtonAction"
-          ref="siteFooter"
-        />
-      </div>
-    </div>
-  </Form>
+                                    <siteFooter
+                                    cmsWidgetName="SiteFooterWidget"
+                                    :isForwardActionDisabled="isForwardActionDisabled"
+                                    @backClicked="backButtonAction"
+                                    @forwardClicked="forwardButtonAction"
+                                    ref="siteFooter"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <contentGroupModal cmsWidgetName="ShopPreferenceDrawer"
+                        ref="ShopPreferenceDrawer"
+                    />
+    </Form>
 </template>
 <script>
 // Import Supporting Files
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { fetchCmsContentForPage, setupModalLinks } from '@/helpers/cms-content-helper';
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
 import buttonQuestion from "@/digital-components/button-question/button-question";
+import contentGroupModal from "@/iss-components/content-group-modal/content-group-modal" 
 
 // Import Component
 import baseFormMixin from "@/mixins/base-form-mixin";
@@ -45,80 +58,100 @@ import { Form,defineRule } from "vee-validate";
 import siteFooter from "@/iss-components/site-footer/site-footer.vue";
 import siteHeader from "@/iss-components/site-header/site-header.vue";
 import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
-import shoppreferenceModal from '@/layouts/provider-preference/shoppreference-modal/shoppreference-modal.vue';
 
 // DEFINE VALIDATION RULES
 defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
 export default {
-  name: "provider-preference",
-  mixins: [baseFormMixin],
-  
-  components: {
-    siteFooter,
-    siteHeader,
-    siteSubHeader,
-    Form,
-    shoppreferenceModal,
-    buttonQuestion
-  },
-  data() {
-    return {
-      SelectedshopLocation : null,
-    };
-  },
-  async beforeRouteEnter(to, from, next) {
-    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-    // Settle promises and get results
-    const promiseResultMap = [
-      {
-        resultKey: "cmsContent",
-        promise: cmsContentPromise,
-      },
-    ];
-    const resultMap = await settleAllPromises(promiseResultMap);
-    next((vm) => {
-      vm.setCmsContent(resultMap.cmsContent);
-    });
-  },
-  computed: {
-    isForwardActionDisabled() {
-      return this.SelectedshopLocation === null;
+    name: "provider-preference",
+    mixins: [baseFormMixin],
+
+    components: {
+        siteFooter,
+        siteHeader,
+        siteSubHeader,
+        Form,
+        buttonQuestion,
+        contentGroupModal
     },
-    ProviderPreferenceHeaderText(){
-      return this.getCmsContent("ProviderPreference", "HeaderText");
+    data() {
+        return {
+            SelectedshopLocation : null,
+        };
     },
-    ProviderPreferenceBodyText(){
-      return this.getCmsContent("ProviderPreference", "BodyText");   
+    async beforeRouteEnter(to, from, next) {
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+        ];
+        const resultMap = await settleAllPromises(promiseResultMap);
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
     },
-    questionText() {
+    computed: {
+        isForwardActionDisabled() {
+            return this.SelectedshopLocation === null;
+        },
+        ProviderPreferenceHeaderText(){
+            return this.getCmsContent("ProviderPreference", "HeaderText");
+        },
+        ProviderPreferenceBodyText(){
+            return this.getCmsContent("ProviderPreference", "BodyText");
+        },
+        questionText() {
             return this.getCmsContent("ServiceLocationQuestion", "QuestionText");
         },
-    answersFromCms() {
+        answersFromCms() {
             return this.getCmsContent("ServiceLocationQuestion", "Answers");
         },
-      },
-  methods: {
-    arePagePrerequisiteValid() {
-      return true;
     },
-    backButtonAction() {
-      /**
-       * this.navigationScenarios comes from base-mixin
-       */
-      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    methods: {
+        arePagePrerequisiteValid() {
+            return true;
+        },
+        backButtonAction() {
+            /**
+            * this.navigationScenarios comes from base-mixin
+            */
+            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        forwardButtonAction() {
+            if(this.SelectedshopLocation == "Schedule with Safelite")
+            {
+                this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE, this.$route);
+            }
+        },
+        resetDependentState() {},
     },
-    forwardButtonAction() {
-      if(this.SelectedshopLocation == "Schedule with Safelite")
-      {
-        this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE, this.$route);
-      }
-    },
-    resetDependentState() {},
-  },
+    mounted() {
+        setupModalLinks(this);
+    }
 };
 </script>
 <style lang="scss">
 #sub-header span{
-color: #000000;
+    color: $black;
 }
-</style>
+.body-text {
+    color: $darker-gray;
+    p, li {
+        margin-bottom: 0.5rem;
+    }
+}
+.modal-link a{
+    color: $blue-700;
+    font-size: 14px;
+    line-height: 24px;
+    font-weight: 500;
+}
+.question-text {
+    margin-top: 0;
+    & > span {
+        text-align: left;
+    }
+}
+</style>

src/layouts/provider-preference/shoppreference-modal/shoppreference-modal.spec.js

@@ -1,41 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import shoppreferenceModal from '@/layouts/provider-preference/shoppreference-modal/shoppreference-modal.vue';
-
-describe("modal.vue", () => {
-    it("Should display header text when HeaderText is defined in the CMS", async () => {
-        // Act
-        const wrapper = shallowMount(shoppreferenceModal, {
-            mixins: [mockMixin],
-            props: {
-                cmsWidgetName: "test",
-            },
-            attachTo: document.body,
-        });
-        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["HeaderText"]));
-    });
-
-    it("Should display body text when BodyText is defined in the CMS", async () => {
-        // Act
-        const wrapper = shallowMount(shoppreferenceModal, {
-            mixins: [mockMixin],
-            props: {
-                cmsWidgetName: "test",
-            },
-            attachTo: document.body,
-        });
-        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["BodyText"]));
-    });
-});
-    const mockMixin = {
-        methods: {
-            getCmsContent: jest.fn((widgetName, cmsFieldName) => {
-                return mockCmsContent[cmsFieldName];
-            }),
-        },
-    };
-    
-    const mockCmsContent = {
-        HeaderText: "Sample header text here.",
-        BodyText: "Sample body text here.",
-        FooterText: "Sample footer text here.",
-    };

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

@@ -1,131 +0,0 @@
-<template>
-    <!-- Modal -->
-    <div
-        class="modal fade modal-component"
-        v-on="{ 'hidden.bs.modal': resetButtonStyle }"
-        :id="cmsWidgetName"
-        tabindex="-1"
-        aria-labelledby="ModalComponentLabel"
-        aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button
-                        type="button"
-                        class="btn-close"
-                        data-bs-dismiss="modal"
-                        aria-label="Close"></button>
-                </div>
-                <div class="modal-body ps-4 pe-4 pt-4 pb-4">
-                    <h5 class="mb-4 text-center header-text" v-html="ModalHeadline"></h5>
-                    <p class="mb-0 small" v-html="ModalBodyText"></p>
-                </div>
-                <div class="modal-footer px-5 py-4">
-                    <buttonMain
-                        isPrimary
-                        class="w-100"
-                        ref="buttonMain"
-                        suppressLoader
-                        :buttonText="ModalCloseButtonText"
-                        @click-event="buttonClick"
-                        data-bs-dismiss="modal" />
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import buttonMain from "@/ux-components/button-main/button-main";
-
-export default {
-    name: "modal",
-    props: {
-        cmsWidgetName: String,
-    },
-    computed: {
-        ModalHeadline() {
-            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
-        },
-        ModalBodyText() {
-            return this.getCmsContent(this.cmsWidgetName, "BodyText");
-        },
-        ModalCloseButtonText() {
-            return this.getCmsContent(this.cmsWidgetName, "FooterText");
-        },
-    },
-    methods: {
-        resetButtonStyle() {
-            this.$refs.buttonMain.resetButtonStyle();
-        },
-    },
-    components: {
-        buttonMain,
-    },
-};
-</script>
-
-<style lang="scss">
-.modal {
-    top: auto;
-    bottom: 0;
-    h5,
-    strong,
-    .header-text{
-        color: #000000;
-        font-weight: 500;
-
-    }
-    .modal-header {
-        border-bottom: none;
-        .btn-close {
-            background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.6874 1.82179L9.50889 8L15.6874 14.1782C16.1042 14.595 16.1042 15.2707 15.6874 15.6875C15.4843 15.8907 15.2146 16 14.9328 16C14.6514 16 14.3818 15.8906 14.1787 15.6875L8.00017 9.50934L1.82171 15.6875C1.6182 15.8907 1.34876 16 1.06708 16C0.785733 16 0.516056 15.8906 0.312965 15.6875C-0.10429 15.2706 -0.10429 14.5952 0.312797 14.1784L6.03276 8.45867L6.49146 8L0.312945 1.82177C-0.10429 1.40483 -0.10429 0.729418 0.312797 0.31262C0.728936 -0.104145 1.40489 -0.104051 1.82185 0.31262L7.54152 6.03202L8.00017 6.49065L14.1786 0.312472C14.5955 -0.104107 15.2707 -0.104201 15.6874 0.312452C16.1042 0.729289 16.1042 1.40496 15.6874 1.82179Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
-            opacity: 1;
-        }
-    }
-    &.modal-component {
-        .modal-dialog {
-            max-width: 576px;
-            margin: 0 auto;
-            .modal-content {
-                margin: 0 auto;
-                box-shadow: 0px 16px 48px -16px rgba(0, 0, 0, 0.25);
-                border-radius: 1.5rem 1.5rem 0 0;
-                .modal-body {
-                    .modal-sub-body {
-                        color: $gray-600;
-                    }
-                    ul {
-                        margin-bottom: 0;
-                    }
-                    p {
-                        &:last-child {
-                            margin-bottom: 0;
-                        }
-                    }
-                }
-            }
-            &.modal-dialog-centered {
-                align-items: flex-end;
-                min-height: 100%;
-            }
-        }
-        .modal-footer {
-            border-top: none;
-            background-color: $gray-100;
-            box-shadow: 0px -1px 0px rgba(179, 180, 181, 0.3);
-            button {
-                margin: 0;
-            }
-        }
-    }
-}
-body {
-    .modal-backdrop {
-        height: 100%;
-        &.show {
-            opacity: 0.4;
-        }
-    }
-}
-</style>

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

@@ -0,0 +1,81 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
+        <div class="page-container-grouped-styles">
+            <div class="fade-on-route-transition position-relative">
+                <siteHeader cmsWidgetName="SiteHeaderWidget"/>
+                <div class="container-fluid pb-2">
+                    <p>Placeholder for schedule page</p>
+                    <siteFooter
+                    cmsWidgetName="SiteFooterWidget"
+                    ref="siteFooter"
+                    :isForwardActionDisabled="!meta.valid"
+                    @ForwardClicked="forwardButtonAction"
+                    @back-clicked="backButtonAction"
+                    />
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+<script>
+// Components
+import siteHeader from '@/iss-components/site-header/site-header';
+import siteFooter from "@/iss-components/site-footer/site-footer";
+
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { Form } from "vee-validate";
+import BaseFormMixin from '@/mixins/base-form-mixin.js';
+import { useMainStore } from '@/store';
+
+export default {
+    name: "schedule-page",
+    mixins: [BaseFormMixin],
+    data() {
+
+    },
+    setup() {
+        const mainStore = useMainStore();
+        return { mainStore };
+    },
+    async beforeRouteEnter(to, from, next)
+    {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },];
+
+            //use resultMap to populate layout content.
+            let resultMap = await settleAllPromises(promiseResultMap);
+
+            next((vm) => {
+                vm.setCmsContent(resultMap.cmsContent);
+            });
+        },
+        methods:
+        {
+            backButtonAction() {
+                this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+            },
+
+            forwardButtonAction() {
+            },
+
+            navigateForward() {
+            },
+        },
+        components: {
+            siteHeader,
+            siteFooter,
+            Form,
+        },
+    }
+</script>
+<style lang="scss">
+</style>

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

@@ -0,0 +1,32 @@
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import serviceLocationModal from "@/layouts/service-location/service-location.vue";
+
+describe("navigation", () => {
+    test("if the back button is clicked, navigate back", async () => {
+        // Arrange
+        
+        const { wrapper } = setupMocks({
+        });
+
+        // Act
+        await wrapper.vm.backButtonAction();
+
+        // Assert
+        expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+    });
+});
+
+
+function setupMocks() 
+{    
+    const wrapper = shallowMount(
+        serviceLocationModal,       
+        getMountOptions({
+            router: {
+                navigate: jest.fn(),
+            },       
+        })
+    );
+    return { wrapper };
+}

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

@@ -1,71 +1,152 @@
 <template>
-    <div>
-      <Form @submit="onSubmit" @invalidSubmit="onInvalidSubmit" v-slot="{ meta }">
-    <div class="page-container-grouped-styles overflow-auto">
-      <siteHeader cmsWidgetName="SiteHeaderWidget" />
-      <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-      <div class="fade-on-route-transition sub-container make-tall px-5">
-        <p>Placeholder for service-location page</p>
-        <siteFooter
-          cmsWidgetName="SiteFooterWidget"
-          :isForwardActionDisabled="!meta.valid"
-          @backClicked="backButtonAction"
-          @forwardClicked="forwardButtonAction"
-          ref="siteFooter"
-        />
-      </div>
-    </div>
-  </Form>
-    </div>
-  </template>
-  <script>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
+        <div class="page-container-grouped-styles">  
+            <siteHeader cmsWidgetName="SiteHeaderWidget" class="siteHeader"/>
+            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header" /> 
+            <div class="fade-on-route-transition position-relative px-5 choose-option">
+
+                <buttonQuestion 
+                    cmsWidgetName="ServiceTypeQuestionWidget" 
+                    :questionText="questionText" 
+                    :answers="answersFromCms" 
+                    buttonTypeString="listCard" 
+                    isRequired 
+                    v-model="selectedValues" 
+                    validationRules="selection-required"/>
+                <div class="select-car">
+                    <div class="container-fluid pb-2">
+                        <div class="row px-3">
+                            <div class="col">
+                                <div class="select-car-form rounded">
+                                    <siteFooter
+                                    cmsWidgetName="SiteFooterWidget"
+                                    :isForwardActionDisabled="!meta.valid"
+                                    @backClicked="backButtonAction"
+                                    @forwardClicked="forwardButtonAction"
+                                    ref="siteFooter"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+<script>
   // Import Supporting Files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+import buttonQuestion from "@/digital-components/button-question/button-question";
+
 // Import Component
 import baseFormMixin from "@/mixins/base-form-mixin";
-import { Form } from "vee-validate";
+import { Form, defineRule } from "vee-validate";
 import siteFooter from "@/iss-components/site-footer/site-footer.vue";
 import siteHeader from "@/iss-components/site-header/site-header.vue";
 import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
+
+// DEFINE VALIDATION RULES
+defineRule("selection-required", required(errorMessages.OPTION_REQUIRED));
 export default {
-  name: "provider-preference",
-  mixins: [baseFormMixin],
-  components: {
-    siteFooter,
-    siteHeader,
-    siteSubHeader,
-    Form,
-  },
-  data() {
-    return {};
-  },
-  async beforeRouteEnter(to, from, next) {
-    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-    // Settle promises and get results
-    const promiseResultMap = [
-      {
-        resultKey: "cmsContent",
-        promise: cmsContentPromise,
-      },
-    ];
-    const resultMap = await settleAllPromises(promiseResultMap);
-    next((vm) => {
-      vm.setCmsContent(resultMap.cmsContent);
-    });
-  },
-  methods: {
-    arePagePrerequisiteValid() {
-      return true;
+    name: "service-location",
+    mixins: [baseFormMixin],
+    components: {
+        siteFooter,
+        siteHeader,
+        siteSubHeader,
+        buttonQuestion,
+        Form,
     },
-    backButtonAction() {
-      /**
-       * this.navigationScenarios comes from base-mixin
-       */
-      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    data() {
+        return {};
+    },
+    async beforeRouteEnter(to, from, next) {
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+        // Settle promises and get results
+        const promiseResultMap = [{
+            resultKey: "cmsContent",
+            promise: cmsContentPromise,
+        }, ];
+        const resultMap = await settleAllPromises(promiseResultMap);
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+    computed: {
+        questionText() {
+            return this.getCmsContent("ServiceTypeQuestionWidget", "QuestionText");
+        },
+        answersFromCms() {
+            return this.getCmsContent("ServiceTypeQuestionWidget", "Answers");
+        },        
+    },
+    methods: {
+        arePagePrerequisiteValid() {
+            return true;
+        },
+        backButtonAction() {
+            /**
+             * this.navigationScenarios comes from base-mixin
+             */
+            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        async forwardButtonAction() {},
+        resetDependentState() {},
     },
-    async forwardButtonAction() {},
-    resetDependentState() {},
-  },
 };
-  </script>
+</script>
+
+<style lang="scss">
+.fade-on-route-transition {
+    margin-bottom: 100px;
+}
+.page-container-grouped-styles {
+    overflow: auto;
+}
+
+.modal-open {
+    .page-container-grouped-styles {
+        overflow: hidden;
+    }
+}
+#sub-header span {
+    color: $black;
+}
+.question-text {
+   & > span {
+        line-height: 1.500rem;
+    }
+}
+.list-card-content p {
+    &:first-of-type {
+    line-height: 1.5rem;
+    }
+    &:not(:nth-of-type(1)){
+    line-height: 1.250rem;
+    }
+}
+.siteHeader{
+    .site-header{
+        margin-bottom: 1.25rem !important;
+    }
+    
+}
+.choose-option{
+        .button-question >div {
+            &:first-of-type {
+        margin-bottom: 0.95rem;
+        line-height: 1.500rem;
+            }
+    }
+}
+.button-question{
+    .row.form-test-error{
+        line-height:1.500rem;
+        padding-left: 0rem !important;
+    }
+}
+</style>

src/layouts/service-packages/service-package-question/service-package-question.vue

@@ -10,17 +10,16 @@
 </template>
 
 <script>
-    import buttonQuestion            from '@/digital-components/button-question/button-question';
-    import baseMixin                 from '@/mixins/base-mixin.js';
-    import { processIfStatements }   from '@/helpers/cms-content-helper';
+    import buttonQuestion from '@/digital-components/button-question/button-question';
+    import { processIfStatements } from '@/helpers/cms-content-helper';
     import { damageLocationsSelected as glassLocations } from '@/constants/damage-locations-selected';
-    import servicePackageRadio       from './service-package-radio/service-package-radio';
-    import { partTypeStrings }       from '@/constants/part-type-strings';
-    import { useMainStore }          from '@/store';
+    import servicePackageRadio from './service-package-radio/service-package-radio';
+    import { partTypeStrings } from '@/constants/part-type-strings';
+    import { useMainStore } from '@/store';
 
     const packageNames = {
-        TIER_ONE:   'TierOne',
-        TIER_TWO:   'TierTwo',
+        TIER_ONE: 'TierOne',
+        TIER_TWO: 'TierTwo',
         TIER_THREE: 'TierThree',
     };
     export default {
@@ -52,7 +51,6 @@
         },
         computed: {
             nullSafeAvailableLineItems() {
-                console.log('Available Line Items = ' + this.availableLineItems)
                 return this.availableLineItems ?? [];
             },
             servicePackageAnswers() {
@@ -76,22 +74,22 @@
                     return {};
                 }
                 const modifiedAnswers = cmsAnswersContent.map((answer) => ({
-                        value:               answer.Name,
-                        buttonLabel:         this.getHeaderTextFromCms(answer.cmsWidgetName),
-                        buttonLabelSubCopy:  this.getSubheaderTextFromCms(answer.cmsWidgetName),
-                        buttonBodyCopy:      this.getBodyTextFromCms(answer.cmsWidgetName),
+                        value: answer.Name,
+                        buttonLabel: this.getHeaderTextFromCms(answer.cmsWidgetName),
+                        buttonLabelSubCopy: this.getSubheaderTextFromCms(answer.cmsWidgetName),
+                        buttonBodyCopy: this.getBodyTextFromCms(answer.cmsWidgetName),
                         buttonAuxiliaryCopy: this.getPackagePriceString(answer.Name),
-                        buttonFooterCopy:    this.getFooterTextFromCms(answer.cmsWidgetName)
+                        buttonFooterCopy: this.getFooterTextFromCms(answer.cmsWidgetName)
                     }
                 ));
                 return modifiedAnswers;
             },
             frontWipersApplicableForTierTwo() {
-                const store                   = useMainStore();
+                const store = useMainStore();
                 const frontWipersAreAvailable = this.lineItemsContainsPartType(
                     partTypeStrings.FRONT_WIPER
                 );
-                const isRepair                         = store.order.damage.isRepair;
+                const isRepair = store.order.damage.isRepair;
                 const glassToReplaceContainsWindshield = this.glassToReplaceContainsGlassLocation(
                     glassLocations.WINDSHIELD
                 );

src/layouts/service-packages/service-packages.vue

@@ -20,10 +20,10 @@
                            typeStyle="caption"
                            style="margin-bottom: 6rem;"
                            class="mt-2 mx-6" />
-                <!--<contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
+                <contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
                 <contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />
                 <contentGroupModal ref="RearWiperModal" cmsWidgetName="RearWiperModal" />
-                <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />-->
+                <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
                 <siteFooter cmsWidgetName="SiteFooterWidget"
                             :isForwardActionDisabled="!meta.valid"
                             @back-clicked="backButtonAction"
@@ -40,6 +40,7 @@
     import siteSubHeader              from '@/iss-components/site-sub-header/site-sub-header';
     import servicePackageQuestion     from './service-package-question/service-package-question';
     import textBlock                  from '@/digital-components/text-block/text-block';
+    import contentGroupModal          from '@/iss-components/content-group-modal/content-group-modal';
     import loadingModal               from '@/iss-components/loading-modal/loading-modal.vue';
     import { settleAllPromises }      from '@/helpers/layout-helper';
     import { useMainStore }           from "@/store";
@@ -142,7 +143,8 @@
             Form, /* eslint-disable-line */
             textBlock,
             servicePackageQuestion,
-            loadingModal
+            loadingModal,
+            contentGroupModal
         }
     };
 </script>

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

@@ -1,58 +1,64 @@
 <template>
-    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="page-container-grouped-styles vehicle-damage">
-            <siteHeader cmsWidgetName="SiteHeaderWidget" />
-            <div class="fade-on-route-transition sub-container overflow-scroll">
-                <alert
-                    ref="vehicleChangeAlert"
-                    v-if="shouldDisplayVehicleChangeAlert"
-                    class="mt-5 mb-0"
-                    cmsWidgetName="VehicleChangeAlert"
-                    alertClass="alert-warning"
-                    :isDismissible="false" />
-                <vehicleBanner
-                    class="mb-3"
-                    cmsWidgetName="VehicleBannerWidget"
-                    :displayGenericVehicleImage="false" />
-                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-                <damageLocationQuestion
-                    ref="damageLocation"
-                    cmsWidgetName="DamageLocationQuestion"
-                    v-model="selectedDamageLocations"
-                    groupName="DamageLocationQuestion" />
-                <windshieldOptions
-                    ref="windshieldOptions"
-                    v-model="selectedWindshieldOptions"
-                    :hasRepairReplaceConflict="hasRepairReplaceConflict"
-                    :hasSplitSingleConflict="hasSplitSingleConflict"
-                    :selectedDamageLocations="selectedDamageLocations" />
-                <alert
-                    v-if="hasRepairReplaceConflict"
-                    class="my-5"
-                    cmsWidgetName="HasReplacementConflict"
-                    alertClass="alert-danger"
-                    :isDismissible="false" />
-                <sideDoorOptions
-                    ref="sideDoorOptions"
-                    cmsWidgetName="SideDoorSideQuestion"
-                    groupName="SideDoorSideQuestion"
-                    v-model="sideDoorOptionsData"
-                    v-show="!hasRepairReplaceConflict"
-                    :selectedDamageLocations="selectedDamageLocations" />
-                <replaceOptionsQuestion
-                    ref="backGlassOptions"
-                    cmsWidgetName="RearReplaceOptionsQuestion"
-                    :isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
-                    v-model="selectedRearReplaceOptions"
-                    groupName="BackGlassReplaceOptionsQuestion"
-                    validationRules="replace-options-required" />
-                <site-footer
-                    cmsWidgetName="SiteFooterWidget"
-                    :isForwardActionDisabled="!meta.valid"
-                    @backClicked="backButtonAction"
-                    @forwardClicked="forwardButtonAction"
-                    ref="siteFooter"
-                />
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
+        <div class="page-container-grouped-styles">
+            <div class="fade-on-route-transition position-relative">
+                <siteHeader cmsWidgetName="SiteHeaderWidget"/>
+                <div class="container-fluid pb-2">
+                    <div class="row mt-4 px-3">
+                        <div class="col">
+                            <alert
+                            ref="vehicleChangeAlert"
+                            v-if="shouldDisplayVehicleChangeAlert"
+                            class="mt-5 mb-0"
+                            cmsWidgetName="VehicleChangeAlert"
+                            alertClass="alert-warning"
+                            :isDismissible="false" />
+                            <vehicleBanner
+                            class="mb-3"
+                            cmsWidgetName="VehicleBannerWidget"
+                            :displayGenericVehicleImage="false" />
+                            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+                            <damageLocationQuestion
+                            ref="damageLocation"
+                            cmsWidgetName="DamageLocationQuestion"
+                            v-model="selectedDamageLocations"
+                            groupName="DamageLocationQuestion" />
+                            <windshieldOptions
+                            ref="windshieldOptions"
+                            v-model="selectedWindshieldOptions"
+                            :hasRepairReplaceConflict="hasRepairReplaceConflict"
+                            :hasSplitSingleConflict="hasSplitSingleConflict"
+                            :selectedDamageLocations="selectedDamageLocations" />
+                            <alert
+                            v-if="hasRepairReplaceConflict"
+                            class="my-5"
+                            cmsWidgetName="HasReplacementConflict"
+                            alertClass="alert-danger"
+                            :isDismissible="false" />
+                            <sideDoorOptions
+                            ref="sideDoorOptions"
+                            cmsWidgetName="SideDoorSideQuestion"
+                            groupName="SideDoorSideQuestion"
+                            v-model="sideDoorOptionsData"
+                            v-show="!hasRepairReplaceConflict"
+                            :selectedDamageLocations="selectedDamageLocations" />
+                            <replaceOptionsQuestion
+                            ref="backGlassOptions"
+                            cmsWidgetName="RearReplaceOptionsQuestion"
+                            :isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
+                            v-model="selectedRearReplaceOptions"
+                            groupName="BackGlassReplaceOptionsQuestion"
+                            validationRules="replace-options-required" />
+                            <site-footer
+                            cmsWidgetName="SiteFooterWidget"
+                            :isForwardActionDisabled="!meta.valid"
+                            @backClicked="backButtonAction"
+                            @forwardClicked="forwardButtonAction"
+                            ref="siteFooter"
+                            />
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </Form>
@@ -207,7 +213,7 @@ export default {
                     })
                 ) {
                     windShieldOptions.selectedWindshieldDamageType =
-                        damageLocationsSelected.REPLACE;
+                    damageLocationsSelected.REPLACE;
                     windShieldOptions.selectedWindshieldReplaceOptions.push(
                         damageLocationsSelected.SINGLE
                     );
@@ -222,7 +228,7 @@ export default {
                     })
                 ) {
                     windShieldOptions.selectedWindshieldDamageType =
-                        damageLocationsSelected.REPLACE;
+                    damageLocationsSelected.REPLACE;
                     windShieldOptions.selectedWindshieldReplaceOptions.push(
                         damageLocationsSelected.DRIVER
                     );
@@ -237,7 +243,7 @@ export default {
                     })
                 ) {
                     windShieldOptions.selectedWindshieldDamageType =
-                        damageLocationsSelected.REPLACE;
+                    damageLocationsSelected.REPLACE;
                     windShieldOptions.selectedWindshieldReplaceOptions.push(
                         damageLocationsSelected.PASSENGER
                     );
@@ -302,147 +308,147 @@ export default {
 
         async forwardButtonAction() {
             await this.mainStore.saveVehicleDamage(this.isWindshieldRepair,
-                    this.selectedGlassToReplace(),
-                    this.selectedWindshieldOptions.selectedWindshieldChipCount);
-            return this.navigateForward();
-        },
+                this.selectedGlassToReplace(),
+                this.selectedWindshieldOptions.selectedWindshieldChipCount);
+                return this.navigateForward();
+            },
 
-        navigateForward() {
-            if (this.mainStore.damage.isRepair) {
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD_WITH_REPAIR,
-                    this.$route
-                );
-            }
-            else {
-                // If vin already exists, navigate directly to vin-lookup
-                if (this.mainStore.order.vehicle.vin) {
+            navigateForward() {
+                if (this.mainStore.damage.isRepair) {
                     this.$router.navigate(
-                        this.navigationScenarios.CLICKED_FORWARD_WITH_VIN,
-                        this.$route
-                    );
-                } else {
-                    this.$router.navigate(
-                        this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
+                        this.navigationScenarios.CLICKED_FORWARD_WITH_REPAIR,
                         this.$route
                     );
                 }
-            }
-        },
-
-        selectedGlassToReplace() {
-            const selectedGlassToReplace = [];
-            if (this.isWindshieldDamageLocation && !this.isWindshieldRepair) {
-                this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach(
-                    (wsItem) => {
-                        selectedGlassToReplace.push({
-                            glassLocation: damageLocationsSelected.WINDSHIELD,
-                            glassName: wsItem,
-                        });
+                else {
+                    // If vin already exists, navigate directly to vin-lookup
+                    if (this.mainStore.order.vehicle.vin) {
+                        this.$router.navigate(
+                            this.navigationScenarios.CLICKED_FORWARD_WITH_VIN,
+                            this.$route
+                        );
+                    } else {
+                        this.$router.navigate(
+                            this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
+                            this.$route
+                        );
                     }
-                );
-            }
+                }
+            },
 
-            if (this.isDriverSideReplace) {
-                this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach((driverItem) => {
-                    selectedGlassToReplace.push({
-                        glassLocation: damageLocationsSelected.DRIVER,
-                        glassName: driverItem,
+            selectedGlassToReplace() {
+                const selectedGlassToReplace = [];
+                if (this.isWindshieldDamageLocation && !this.isWindshieldRepair) {
+                    this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach(
+                        (wsItem) => {
+                            selectedGlassToReplace.push({
+                                glassLocation: damageLocationsSelected.WINDSHIELD,
+                                glassName: wsItem,
+                            });
+                        }
+                    );
+                }
+
+                if (this.isDriverSideReplace) {
+                    this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach((driverItem) => {
+                        selectedGlassToReplace.push({
+                            glassLocation: damageLocationsSelected.DRIVER,
+                            glassName: driverItem,
+                        });
                     });
+                }
+
+                if (this.isPassengerSideReplace) {
+                    this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach(
+                        (passengerItem) => {
+                            selectedGlassToReplace.push({
+                                glassLocation: damageLocationsSelected.PASSENGER,
+                                glassName: passengerItem,
+                            });
+                        }
+                    );
+                }
+
+                if (this.isRearWindowDamageLocation) {
+                    selectedGlassToReplace.push({
+                        glassLocation: damageLocationsSelected.REAR,
+                        glassName: this.selectedRearReplaceOptions,
+                    });
+                }
+
+                return selectedGlassToReplace;
+            },
+        },
+        computed: {
+            isWindshieldDamageLocation() {
+                return this.selectedDamageLocations.some((selectedDamages) => {
+                    return selectedDamages.toUpperCase() === damageLocationsCms.WINDSHIELD;
                 });
-            }
-
-            if (this.isPassengerSideReplace) {
-                this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach(
-                    (passengerItem) => {
-                        selectedGlassToReplace.push({
-                            glassLocation: damageLocationsSelected.PASSENGER,
-                            glassName: passengerItem,
-                        });
-                    }
-                );
-            }
-
-            if (this.isRearWindowDamageLocation) {
-                selectedGlassToReplace.push({
-                    glassLocation: damageLocationsSelected.REAR,
-                    glassName: this.selectedRearReplaceOptions,
+            },
+            isSideDoorDamageLocation() {
+                return this.selectedDamageLocations.some((selectedDamages) => {
+                    return selectedDamages.toUpperCase() === damageLocationsCms.SIDEDOOR;
                 });
-            }
-
-            return selectedGlassToReplace;
-        },
-    },
-    computed: {
-        isWindshieldDamageLocation() {
-            return this.selectedDamageLocations.some((selectedDamages) => {
-                return selectedDamages.toUpperCase() === damageLocationsCms.WINDSHIELD;
-            });
-        },
-        isSideDoorDamageLocation() {
-            return this.selectedDamageLocations.some((selectedDamages) => {
-                return selectedDamages.toUpperCase() === damageLocationsCms.SIDEDOOR;
-            });
-        },
-        isRearWindowDamageLocation() {
-            return this.selectedDamageLocations.some((selectedDamages) => {
-                return selectedDamages.toUpperCase() === damageLocationsCms.REARWINDOW;
-            });
-        },
-        isWindshieldRepair() {
-            return (
-                this.isWindshieldDamageLocation &&
-                this.selectedWindshieldOptions.selectedWindshieldDamageType ===
+            },
+            isRearWindowDamageLocation() {
+                return this.selectedDamageLocations.some((selectedDamages) => {
+                    return selectedDamages.toUpperCase() === damageLocationsCms.REARWINDOW;
+                });
+            },
+            isWindshieldRepair() {
+                return (
+                    this.isWindshieldDamageLocation &&
+                    this.selectedWindshieldOptions.selectedWindshieldDamageType ===
                     damageLocationsSelected.REPAIR
-            );
-        },
-        isDriverSideReplace() {
-            if (!this.isSideDoorDamageLocation) return false;
+                );
+            },
+            isDriverSideReplace() {
+                if (!this.isSideDoorDamageLocation) return false;
 
-            return this.sideDoorOptionsData.selectedDoorSides.some((selectedDriverSide) => {
-                return selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE;
-            });
-        },
-        isPassengerSideReplace() {
-            if (!this.isSideDoorDamageLocation) return false;
+                return this.sideDoorOptionsData.selectedDoorSides.some((selectedDriverSide) => {
+                    return selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE;
+                });
+            },
+            isPassengerSideReplace() {
+                if (!this.isSideDoorDamageLocation) return false;
 
-            return this.sideDoorOptionsData.selectedDoorSides.some((selectedPassengerSide) => {
-                return selectedPassengerSide.toUpperCase() === damageLocationsCms.PASSENGERSIDE;
-            });
-        },
-        hasRepairReplaceConflict() {
-            return (
-                this.isWindshieldDamageLocation &&
-                this.selectedDamageLocations.length > 1 &&
-                this.isWindshieldRepair
-            );
-        },
-        hasSplitSingleConflict() {
-            if (
-                !this.selectedDamageLocations?.includes("Windshield") ||
-                this.selectedWindshieldOptions.selectedWindshieldDamageType ===
+                return this.sideDoorOptionsData.selectedDoorSides.some((selectedPassengerSide) => {
+                    return selectedPassengerSide.toUpperCase() === damageLocationsCms.PASSENGERSIDE;
+                });
+            },
+            hasRepairReplaceConflict() {
+                return (
+                    this.isWindshieldDamageLocation &&
+                    this.selectedDamageLocations.length > 1 &&
+                    this.isWindshieldRepair
+                );
+            },
+            hasSplitSingleConflict() {
+                if (
+                    !this.selectedDamageLocations?.includes("Windshield") ||
+                    this.selectedWindshieldOptions.selectedWindshieldDamageType ===
                     damageLocationsSelected.REPAIR ||
-                !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions
-            )
+                    !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions
+                )
                 return false;
 
-            return (
-                this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
-                    (selectedSingleWindshield) => {
-                        return (
-                            selectedSingleWindshield.toUpperCase() ===
-                            damageLocationsSelected.SINGLE.toUpperCase()
-                        );
-                    }
-                ) &&
-                (this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
-                    (selectedDriverWindshield) => {
-                        return (
-                            selectedDriverWindshield.toUpperCase() ===
-                            damageLocationsSelected.DRIVER.toUpperCase()
-                        );
-                    }
-                ) ||
+                return (
+                    this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
+                        (selectedSingleWindshield) => {
+                            return (
+                                selectedSingleWindshield.toUpperCase() ===
+                                damageLocationsSelected.SINGLE.toUpperCase()
+                            );
+                        }
+                    ) &&
+                    (this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
+                        (selectedDriverWindshield) => {
+                            return (
+                                selectedDriverWindshield.toUpperCase() ===
+                                damageLocationsSelected.DRIVER.toUpperCase()
+                            );
+                        }
+                    ) ||
                     this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
                         (selectedPassengerWindshield) => {
                             return (
@@ -451,31 +457,24 @@ export default {
                             );
                         }
                     ))
-            );
+                );
+            },
+            shouldDisplayVehicleChangeAlert() {
+                return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT];
+            }
         },
-        shouldDisplayVehicleChangeAlert() {
-            return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT];
-        }
-    },
 
-    components: {
-        siteHeader,
-        siteFooter,
-        vehicleBanner,
-        siteSubHeader,
-        sideDoorOptions,
-        damageLocationQuestion,
-        windshieldOptions,
-        replaceOptionsQuestion,
-        Form,
-        alert,
-    },
-};
-</script>
-<style lang="scss">
-
-.overflow-scroll {
-    height: calc(100% - 180px);
-    overflow-X: hidden !important;
-}
-</style>
+        components: {
+            siteHeader,
+            siteFooter,
+            vehicleBanner,
+            siteSubHeader,
+            sideDoorOptions,
+            damageLocationQuestion,
+            windshieldOptions,
+            replaceOptionsQuestion,
+            Form,
+            alert,
+        },
+    };
+    </script>

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

@@ -1,36 +1,25 @@
 <template>
-  <Form
-    @submit="onSubmit"
-    @invalid-submit="onInvalidSubmit"
-  >
-    <div class="page-container-grouped-styles vehicle-lookup">
-      <SiteHeader
-        cms-widget-name="SiteHeaderWidget"
-      />
-      <div class="fade-on-route-transition sub-container  overflow-scroll container gx-0">
-        <VehicleBanner
-            class="mb-3"
-            cms-widget-name="VehicleBannerWidget"
-            :display-generic-vehicle-image="false"
-        />
-        <SiteSubHeader
-            cms-widget-name="SiteSubHeaderWidget"
-        />
-        <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"
-        />
-      </div>
-    </div>
-  </Form>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit">
+        <div class="page-container-grouped-styles">
+            <div class="fade-on-route-transition position-relative">
+                <siteHeader cmsWidgetName="SiteHeaderWidget" />
+                <div class="select-car">
+                    <div class="container-fluid pb-2">
+                        <div class="row px-3">
+                            <div class="col">
+                                <div class="select-car-form rounded">
+                                    <VehicleBanner class="mb-3" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" />
+                                    <SiteSubHeader cms-widget-name="SiteSubHeaderWidget" />
+                                    <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" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </Form>
 </template>
 <script>
 // Import Supporting Files
@@ -49,78 +38,71 @@ import VehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 import VinLookupMethods from './vin-lookup-methods/vin-lookup-methods.vue';
 
 export default {
-  name: 'vehicle-lookup',
-  mixins: [BaseFormMixin],
-  components: {
-    Form,
-    SiteFooter,
-    SiteHeader,
-    SiteSubHeader,
-    VehicleBanner,
-    VinLookupMethods,
-  },
-  data() {
-    return {
-      selectedVinLookupMethod: null,
-    };
-  },
-  async beforeRouteEnter(to, from, next) {
-    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+    name: 'vehicle-lookup',
+    mixins: [BaseFormMixin],
+    components: {
+        Form,
+        SiteFooter,
+        SiteHeader,
+        SiteSubHeader,
+        VehicleBanner,
+        VinLookupMethods,
+    },
+    data() {
+        return {
+            selectedVinLookupMethod: null,
+        };
+    },
+    async beforeRouteEnter(to, from, next) {
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
-    // Settle promises and get results
-    const promiseResultMap = [
-      {
-        resultKey: 'cmsContent',
-        promise: cmsContentPromise,
-      },
-    ];
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: 'cmsContent',
+                promise: cmsContentPromise,
+            },
+        ];
 
-    const resultMap = await settleAllPromises(promiseResultMap);
+        const resultMap = await settleAllPromises(promiseResultMap);
 
-    next((vm) => {
-      vm.setCmsContent(resultMap.cmsContent);
-      vm.$refs.VinLookupMethods.initializeComponent();
-    });
-  },
-  computed: {
-    isForwardActionDisabled() {
-      return this.selectedVinLookupMethod === null;
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+            vm.$refs.VinLookupMethods.initializeComponent();
+        });
     },
-  },
-  methods: {
-    arePagePrerequisiteValid() {
-      return true;
+    computed: {
+        isForwardActionDisabled() {
+            return this.selectedVinLookupMethod === null;
+        },
     },
-    backButtonAction() {
-      /**
-       * this.navigationScenarios comes from base-mixin
-       */
-      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    methods: {
+        arePagePrerequisiteValid() {
+            return true;
+        },
+        backButtonAction() {
+            /**
+            * this.navigationScenarios comes from base-mixin
+            */
+            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        forwardButtonAction() {
+            switch (this.selectedVinLookupMethod) {
+                case vinLookupMethodSelections.MANUALVIN:
+                useMainStore().updateVehicleVin(null);
+                this.$router.navigate(this.navigationScenarios.SELECTED_MANUAL_VIN, this.$route);
+                break;
+                case vinLookupMethodSelections.LICENSEPLATE:
+                this.$router.navigate(this.navigationScenarios.SELECTED_LICENSE_PLATE, this.$route);
+                break;
+                case vinLookupMethodSelections.HOMEADDRESS:
+                this.$router.navigate(this.navigationScenarios.SELECTED_HOME_ADDRESS, this.$route);
+                break;
+                default:
+                break;
+            }
+        },
+        resetDependentState() {},
     },
-    forwardButtonAction() {
-      switch (this.selectedVinLookupMethod) {
-        case vinLookupMethodSelections.MANUALVIN:
-          useMainStore().updateVehicleVin(null);
-          this.$router.navigate(this.navigationScenarios.SELECTED_MANUAL_VIN, this.$route);
-          break;
-        case vinLookupMethodSelections.LICENSEPLATE:
-          this.$router.navigate(this.navigationScenarios.SELECTED_LICENSE_PLATE, this.$route);
-          break;
-        case vinLookupMethodSelections.HOMEADDRESS:
-          this.$router.navigate(this.navigationScenarios.SELECTED_HOME_ADDRESS, this.$route);
-          break;
-        default:
-          break;
-      }
-    },
-    resetDependentState() {},
-  },
 };
 </script>
-<style lang="scss">
-
-.overflow-scroll {
-    height: calc(100% - 180px);   
-    overflow-X: hidden !important;
-}
-</style>

src/layouts/vehicle-make/vehicle-make.vue

@@ -1,51 +1,47 @@
 <template>
-    <div class="page-container-grouped-styles">
-      <siteHeader cmsWidgetName="SiteHeaderWidget" />
-      <div class="select-car">
-        <div class="select-car-form rounded text-center">
-          <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true"/>
-          <siteSubHeader
-            cmsWidgetName="SiteSubHeaderWidget"
-            :hasBackButton="true"
-            @click-event="backButtonAction"
-          />
-          <div class="fade-on-route-transition">
-            <makeQuestion
-              class="fade-on-route-transition"
-              v-model="selectedMake"
-              ref="makeQuestion"
-              cmsWidgetName="VehicleMakeQuestion"
-            />
-          </div>
-          <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
-            @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
+    <div class="page-container-grouped-styles position-relative">
+        <div class="fade-on-route-transition position-relative">
+            <siteHeader cmsWidgetName="SiteHeaderWidget" />
+            <div class="select-car">
+                <div class="container-fluid pb-2">
+                    <div class="row">
+                        <div class="col">
+                            <div class="select-car-form rounded text-center">
+                                <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
+                                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" @click-event="backButtonAction" />
+                                <makeQuestion class="px-4" v-model="selectedMake" ref="makeQuestion" cmsWidgetName="VehicleMakeQuestion" />
+                                <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
 </template>
 
 <script>
-      // Components
-    import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
-    import siteHeader from "@/iss-components/site-header/site-header";
-    import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
-    import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
-    import siteFooter from "@/iss-components/site-footer/site-footer";
+// Components
+import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
+import siteHeader from "@/iss-components/site-header/site-header";
+import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
+import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
+import siteFooter from "@/iss-components/site-footer/site-footer";
 
-      // Supporting files
-    import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-    import { settleAllPromises } from "@/helpers/layout-helper";
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
 
-    export default {
-        name: 'vehicle-make',
-        data() {
-            return {
-                selectedMake: null,
-                shouldHideForwardButton: true
-            };
-        },
+export default {
+    name: 'vehicle-make',
+    data() {
+        return {
+            selectedMake: null,
+            shouldHideForwardButton: true
+        };
+    },
 
-        async beforeRouteEnter(to, from, next) {
+    async beforeRouteEnter(to, from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
         const makeQuestionInitialDataPromise = makeQuestion.methods.loadInitialData();
@@ -53,12 +49,12 @@
         // Settle promises and get results
         const promiseResultMap = [
             {
-            resultKey: "cmsContent",
-            promise: cmsContentPromise,
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
             },
             {
-            resultKey: "makeQuestionInitialData",
-            promise: makeQuestionInitialDataPromise,
+                resultKey: "makeQuestionInitialData",
+                promise: makeQuestionInitialDataPromise,
             },
         ];
 
@@ -71,36 +67,36 @@
                 resultMap.makeQuestionInitialData
             );
         });
-        },
-        methods: {
-          backButtonAction() {
+    },
+    methods: {
+        backButtonAction() {
             this.$router.navigate(
-              this.navigationScenarios.CLICKED_BACK,
-              this.$route
+                this.navigationScenarios.CLICKED_BACK,
+                this.$route
             );
-          },
-          arePagePrerequisitesValid() {
+        },
+        arePagePrerequisitesValid() {
             if (this.mainStore.order.vehicle.year){
-              return true;
+                return true;
             }
             return false;
-          },
         },
-        components: {
-            makeQuestion,
-            siteHeader,
-            siteSubHeader,
-            vehicleBanner,
-            siteFooter
-        },
-        watch: {
-          selectedMake(make) {
+    },
+    components: {
+        makeQuestion,
+        siteHeader,
+        siteSubHeader,
+        vehicleBanner,
+        siteFooter
+    },
+    watch: {
+        selectedMake(make) {
             this.mainStore.updateVehicleMake( make );
             this.$router.navigate(
-              this.navigationScenarios.SELECTED_MAKE,
-              this.$route
+                this.navigationScenarios.SELECTED_MAKE,
+                this.$route
             );
-          },
-        }
-    };
+        },
+    }
+};
 </script>

src/layouts/vehicle-model/vehicle-model.vue

@@ -1,80 +1,80 @@
 <template>
-    <div class="page-container-grouped-styles">
-      <siteHeader cmsWidgetName="SiteHeaderWidget" />
-      <div class="select-car">
-        <div class="select-car-form rounded text-center">
-          <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
-          <siteSubHeader
-            cmsWidgetName="SiteSubHeaderWidget"
-            :hasBackButton="true"
-            :backButtonAccessibleText="backButtonAccessibleText"
-            @click-event="backButtonAction"
-          />
-          <div class="fade-on-route-transition">
-            <modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" />
-          </div>
-          <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
-            @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
+    <div class="page-container-grouped-styles position-relative">
+        <div class="fade-on-route-transition position-relative">
+            <siteHeader cmsWidgetName="SiteHeaderWidget" />
+            <div class="select-car">
+                <div class="container-fluid pb-2">
+                    <div class="row">
+                        <div class="col">
+                            <div class="select-car-form rounded text-center">
+                                <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
+                                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" :backButtonAccessibleText="backButtonAccessibleText" @click-event="backButtonAction" />
+                                <modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" class="px-4" />
+                                <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </template>
+</template>
 
-  <script>
-  // Components
-  import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
-  import siteHeader from "@/iss-components/site-header/site-header";
-  import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
-  import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
-  import siteFooter from "@/iss-components/site-footer/site-footer";
+<script>
+// Components
+import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
+import siteHeader from "@/iss-components/site-header/site-header";
+import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
+import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
+import siteFooter from "@/iss-components/site-footer/site-footer";
 
-  // Supporting files
-  import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-  import { settleAllPromises } from "@/helpers/layout-helper";
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
 
-  export default {
+export default {
     name: "vehicle-model",
     data() {
-      return {
-        selectedModel: null,
-        shouldHideForwardButton: true
-      };
+        return {
+            selectedModel: null,
+            shouldHideForwardButton: true
+        };
     },
     async beforeRouteEnter(to, from, next) {
-      // Call APIs
-      const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-      const modelQuestionInitialDataPromise =
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+        const modelQuestionInitialDataPromise =
         modelQuestion.methods.loadInitialData();
 
-      // Settle promises and get results
-      const promiseResultMap = [
-        {
-          resultKey: "cmsContent",
-          promise: cmsContentPromise,
-        },
-        {
-          resultKey: "modelQuestionInitialData",
-          promise: modelQuestionInitialDataPromise,
-        },
-      ];
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+            {
+                resultKey: "modelQuestionInitialData",
+                promise: modelQuestionInitialDataPromise,
+            },
+        ];
 
-      const resultMap = await settleAllPromises(promiseResultMap);
+        const resultMap = await settleAllPromises(promiseResultMap);
 
-      // Call the "next" function to complete the transition to this page.
-      next((vm) => {
-        vm.setCmsContent(resultMap.cmsContent);
-        vm.$refs.modelQuestion.initializeComponent(
-          resultMap.modelQuestionInitialData
-        );
-      });
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+            vm.$refs.modelQuestion.initializeComponent(
+                resultMap.modelQuestionInitialData
+            );
+        });
     },
 
     methods: {
         backButtonAction() {
-        // route to move backwards
+            // route to move backwards
             this.$router.navigate(
-            this.navigationScenarios.CLICKED_BACK,
-            this.$route
+                this.navigationScenarios.CLICKED_BACK,
+                this.$route
             );
         },
         arePagePrerequisitesValid()
@@ -86,26 +86,26 @@
         },
     },
     computed: {
-      backButtonAccessibleText()
-      {
-        return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText")
-      }
+        backButtonAccessibleText()
+        {
+            return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText")
+        }
     },
     watch: {
-      selectedModel(model) {
-        this.mainStore.updateVehicleModel( model );
-        this.$router.navigate(
-          this.navigationScenarios.SELECTED_MODEL,
-          this.$route
-        );
-      },
+        selectedModel(model) {
+            this.mainStore.updateVehicleModel( model );
+            this.$router.navigate(
+                this.navigationScenarios.SELECTED_MODEL,
+                this.$route
+            );
+        },
     },
     components: {
-      modelQuestion,
-      siteHeader,
-      siteSubHeader,
-      vehicleBanner,
-      siteFooter
+        modelQuestion,
+        siteHeader,
+        siteSubHeader,
+        vehicleBanner,
+        siteFooter
     },
-  };
-  </script>
+};
+</script>

src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js

@@ -127,31 +127,6 @@ describe("glass-part-question.vue", () => {
         // Assert
         expect(wrapper.vm.selectedPartNumber).toBe("DB12209GTYN");
     });
-
-    test("first is selected if more than one option", async () => {
-        // Arrange
-        featureListData.pageData = {
-            partsOrQuestions: [
-                {
-                    glassName: "Stationary",
-                    glassLocation: "Rear",
-                    parts: [
-                        { partNumber: "DB12209GTYN", color: "Green Tint" },
-                        { partNumber: "DB12209GTYNXXX", color: "Green Tint" },
-                    ],
-                },
-            ],
-        };
-        const { wrapper } = setupMocks(featureListData);
-
-        // Act
-        await wrapper.vm.$nextTick();
-        await wrapper.setData({ selectedTint: "Green Tint" });
-        await wrapper.vm.$nextTick();
-
-        // Assert
-        expect(wrapper.emitted()["update:modelValue"]).toBeTruthy();
-    });
  
     const partsForSelectedTintTestCases = [
         [
@@ -259,6 +234,6 @@ function setupMocks({ glassNameProp, glassLocationProp, colorAnswersProp, modelV
     const partsOrQuestions = pageData ?? { partsOrQuestions: [{ glassName: "Stationary", glassLocation: "Rear", parts: [] }] };
     useMainStore().pageData = jest.fn();
     useMainStore().pageData.mockReturnValue(partsOrQuestions);
-    document.querySelector = jest.fn().mockReturnValue({checked: false});
+    document.querySelector = jest.fn().mockReturnValue({clicked: false, click: jest.fn()});
     return { wrapper };
 }

src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue

@@ -4,7 +4,7 @@
     </div>
     <div class="nested-radio">
         <div class="row my-2">
-            <div class="col mx-1">
+            <div class="col">
                 <buttonQuestion
                     v-model="selectedTint"
                     :answers="tintSelectionOptions"
@@ -17,6 +17,7 @@
                     <div class="row my-2" aria-live="polite">
                         <div class="col">
                             <buttonQuestion
+                                id="glass-part-question"
                                 v-model="selectedPartNumber"
                                 buttonTypeString="radio"
                                 class="radioQuestion"
@@ -180,25 +181,27 @@ export default {
             return tintSourceObject.src;
         },
 
-        AutoSelect() {
-            if(this.partsForSelectedTint?.length > 0)
+        // Reset selections when tint changes for the same glass to ensure proper selection.
+        // Also checks if only a single part is present for the tint.
+        ResetTintAndPartSelections() {
+            this.selectedPartNumber = null;
+            this.AutoSelectIfSinglePart();
+        },
+
+        AutoSelectIfSinglePart() {
+            if (this.partsForSelectedTint?.length > 0) 
             {
                 // Check if only a single part is present for the tint and set the v-model if it is.
                 if (this.partsForSelectedTint?.length == 1) {
                     this.selectedPartNumber = { value: this.partsForSelectedTint[0].partNumber };
+                    
+                    // //select element with matching partNumber
+                    this.$nextTick(() => {
+                        const radioInput = document.querySelector('input[value=' + this.selectedPartNumber + ']');
+                        // Fire a click event on the input so the field is updated
+                        radioInput?.click();
+                    });
                 }
-                else{
-                    // If selected part isn't in the current list or it's null, select the first part
-                    if(!this.selectedPartNumber || this.partsForSelectedTint.filter(x => x.partNumber == this.selectedPartNumber).length === 0)
-                    {
-                        this.selectedPartNumber = { value: this.partsForSelectedTint[0].partNumber };
-                    }
-                }
-
-                //select element with matching partNumber
-                this.$nextTick(() => {
-                    document.querySelector('input[value=' + this.selectedPartNumber + ']').checked = true;
-                });
             }
         },
         
@@ -206,22 +209,16 @@ export default {
         LoadPreselectedValues() {
             this.$nextTick(() => {
                 // Populate button-question model-value if parts data already exists in store
-                if(this.modelValue)
+                if(this.modelValue !== undefined)
                 {
                     this.selectedTint = this.modelValue.color;
                 }
-                else{
-                    // If one item in list, select it
-                    if (this.tintSelectionOptions?.length == 1) {
-                        this.selectedTint = this.tintSelectionOptions[0].value;
-                    }
-                }
             });              
         },
     },
     watch: {
         selectedTint() {
-            this.AutoSelect();
+            this.AutoSelectIfSinglePart();
         },
     },
 };
@@ -243,4 +240,14 @@ export default {
     color: $black;
     font-weight: $font-weight-bold;
 }
+
+#glass-part-question {
+    span.fw-bold.w-100 {
+        margin-top: 0.5rem;
+        margin-bottom: 0;
+    }
+    div.col.radio-button-container {
+        padding-bottom: 0;
+    }
+}
 </style>

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -1,42 +1,53 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
-        <div class="page-container-grouped-styles vehicle-parts">
-            <siteHeader ref="siteHeader" cmsWidgetName="SiteHeaderWidget" />
-            <div class="fade-on-route-transition sub-container overflow-scroll px-5">
-                <vehicleBanner
-                    class="mb-3"
-                    ref="vehicleBanner"
-                    cmsWidgetName="VehicleBannerWidget"
-                    :displayGenericVehicleImage="false" />
-                <siteSubHeader ref="siteSubHeader" cmsWidgetName="SiteSubHeaderWidget" />
-                <div class="prevent-squish my-5">
-                    <div class="row">
-                        <div class="col">
-                            <alert
-                                class="rounded border-0 shadow-sm"
-                                alertClass="alert-warning"
-                                cmsWidgetName="AlertWidget"
-                                :isDismissible="false" />
+        <div class="page-container-grouped-styles">
+            <div class="fade-on-route-transition position-relative">
+                <siteHeader cmsWidgetName="SiteHeaderWidget" />
+                <div class="select-car">
+                    <div class="container-fluid pb-2">
+                        <div class="row px-3">
+                            <div class="col">
+                                <div class="select-car-form rounded">
+                                    <vehicleBanner
+                                    class="mb-3"
+                                    ref="vehicleBanner"
+                                    cmsWidgetName="VehicleBannerWidget"
+                                    :displayGenericVehicleImage="false" />
+                                    <siteSubHeader ref="siteSubHeader" cmsWidgetName="SiteSubHeaderWidget" />
+                                    <div class="prevent-squish my-5">
+                                        <div class="row">
+                                            <div class="col">
+                                                <alert
+                                                class="rounded border-0 shadow-sm"
+                                                alertClass="alert-warning"
+                                                cmsWidgetName="AlertWidget"
+                                                :isDismissible="false"
+                                                id="vehicle-parts-alert" />
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div v-for="(item, i) in PartsOrQuestions" :key="i">
+                                        <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
+                                        <hr v-if="i > 0" />
+                                        <glassPartQuestion
+                                        :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
+                                        v-model="selectedGlassParts[item.glassLocation + '-' + item.glassName]"
+                                        :glassLocation="item.glassLocation"
+                                        :glassName="item.glassName"
+                                        :colorAnswers="item.colorAnswers"
+                                        :alreadyPopulatedPartsData="alreadyPopulatedPartsData" />
+                                    </div>
+                                    <siteFooter
+                                    cmsWidgetName="SiteFooterWidget"
+                                    ref="siteFooter"
+                                    :isForwardActionDisabled="isForwardActionDisabled"
+                                    @backClicked="navigateBack"
+                                    @ForwardClicked="forwardButtonAction" />
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div v-for="(item, i) in PartsOrQuestions" :key="i">
-                    <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
-                    <hr v-if="i > 0" />
-                    <glassPartQuestion
-                        :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
-                        v-model="selectedGlassParts[item.glassLocation + '-' + item.glassName]"
-                        :glassLocation="item.glassLocation"
-                        :glassName="item.glassName"
-                        :colorAnswers="item.colorAnswers"
-                        :alreadyPopulatedPartsData="alreadyPopulatedPartsData" />
-                </div>
-                <siteFooter
-                    cmsWidgetName="SiteFooterWidget"
-                    ref="siteFooter"
-                    :isForwardActionDisabled="isForwardActionDisabled"
-                    @backClicked="navigateBack"
-                    @ForwardClicked="forwardButtonAction" />
             </div>
         </div>
     </Form>
@@ -79,151 +90,152 @@ export default {
 
             // Glass Part Question dynamic component
             Object.keys(vm.$refs)
-                .filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
-                .forEach((c) =>
-                    vm.$refs[c][0].initializeComponent({
-                        ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
-                        FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
-                    })
-                );
-        });
+            .filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
+            .forEach((c) =>
+            vm.$refs[c][0].initializeComponent({
+                ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
+                FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
+            })
+        );
+    });
+},
+data() {
+    return {
+        selectedGlassParts: {},
+        alertWidgetData: Object,
+        alreadyPopulatedPartsData: [],
+    };
+},
+computed: {
+    isForwardActionDisabled() {
+        return (
+            this.selectedGlassPartNumbers.length !== this.PartsFromApi.partsOrQuestions.length
+        );
     },
-    data() {
-        return {
-            selectedGlassParts: {},
-            alertWidgetData: Object,
-            alreadyPopulatedPartsData: [],
-        };
+    selectedGlassPartNumbers() {
+        // Compile all selected parts from the page.
+        const numberArray = [];
+        for (let glassPart of Object.values(this.selectedGlassParts)) {
+            if (glassPart?.partNumber) {
+                numberArray.push(glassPart.partNumber);
+            }
+        }
+        return numberArray;
     },
-    computed: {
-        isForwardActionDisabled() {
-            return (
-                this.selectedGlassPartNumbers.length !== this.PartsFromApi.partsOrQuestions.length
-            );
-        },
-        selectedGlassPartNumbers() {
-            // Compile all selected parts from the page.
-            const numberArray = [];
-            for (let glassPart of Object.values(this.selectedGlassParts)) {
-                if (glassPart?.partNumber) {
-                    numberArray.push(glassPart.partNumber);
-                }
-            }
-            return numberArray;
-        },
-        PartsOrQuestions() {
-            const partsData = this.PartsFromApi;
+    PartsOrQuestions() {
+        const partsData = this.PartsFromApi;
 
-            // Map API result data, to vehicle-parts data structure
-            const mappedData = partsData.partsOrQuestions.map((g) => {
-                return {
-                    glassName: g.glassName,
-                    glassLocation: g.glassLocation,
-                    colorAnswers: g.parts?.reduce((arr, p) => {
-                        arr.push({
-                            ColorAnswerText: p.color,
-                            FeatureAnswers: [
-                                {
-                                    FeatureAnswerText:
-                                        p.description === "" ? p.color : p.description,
-                                    PartNumber: p.partNumber,
-                                },
-                            ],
-                        });
-                        return arr;
-                    }, []),
-                };
-            });
-
-            return mappedData;
-        },
-
-        PartsFromApi() {
-            return this.mainStore.pageData(issPageValues.VEHICLE_PARTS);
-        },
-
-        RefPrefix() {
-            return "partQuestion";
-        },
-    },
-    methods: {
-        arePagePrerequisitesValid() {
-            // Check if isRepair is populated and if the pageData we need is here (Parts data)
-            return (
-                this.mainStore.damage.isRepair != null &&
-                this.mainStore.pageData(issPageValues.VEHICLE_PARTS) &&
-                Object.keys(this.mainStore.pageData(issPageValues.VEHICLE_PARTS)).length !== 0
-            );
-        },
-        async forwardButtonAction() {
-            const matchedParts = [];
-
-            // Match them to the parts from the API.
-            for (let [key, value] of Object.entries(this.PartsFromApi.partsOrQuestions)) {
-                for (let [partKey, partValue] of Object.entries(value.parts)) {
-                    const currentPart = this.PartsFromApi.partsOrQuestions[key].parts[partKey];
-
-                    const isMatched = this.selectedGlassPartNumbers.some(
-                        (p) => p === currentPart.partNumber
-                    );
-
-                    if (isMatched) {
-                        matchedParts.push({
-                            glassLocation: value.glassLocation,
-                            glassName: value.glassName,
-                            parts: [currentPart],
-                        });
-                    }
-                }
-            }
-            // If no parts could be matched, throw an error (isForwardActionDisabled is based off of matchedParts)
-            if (this.isForwardActionDisabled) {
-                this.$refs.siteFooter.removeLoader();
-                throw new Error("Could not match any parts to the selected parts");
-            }
-
-            await this.mainStore.resetMoldingAndCapabilityQuestionAnswersIfNeeded(matchedParts);
-
-            this.navigateForward(matchedParts, null);
-        },
-
-        LoadInitialPartsData() {
-            const partsData = this.PartsFromApi;
-            this.alreadyPopulatedPartsData =
-                this.mainStore.lineItems.glassParts === null
-                    ? []
-                    : this.mainStore.lineItems.glassParts;
-
-            partsData.partsOrQuestions.map((g) => {
-                // If the part is already populated, use the value from the store and populate the v-model.
-                Object.keys(this.alreadyPopulatedPartsData).forEach((key) => {
-                    const partNumber = this.alreadyPopulatedPartsData[key].partNumber;
-                    g.parts.forEach((p) => {
-                        if (p.partNumber === partNumber) {
-                            this.selectedGlassParts[g.glassLocation + "-" + g.glassName] = p;
-                        }
+        // Map API result data, to vehicle-parts data structure
+        const mappedData = partsData.partsOrQuestions.map((g) => {
+            return {
+                glassName: g.glassName,
+                glassLocation: g.glassLocation,
+                colorAnswers: g.parts?.reduce((arr, p) => {
+                    arr.push({
+                        ColorAnswerText: p.color,
+                        FeatureAnswers: [
+                            {
+                                FeatureAnswerText:
+                                p.description === "" ? p.color : p.description,
+                                PartNumber: p.partNumber,
+                            },
+                        ],
                     });
+                    return arr;
+                }, []),
+            };
+        });
+
+        return mappedData;
+    },
+
+    PartsFromApi() {
+        return this.mainStore.pageData(issPageValues.VEHICLE_PARTS);
+    },
+
+    RefPrefix() {
+        return "partQuestion";
+    },
+},
+methods: {
+    arePagePrerequisitesValid() {
+        // Check if isRepair is populated and if the pageData we need is here (Parts data)
+        return (
+            this.mainStore.damage.isRepair != null &&
+            this.mainStore.pageData(issPageValues.VEHICLE_PARTS) &&
+            Object.keys(this.mainStore.pageData(issPageValues.VEHICLE_PARTS)).length !== 0
+        );
+    },
+    async forwardButtonAction() {
+        const matchedParts = [];
+
+        // Match them to the parts from the API.
+        for (let [key, value] of Object.entries(this.PartsFromApi.partsOrQuestions)) {
+            for (let [partKey, partValue] of Object.entries(value.parts)) {
+                const currentPart = this.PartsFromApi.partsOrQuestions[key].parts[partKey];
+
+                const isMatched = this.selectedGlassPartNumbers.some(
+                    (p) => p === currentPart.partNumber
+                );
+
+                if (isMatched) {
+                    matchedParts.push({
+                        glassLocation: value.glassLocation,
+                        glassName: value.glassName,
+                        parts: [currentPart],
+                    });
+                }
+            }
+        }
+        // If no parts could be matched, throw an error (isForwardActionDisabled is based off of matchedParts)
+        if (this.isForwardActionDisabled) {
+            this.$refs.siteFooter.removeLoader();
+            throw new Error("Could not match any parts to the selected parts");
+        }
+
+        await this.mainStore.resetMoldingAndCapabilityQuestionAnswersIfNeeded(matchedParts);
+
+        this.navigateForward(matchedParts, null);
+    },
+
+    LoadInitialPartsData() {
+        const partsData = this.PartsFromApi;
+        this.alreadyPopulatedPartsData =
+        this.mainStore.lineItems.glassParts === null
+        ? []
+        : this.mainStore.lineItems.glassParts;
+
+        partsData.partsOrQuestions.map((g) => {
+            // If the part is already populated, use the value from the store and populate the v-model.
+            Object.keys(this.alreadyPopulatedPartsData).forEach((key) => {
+                const partNumber = this.alreadyPopulatedPartsData[key].partNumber;
+                g.parts.forEach((p) => {
+                    if (p.partNumber === partNumber) {
+                        this.selectedGlassParts[g.glassLocation + "-" + g.glassName] = p;
+                    }
                 });
             });
-        },
-    },
-    mounted() {
-        this.LoadInitialPartsData();
-    },
-    components: {
-        Form,
-        glassPartQuestion,
-        siteHeader,
-        vehicleBanner,
-        siteSubHeader,
-        siteFooter,
-        alert,
+        });
     },
+},
+mounted() {
+    this.LoadInitialPartsData();
+},
+components: {
+    Form,
+    glassPartQuestion,
+    siteHeader,
+    vehicleBanner,
+    siteSubHeader,
+    siteFooter,
+    alert,
+},
 };
 </script>
 <style lang="scss">
- .overflow-scroll {
-        height: calc(100% - 180px);
-        overflow-x: hidden !important;
- }
- </style>
+#vehicle-parts-alert {
+    .alert-heading {
+        margin-top: 0.25rem !important;
+    }
+}
+</style>

src/layouts/vehicle-style/vehicle-style.vue

@@ -1,22 +1,20 @@
 <template>
-    <div class="page-container-grouped-styles">
-        <siteHeader cmsWidgetName="SiteHeaderWidget" />
-        <div class="select-car">
-            <div class="select-car-form rounded text-center">
-                <vehicleBanner cmsWidgetName="VehicleBannerWidget" class="mb-3" displayGenericVehicleImage />
-                <siteSubHeader
-                    cmsWidgetName="SiteSubHeaderWidget"
-                    :hasBackButton="true"
-                    :backButtonAccessibleText="backButtonAccessibleText"
-                    @click-event="backButtonAction" />
-                <div class="fade-on-route-transition">
-                    <styleQuestion
-                        v-model="selectedStyle"
-                        ref="styleQuestion"
-                        cmsWidgetName="VehicleStyleQuestion" />
+    <div class="page-container-grouped-styles position-relative">
+        <div class="fade-on-route-transition position-relative">
+            <siteHeader cmsWidgetName="SiteHeaderWidget" />
+            <div class="select-car">
+                <div class="container-fluid pb-2">
+                    <div class="row">
+                        <div class="col">
+                            <div class="select-car-form rounded text-center">
+                                <vehicleBanner cmsWidgetName="VehicleBannerWidget" class="mb-3" displayGenericVehicleImage />
+                                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" :backButtonAccessibleText="backButtonAccessibleText" @click-event="backButtonAction" />
+                                <styleQuestion v-model="selectedStyle" ref="styleQuestion" cmsWidgetName="VehicleStyleQuestion" class="px-4" />
+                                <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
+                            </div>
+                        </div>
+                    </div>
                 </div>
-                <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
-                    @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
             </div>
         </div>
     </div>

src/layouts/vehicle-year/vehicle-year.vue

@@ -1,101 +1,101 @@
 <template>
-    <div class="page-container-grouped-styles">
-      <siteHeader cmsWidgetName="SiteHeaderWidget" />
-      <div class="select-car">
-        <div class="select-car-form rounded text-center">
-          <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
-          <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-          <div class="fade-on-route-transition">
-            <yearQuestion
-              class="fade-on-route-transition"
-              v-model="selectedYear"
-              ref="yearQuestion"
-              cmsWidgetName="VehicleYearQuestion"
-            />
-          </div>
-          <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
-            @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
+    <div class="page-container-grouped-styles position-relative">
+        <div class="fade-on-route-transition position-relative">
+            <siteHeader cmsWidgetName="SiteHeaderWidget" />
+            <div class="select-car">
+                <div class="container-fluid pb-2">
+                    <div class="row">
+                        <div class="col">
+                            <div class="select-car-form rounded text-center">
+                                <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
+                                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+                                <yearQuestion class="px-4" v-model="selectedYear" ref="yearQuestion" cmsWidgetName="VehicleYearQuestion" />
+                                <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </template>
+</template>
 
-  <script>
-  // Components
-  import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
-  import siteHeader from "@/iss-components/site-header/site-header";
-  import siteFooter from "@/iss-components/site-footer/site-footer";
-  import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
-  import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
+<script>
+// Components
+import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
+import siteHeader from "@/iss-components/site-header/site-header";
+import siteFooter from "@/iss-components/site-footer/site-footer";
+import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
+import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
 
-  // Supporting files
-  import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-  import { settleAllPromises } from "@/helpers/layout-helper";
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
 
-  export default {
+export default {
     name: "vehicle-year",
     data() {
-      return {
-        selectedYear: null,
-        shouldHideForwardButton: true
-      };
+        return {
+            selectedYear: null,
+            shouldHideForwardButton: true
+        };
     },
     computed: {},
 
     async beforeRouteEnter(to, from, next) {
-      // Call APIs
-      const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-      const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData();
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+        const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData();
 
-      // Settle promises and get results
-      const promiseResultMap = [
-        {
-          resultKey: "cmsContent",
-          promise: cmsContentPromise,
-        },
-        {
-          resultKey: "yearQuestionInitialData",
-          promise: yearQuestionInitialDataPromise,
-        },
-      ];
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+            {
+                resultKey: "yearQuestionInitialData",
+                promise: yearQuestionInitialDataPromise,
+            },
+        ];
 
-      let resultMap = await settleAllPromises(promiseResultMap);
+        let resultMap = await settleAllPromises(promiseResultMap);
 
-      // Call the "next" function to complete the transition to this page.
-      next((vm) => {
-        vm.setCmsContent(resultMap.cmsContent);
-        vm.$refs.yearQuestion.initializeComponent(
-          resultMap.yearQuestionInitialData
-        );
-      });
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+            vm.$refs.yearQuestion.initializeComponent(
+                resultMap.yearQuestionInitialData
+            );
+        });
     },
 
     watch: {
-      selectedYear(year) {
-        const parsedYear = parseInt(year);
-        this.mainStore.updateVehicleYear( parsedYear );
+        selectedYear(year) {
+            const parsedYear = parseInt(year);
+            this.mainStore.updateVehicleYear( parsedYear );
 
-        this.$router.navigate(
-          this.navigationScenarios.SELECTED_YEAR,
-          this.$route
-        );
-      },
+            this.$router.navigate(
+                this.navigationScenarios.SELECTED_YEAR,
+                this.$route
+            );
+        },
     },
     methods: {
-      arePagePrerequisitesValid() {
-        return true;
-      },
-      backButtonAction() {
+        arePagePrerequisitesValid() {
+            return true;
+        },
+        backButtonAction() {
             this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-      },
+        },
     },
 
     components: {
-      yearQuestion,
-      siteHeader,
-      siteSubHeader,
-      vehicleBanner,
-      siteFooter
+        yearQuestion,
+        siteHeader,
+        siteSubHeader,
+        vehicleBanner,
+        siteFooter
     },
-  };
-  </script>
+};
+</script>

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

@@ -1,46 +1,27 @@
 <template>
-    <Form
-    @submit="onSubmit"
-    @invalidSubmit="onInvalidSubmit"
-    v-slot="{ meta }"
-    >
-    <div class="page-container-grouped-styles ">
-        <siteHeader
-        cmsWidgetName="SiteHeaderWidget"
-        />
-        <div class="px-4  overflow-scroll ">
-            <div class="fade-on-route-transition sub-container px-2 mt-5">
-                <vehicleBanner
-                class="mb-3"
-                cmsWidgetName="VehicleBannerWidget"
-                :displayGenericVehicleImage="false"
-                />
-                <siteSubHeader
-                cmsWidgetName="SiteSubHeaderWidget"
-                />
-                <vinLookupAlerts
-                :activeAlertType="activeVehicleLookupAlertType"
-                />
-
-          <vinQuestion
-            v-model="vin"
-            :mask="vinMask"
-            :isDisabled="vinPopulatedOnPageLoad"
-          />
-
-                <vinLocationInformation />
-
-                <siteFooter
-                cmsWidgetName="SiteFooterWidget"
-                :isForwardActionDisabled="!meta.valid"
-                @backClicked="backButtonAction"
-                @forwardClicked="forwardButtonAction"
-                ref="siteFooter"
-                />
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
+        <div class="page-container-grouped-styles">
+            <div class="fade-on-route-transition position-relative">
+                <siteHeader cmsWidgetName="SiteHeaderWidget" />
+                <div class="select-car">
+                    <div class="container-fluid pb-2">
+                        <div class="row px-3">
+                            <div class="col">
+                                <div class="select-car-form rounded">
+                                    <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
+                                    <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+                                    <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" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
-    </div>
-</Form>
+    </Form>
 </template>
 <script>
 // Import Supporting Files
@@ -80,25 +61,25 @@ export default {
     setup() {
         const mainStore = useMainStore();
 
-    return { mainStore };
-  },
-  data() {
-    return {
-      activeVehicleLookupAlertType: null,
-      needToLookupVehicle: true,
-      vehicleFromLookup: null,
-      vin: this.getVinFromStore(),
-      forwardButtonCarStyle:"",
-      vinPopulatedOnPageLoad: this.getVinFromStore()?.length > 0,
-    };
-  },
-  provide() {
-    return {
-      vehicleFromLookup: computed(() => this.vehicleFromLookup),
-    };
-  },
-  async beforeRouteEnter(to, from, next) {
-    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+        return { mainStore };
+    },
+    data() {
+        return {
+            activeVehicleLookupAlertType: null,
+            needToLookupVehicle: true,
+            vehicleFromLookup: null,
+            vin: this.getVinFromStore(),
+            forwardButtonCarStyle:"",
+            vinPopulatedOnPageLoad: this.getVinFromStore()?.length > 0,
+        };
+    },
+    provide() {
+        return {
+            vehicleFromLookup: computed(() => this.vehicleFromLookup),
+        };
+    },
+    async beforeRouteEnter(to, from, next) {
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
         // Settle promises and get results
         const promiseResultMap = [
@@ -110,51 +91,51 @@ export default {
 
         const resultMap = await settleAllPromises(promiseResultMap);
 
-    next((vm) => {
-      vm.setCmsContent(resultMap.cmsContent);
-    });
-  },
-  computed: {
-    isCarIdDifferentFromTheStore() {
-      return (
-        this.vehicleFromLookup !== null
-        && this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
-      );
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
     },
-    isTwoIdenticalYMMVehicleFound(){
-      const vinYmmFound = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
-      const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
-      return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
+    computed: {
+        isCarIdDifferentFromTheStore() {
+            return (
+                this.vehicleFromLookup !== null
+                && this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
+            );
+        },
+        isTwoIdenticalYMMVehicleFound(){
+            const vinYmmFound = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
+            const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+            return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
+        },
+        vinMask() {
+            if (this.vinPopulatedOnPageLoad) {
+                this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.PERFECT_MATCH;
+                this.needToLookupVehicle = false;
+                const lastSixChars = this.vin.substring(11, this.vin.length);
+                return `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`;
+            } else {
+                return "XXXXXXXXXXXXXXXXX";
+            }
+        },
     },
-    vinMask() {
-      if (this.vinPopulatedOnPageLoad) {
-        this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.PERFECT_MATCH;
-        this.needToLookupVehicle = false;
-        const lastSixChars = this.vin.substring(11, this.vin.length);
-          return `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`;
-      } else {
-          return "XXXXXXXXXXXXXXXXX";
-      }
-    },
-  },
-  methods: {
-    arePagePrerequisiteValid() {
-      return true;
-    },
-    getVinFromStore() {
-      return this.mainStore.vehicle.vin;
-    },
-    backButtonAction() {
-      /**
-       * this.navigationScenarios comes from base-mixin
-       */
-      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-    },
-    // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
-    async forwardButtonAction() {
-      this.resetActiveAlert();
-      // Temp solution to reset the 'disabled' style on the Continue button
-      this.$refs.siteFooter.enableForwardAction();
+    methods: {
+        arePagePrerequisiteValid() {
+            return true;
+        },
+        getVinFromStore() {
+            return this.mainStore.vehicle.vin;
+        },
+        backButtonAction() {
+            /**
+            * this.navigationScenarios comes from base-mixin
+            */
+            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
+        async forwardButtonAction() {
+            this.resetActiveAlert();
+            // Temp solution to reset the 'disabled' style on the Continue button
+            this.$refs.siteFooter.enableForwardAction();
 
             if (this.needToLookupVehicle) {
                 const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin);
@@ -174,18 +155,18 @@ export default {
                 this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, { vin: this.vin });
             }
 
-      if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) {
-        if(this.isTwoIdenticalYMMVehicleFound){
-          this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED;
-          this.forwardButtonCarStyle = this.vehicleFromLookup.style;
-        }
-        else{
-          this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
-        }
-        
-        const vehicleYearMakeModelStyle = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.forwardButtonCarStyle}`;
-        this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModelStyle}`);
-        this.$refs.siteFooter.removeLoader();
+            if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) {
+                if(this.isTwoIdenticalYMMVehicleFound){
+                    this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED;
+                    this.forwardButtonCarStyle = this.vehicleFromLookup.style;
+                }
+                else{
+                    this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
+                }
+
+                const vehicleYearMakeModelStyle = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.forwardButtonCarStyle}`;
+                this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModelStyle}`);
+                this.$refs.siteFooter.removeLoader();
 
                 this.needToLookupVehicle = false;
 
@@ -212,18 +193,18 @@ export default {
                 return;
             }
 
-      // save vehicle to store if it hasn't already been saved
-      if (!this.vinPopulatedOnPageLoad) {
-        this.mainStore.updateVehicle(this.vehicleFromLookup);
-      }
+            // save vehicle to store if it hasn't already been saved
+            if (!this.vinPopulatedOnPageLoad) {
+                this.mainStore.updateVehicle(this.vehicleFromLookup);
+            }
 
-      const partsOrQuestionsResponse = await this.getPartsOrQuestions();
-      if (partsOrQuestionsResponse.error) {
-        // To Do: Need requirement on what to do here
-        console.error('Error on retrieving PartsOrQuestions');
-        this.$refs.siteFooter.removeLoader();
-        return;
-      }
+            const partsOrQuestionsResponse = await this.getPartsOrQuestions();
+            if (partsOrQuestionsResponse.error) {
+                // To Do: Need requirement on what to do here
+                console.error('Error on retrieving PartsOrQuestions');
+                this.$refs.siteFooter.removeLoader();
+                return;
+            }
 
             // Comes from vehicleQuestionsMixin.navigateForward()
             await this.navigateForward(partsOrQuestionsResponse.data.partsOrQuestions, this);
@@ -273,11 +254,3 @@ export default {
     },
 };
 </script>
-<style>
-.overflow-scroll {
-    height: calc(100% - 180px);
-    overflow-X: hidden !important;
-}
-
-
-</style>

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

@@ -1,116 +1,115 @@
 <template>
-<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
-
-    <div class="page-container-grouped-styles welcome">
-        <siteHeader cmsWidgetName="SiteHeaderWidget"/>
-        <div class="fade-on-route-transition  overflow-scroll container">
-
-            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
-            <div class="row mt-4 px-3">
-                <div class="col">
-                    <textboxQuestion
-                        inputId="policyNumberField"
-                        cmsWidgetName="PolicyNumberQuestion"
-                        v-model="welcomePageModel.policyNumber"
-                        isRequired
-                        ref="policyNumber"
-                        disableAutoFill
-                        validationRules="policy-number-required" />
-                </div>
-            </div>
-            <div class="row mt-4 px-3">
-                <div class="col">
-                    <textboxQuestion
-                        type="date"
-                        cmsWidgetName="DateOfLossQuestion"
-                        v-model="welcomePageModel.dateOfLoss"
-                        inputId="dateOfLossField"
-                        isRequired
-                        ref="dateOfLoss"
-                        disableAutoFill
-                        :max="new Date().toJSON().slice(0,10)"
-                        :min="'1972-12-01'"
-                        validationRules="loss-date-required"                        
-                />
-                </div>
-            </div>
-            <div class="row px-5">
-                <div class="col px-0">
-                    <textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="small" class="mt-2" />
-                </div>
-            </div>
-            <div class="row mt-4 px-3">
-                <div class="col">
-                    <dropdownQuestion
-                        cmsWidgetName="DamageCauseQuestion"
-                        v-model="welcomePageModel.damageCause"
-                        ref="damageCause"
-                        inputId="damageCauseQuestionField"
-                        :options="DamageCauseOptions"
-                        disableAutoFill
-                        validationRules="damage-option-required"
-                        placeHolderText="Select an option"
-                        id="welcomeDropdown"
-                    />
-                </div>
-            </div>  
-            <div class="row mt-4 px-3">
-                <div class="col">
-                    <textboxQuestion
-                        inputId="phoneNumberField"
-                        cmsWidgetName="PhoneNumberQuestion"
-                        v-model="welcomePageModel.phoneNumber"
-                        validationRules="phone-number-required|phone-number-format"
-                        isRequired
-                        ref="phoneNumber"
-                        mask="###-###-####"
-                        disableAutoFill />
-                </div>
-            </div>
-            <div class="row mt-4 px-3">
-                <div class="col">
-                    <textboxQuestion
-                        inputId="emailField"
-                        cmsWidgetName="EmailAddressQuestion"
-                        v-model="welcomePageModel.email"
-                        ref="email"
-                        validationRules="email-address-required|email-address-format"
-                        isRequired
-                        disableAutoFill />
-                </div>
-            </div>
-            <div class="row mt-4 px-3">
-                <div class="col">
-                    <textboxQuestion
-                        inputId="damageCityField"
-                        cmsWidgetName="DamageCityQuestion"
-                        v-model="welcomePageModel.damageCity"
-                        isRequired
-                        ref="damageCity"
-                        disableAutoFill
-                        v-if="this.displayDamageCityQuestion"
-                        validationRules="loss-city-required" />
-                </div>
-            </div>
-            <div class="row mt-4 px-3">
-                <div class="col">
-                    <dropdownQuestion
-                        cmsWidgetName="DamageStateQuestion"
-                        v-model="welcomePageModel.damageState"
-                        ref="state"
-                        inputId="8fdf9dc2e13e430eb57529499dceb3eb"
-                        :options="stateOptions"
-                        validationRules="loss-state-required"
-                        isRequired
-                        disableAutoFill
-                        v-if="this.displayDamageStateQuestion"
-                        placeHolderText="Select an option"
-                        id="welcomeDropdown"
-                    />
-                </div>
-            </div>
-            <div class="row mt-4">
-                    <buttonQuestion
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
+        <div class="page-container-grouped-styles welcome">
+            <div class="fade-on-route-transition position-relative">
+                <siteHeader cmsWidgetName="SiteHeaderWidget"/>
+                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
+                <div class="container-fluid pb-2">
+                    <div class="row mt-4 px-3">
+                        <div class="col">
+                            <textboxQuestion
+                            inputId="policyNumberField"
+                            cmsWidgetName="PolicyNumberQuestion"
+                            v-model="welcomePageModel.policyNumber"
+                            isRequired
+                            ref="policyNumber"
+                            disableAutoFill
+                            validationRules="policy-number-required" />
+                        </div>
+                    </div>
+                    <div class="row mt-4 px-3">
+                        <div class="col">
+                            <textboxQuestion
+                            type="date"
+                            cmsWidgetName="DateOfLossQuestion"
+                            v-model="welcomePageModel.dateOfLoss"
+                            inputId="dateOfLossField"
+                            isRequired
+                            ref="dateOfLoss"
+                            disableAutoFill
+                            :max="new Date().toJSON().slice(0,10)"
+                            :min="'1972-12-01'"
+                            validationRules="loss-date-required"
+                            />
+                        </div>
+                    </div>
+                    <div class="row px-5">
+                        <div class="col px-0">
+                            <textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="small" class="mt-2" />
+                        </div>
+                    </div>
+                    <div class="row mt-4 px-3">
+                        <div class="col">
+                            <dropdownQuestion
+                            cmsWidgetName="DamageCauseQuestion"
+                            v-model="welcomePageModel.damageCause"
+                            ref="damageCause"
+                            inputId="damageCauseQuestionField"
+                            :options="DamageCauseOptions"
+                            disableAutoFill
+                            validationRules="damage-option-required"
+                            placeHolderText="Select an option"
+                            id="welcomeDropdown"
+                            />
+                        </div>
+                    </div>
+                    <div class="row mt-4 px-3">
+                        <div class="col">
+                            <textboxQuestion
+                            inputId="phoneNumberField"
+                            cmsWidgetName="PhoneNumberQuestion"
+                            v-model="welcomePageModel.phoneNumber"
+                            validationRules="phone-number-required|phone-number-format"
+                            isRequired
+                            ref="phoneNumber"
+                            mask="###-###-####"
+                            disableAutoFill />
+                        </div>
+                    </div>
+                    <div class="row mt-4 px-3">
+                        <div class="col">
+                            <textboxQuestion
+                            inputId="emailField"
+                            cmsWidgetName="EmailAddressQuestion"
+                            v-model="welcomePageModel.email"
+                            ref="email"
+                            validationRules="email-address-required|email-address-format"
+                            isRequired
+                            disableAutoFill />
+                        </div>
+                    </div>
+                    <div class="row mt-4 px-3">
+                        <div class="col">
+                            <textboxQuestion
+                            inputId="damageCityField"
+                            cmsWidgetName="DamageCityQuestion"
+                            v-model="welcomePageModel.damageCity"
+                            isRequired
+                            ref="damageCity"
+                            disableAutoFill
+                            v-if="this.displayDamageCityQuestion"
+                            validationRules="loss-city-required" />
+                        </div>
+                    </div>
+                    <div class="row mt-4 px-3">
+                        <div class="col">
+                            <dropdownQuestion
+                            cmsWidgetName="DamageStateQuestion"
+                            v-model="welcomePageModel.damageState"
+                            ref="state"
+                            inputId="8fdf9dc2e13e430eb57529499dceb3eb"
+                            :options="stateOptions"
+                            validationRules="loss-state-required"
+                            isRequired
+                            disableAutoFill
+                            v-if="this.displayDamageStateQuestion"
+                            placeHolderText="Select an option"
+                            id="welcomeDropdown"
+                            />
+                        </div>
+                    </div>
+                    <div class="row mt-4">
+                        <buttonQuestion
                         class="px-0"
                         cmsWidgetName="GlassOnlyQuestion"
                         v-model="welcomePageModel.isDamageGlassOnly"
@@ -124,237 +123,232 @@
                         ref="glassOnlyDamage"
                         v-if="this.displayGlassOnlyQuestion"
                         disableAutoFill/>
-            </div>
-            <div class="row mt-4 position-sticky top-100" id="welcomeFooter">
-                <div class="col">
-                    <site-footer
-                        cmsWidgetName="SiteFooterWidget"
-                        :isForwardActionDisabled="!meta.valid"
-                        @back-clicked="backButtonAction"
-                        @ForwardClicked="forwardButtonAction" />
+                    </div>
+                    <div class="row mt-4 position-sticky top-100" id="welcomeFooter">
+                        <div class="col">
+                            <site-footer
+                            cmsWidgetName="SiteFooterWidget"
+                            :isForwardActionDisabled="!meta.valid"
+                            @back-clicked="backButtonAction"
+                            @ForwardClicked="forwardButtonAction" />
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
-</Form>
+    </Form>
 </template>
 
-    <script>
-    // Components
-    import siteHeader from '@/iss-components/site-header/site-header';
-    import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header';
-    import siteFooter from "@/iss-components/site-footer/site-footer";
-    import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
-    import buttonQuestion from "@/digital-components/button-question/button-question";
-    import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question";
-    import textBlock from "@/digital-components/text-block/text-block";
+<script>
+// Components
+import siteHeader from '@/iss-components/site-header/site-header';
+import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header';
+import siteFooter from "@/iss-components/site-footer/site-footer";
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
+import buttonQuestion from "@/digital-components/button-question/button-question";
+import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question";
+import textBlock from "@/digital-components/text-block/text-block";
 
-    // Supporting files
-    import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-    import { settleAllPromises } from "@/helpers/layout-helper";
-    import { Form, defineRule } from "vee-validate";
-    import { required, regex } from "@/helpers/validation-rules";
-    import { errorMessages } from "@/constants/error-messages";
-    import BaseFormMixin from '@/mixins/base-form-mixin.js';
-    import { useMainStore } from '@/store';
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { Form, defineRule } from "vee-validate";
+import { required, regex } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+import BaseFormMixin from '@/mixins/base-form-mixin.js';
+import { useMainStore } from '@/store';
 
-    //define validation rules
-    defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
-    defineRule("loss-cause-required", required(errorMessages.LOSS_CAUSE_REQUIRED));
-    defineRule("policy-number-required", required(errorMessages.POLICY_NUMBER_REQUIRED));
-    defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
-    defineRule("loss-state-required", required(errorMessages.LOSS_STATE_REQUIRED));
-    defineRule("loss-city-required", required(errorMessages.LOSS_CITY_REQUIRED));
-    defineRule("phone-number-required", required(errorMessages.PHONE_NUMBER_FORMAT));
-    defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
-    defineRule("damage-option-required", required(errorMessages.DAMAGE_OPTION_REQUIRED));
+//define validation rules
+defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
+defineRule("loss-cause-required", required(errorMessages.LOSS_CAUSE_REQUIRED));
+defineRule("policy-number-required", required(errorMessages.POLICY_NUMBER_REQUIRED));
+defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
+defineRule("loss-state-required", required(errorMessages.LOSS_STATE_REQUIRED));
+defineRule("loss-city-required", required(errorMessages.LOSS_CITY_REQUIRED));
+defineRule("phone-number-required", required(errorMessages.PHONE_NUMBER_FORMAT));
+defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
+defineRule("damage-option-required", required(errorMessages.DAMAGE_OPTION_REQUIRED));
 
-    defineRule("email-address-format",
-        regex(
-            /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/,
-            errorMessages.EMAIL_ADDRESS_FORMAT
-        )
-    );
+defineRule("email-address-format",
+regex(
+    /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/,
+    errorMessages.EMAIL_ADDRESS_FORMAT
+)
+);
 
-    defineRule("phone-number-format",
-        regex(
-            /^(\([0-9]{3}\)|[0-9]{3}) *[-.]? *[0-9]{3} *[-.]? *[0-9]{4}$/,
-            errorMessages.PHONE_NUMBER_FORMAT
-        )
-    );
+defineRule("phone-number-format",
+regex(
+    /^(\([0-9]{3}\)|[0-9]{3}) *[-.]? *[0-9]{3} *[-.]? *[0-9]{4}$/,
+    errorMessages.PHONE_NUMBER_FORMAT
+)
+);
 
-    export default {
-        name: "welcome-page",
-        mixins: [BaseFormMixin],
-        data() {
-            return {
-                welcomePageModel: this.getWelcomePageModelFromStore()                
-            };            
-        },
-        setup() {
-            const mainStore = useMainStore();
+export default {
+    name: "welcome-page",
+    mixins: [BaseFormMixin],
+    data() {
+        return {
+            welcomePageModel: this.getWelcomePageModelFromStore()
+        };
+    },
+    setup() {
+        const mainStore = useMainStore();
 
-            // Set order account number from the issConfig.
-            mainStore.order.accountNumber = mainStore.issConfig.accountNumber;
+        // Set order account number from the issConfig.
+        mainStore.order.accountNumber = mainStore.issConfig.accountNumber;
 
-            return { mainStore };
-        },
-        async beforeRouteEnter(to, from, next)
-        {
-            // Call APIs
-            const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+        return { mainStore };
+    },
+    async beforeRouteEnter(to, from, next)
+    {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
-            // Settle promises and get results
-            const promiseResultMap = [
+        // Settle promises and get results
+        const promiseResultMap = [
             {
                 resultKey: "cmsContent",
                 promise: cmsContentPromise,
-                },
-            ];
+            },
+        ];
 
-            //use resultMap to populate layout content.
-            let resultMap = await settleAllPromises(promiseResultMap);
-           
-            next((vm) => {
-                vm.setCmsContent(resultMap.cmsContent);                
-            });
-        },
-        methods:
-        {
-            async forwardButtonAction() {
-                this.mainStore.updatePolicyData(this.welcomePageModel);
-                return this.navigateForward();
-            },
+        //use resultMap to populate layout content.
+        let resultMap = await settleAllPromises(promiseResultMap);
 
-            navigateForward() {
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD_WELCOME_PAGE,
-                    this.$route
-                );
-            },
-            getWelcomePageModelFromStore() {
-                return {
-                    policyNumber : this.mainStore.order.policy.policyNumber,
-                    dateOfLoss : this.mainStore.order.policy.dateOfLoss,
-                    damageCause : this.mainStore.order.policy.damageCause,
-                    damageState : this.mainStore.order.policy.damageState,
-                    damageCity : this.mainStore.order.policy.damageCity,
-                    isDamageGlassOnly : this.mainStore.order.policy.isDamageGlassOnly,
-                    phoneNumber : this.mainStore.order.customer.phoneNumber,
-                    email : this.mainStore.order.customer.emailAddress,
-                }
-            },
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+    methods:
+    {
+        async forwardButtonAction() {
+            this.mainStore.updatePolicyData(this.welcomePageModel);
+            return this.navigateForward();
         },
-        computed:{
-            DamageCauseOptions() {
-                const damageCauseAnswers =  this.getCmsContent("DamageCauseQuestion", "Answers");
-                const damageCauseAnswersObj ={};
-                if(damageCauseAnswers)
-                {
-                   for (let answer of Object.values(damageCauseAnswers)) {
-                        if (answer?.Name) {
-                            damageCauseAnswersObj[answer.Name] = answer.Name;
-                        }
-                    }
-                }
-                return damageCauseAnswersObj;
-            },
-            DamageGlassOnlyOptions()
-            {
-                return this.getCmsContent("GlassOnlyQuestion", "Answers");
-            },
-            DamageGlassOnlyQuestion()
-            {
-                return this.getCmsContent("GlassOnlyQuestion", "QuestionText");
-            },
-            stateOptions: {
-                get: function () {
-                    return {
-                        AL: "Alabama",
-                        AK: "Alaska",
-                        AZ: "Arizona",
-                        AR: "Arkansas",
-                        CA: "California",
-                        CO: "Colorado",
-                        CT: "Connecticut",
-                        DE: "Delaware",
-                        DC: "District Of Columbia",
-                        FL: "Florida",
-                        GA: "Georgia",
-                        HI: "Hawaii",
-                        ID: "Idaho",
-                        IL: "Illinois",
-                        IN: "Indiana",
-                        IA: "Iowa",
-                        KS: "Kansas",
-                        KY: "Kentucky",
-                        LA: "Louisiana",
-                        ME: "Maine",
-                        MD: "Maryland",
-                        MA: "Massachusetts",
-                        MI: "Michigan",
-                        MN: "Minnesota",
-                        MS: "Mississippi",
-                        MO: "Missouri",
-                        MT: "Montana",
-                        NE: "Nebraska",
-                        NV: "Nevada",
-                        NH: "New Hampshire",
-                        NJ: "New Jersey",
-                        NM: "New Mexico",
-                        NY: "New York",
-                        NC: "North Carolina",
-                        ND: "North Dakota",
-                        OH: "Ohio",
-                        OK: "Oklahoma",
-                        OR: "Oregon",
-                        PA: "Pennsylvania",
-                        RI: "Rhode Island",
-                        SC: "South Carolina",
-                        SD: "South Dakota",
-                        TN: "Tennessee",
-                        TX: "Texas",
-                        UT: "Utah",
-                        VT: "Vermont",
-                        VA: "Virginia",
-                        WA: "Washington",
-                        WV: "West Virginia",
-                        WI: "Wisconsin",
-                        WY: "Wyoming",
-                    };
-                },
-            },
-            displayDamageCityQuestion(){
-                return !!this.getCmsContent("DamageCityQuestion","QuestionText");
-            },
-            displayDamageStateQuestion(){                
-                return !!this.getCmsContent("DamageStateQuestion","QuestionText");
-            },
-            displayGlassOnlyQuestion(){
-                return !!this.getCmsContent("GlassOnlyQuestion","QuestionText");
+
+        navigateForward() {
+            this.$router.navigate(
+                this.navigationScenarios.CLICKED_FORWARD_WELCOME_PAGE,
+                this.$route
+            );
+        },
+        getWelcomePageModelFromStore() {
+            return {
+                policyNumber : this.mainStore.order.policy.policyNumber,
+                dateOfLoss : this.mainStore.order.policy.dateOfLoss,
+                damageCause : this.mainStore.order.policy.damageCause,
+                damageState : this.mainStore.order.policy.damageState,
+                damageCity : this.mainStore.order.policy.damageCity,
+                isDamageGlassOnly : this.mainStore.order.policy.isDamageGlassOnly,
+                phoneNumber : this.mainStore.order.customer.phoneNumber,
+                email : this.mainStore.order.customer.emailAddress,
             }
         },
-        components: {
-            siteHeader,
-            siteSubHeader,
-            buttonQuestion,
-            textboxQuestion,
-            dropdownQuestion,
-            siteFooter,
-            textBlock,
-            Form,
+    },
+    computed:{
+        DamageCauseOptions() {
+            const damageCauseAnswers =  this.getCmsContent("DamageCauseQuestion", "Answers");
+            const damageCauseAnswersObj ={};
+            if(damageCauseAnswers)
+            {
+                for (let answer of Object.values(damageCauseAnswers)) {
+                    if (answer?.Name) {
+                        damageCauseAnswersObj[answer.Name] = answer.Name;
+                    }
+                }
+            }
+            return damageCauseAnswersObj;
         },
-    }
+        DamageGlassOnlyOptions()
+        {
+            return this.getCmsContent("GlassOnlyQuestion", "Answers");
+        },
+        DamageGlassOnlyQuestion()
+        {
+            return this.getCmsContent("GlassOnlyQuestion", "QuestionText");
+        },
+        stateOptions: {
+            get: function () {
+                return {
+                    AL: "Alabama",
+                    AK: "Alaska",
+                    AZ: "Arizona",
+                    AR: "Arkansas",
+                    CA: "California",
+                    CO: "Colorado",
+                    CT: "Connecticut",
+                    DE: "Delaware",
+                    DC: "District Of Columbia",
+                    FL: "Florida",
+                    GA: "Georgia",
+                    HI: "Hawaii",
+                    ID: "Idaho",
+                    IL: "Illinois",
+                    IN: "Indiana",
+                    IA: "Iowa",
+                    KS: "Kansas",
+                    KY: "Kentucky",
+                    LA: "Louisiana",
+                    ME: "Maine",
+                    MD: "Maryland",
+                    MA: "Massachusetts",
+                    MI: "Michigan",
+                    MN: "Minnesota",
+                    MS: "Mississippi",
+                    MO: "Missouri",
+                    MT: "Montana",
+                    NE: "Nebraska",
+                    NV: "Nevada",
+                    NH: "New Hampshire",
+                    NJ: "New Jersey",
+                    NM: "New Mexico",
+                    NY: "New York",
+                    NC: "North Carolina",
+                    ND: "North Dakota",
+                    OH: "Ohio",
+                    OK: "Oklahoma",
+                    OR: "Oregon",
+                    PA: "Pennsylvania",
+                    RI: "Rhode Island",
+                    SC: "South Carolina",
+                    SD: "South Dakota",
+                    TN: "Tennessee",
+                    TX: "Texas",
+                    UT: "Utah",
+                    VT: "Vermont",
+                    VA: "Virginia",
+                    WA: "Washington",
+                    WV: "West Virginia",
+                    WI: "Wisconsin",
+                    WY: "Wyoming",
+                };
+            },
+        },
+        displayDamageCityQuestion(){
+            return !!this.getCmsContent("DamageCityQuestion","QuestionText");
+        },
+        displayDamageStateQuestion(){
+            return !!this.getCmsContent("DamageStateQuestion","QuestionText");
+        },
+        displayGlassOnlyQuestion(){
+            return !!this.getCmsContent("GlassOnlyQuestion","QuestionText");
+        }
+    },
+    components: {
+        siteHeader,
+        siteSubHeader,
+        buttonQuestion,
+        textboxQuestion,
+        dropdownQuestion,
+        siteFooter,
+        textBlock,
+        Form,
+    },
+}
 </script>
 
 <style lang="scss">
-
-.overflow-scroll {    
-    height: calc(100% - 165px);   
-    overflow-X: hidden !important;   
-}
-.my-2
-{
+.my-2 {
     margin-bottom: 0rem !important;
 }
 @-moz-document url-prefix() {

src/router/index.js

@@ -35,7 +35,7 @@ const routes = [
 
                     await runExperiments(to.query.issPage);
                 }
-                   
+
                 // Process ISS cookie.
                 updateOrCreateISSCookie();
 
@@ -54,7 +54,6 @@ const routes = [
                 router.addRoute({
                     path: routeData[0].path, // Always the same path, because we control it with query strings.
                     name: routeData[0].name,
-                    query: to.query,
                     component: routeData[0].component,
                 });
 
@@ -75,7 +74,11 @@ const routes = [
 
 const router = createRouter({
     history: createWebHistory("/"),
-    routes
+    routes,
+    scrollBehavior(to, from, savedPosition) {
+    // always scroll to top
+    return { top: 0 }
+  }
 });
 
 router.afterEach((to, from) => {    /*eslint-disable-line*/
@@ -97,12 +100,12 @@ router.afterEach((to, from) => {    /*eslint-disable-line*/
 // Get route information by page name.
 // This will reach out to the Cms and there is a 1:1 relationship between page names and route names.
 async function GetRouteInfoFromPageName(pageName) {
-    
+
     const response = await useMainStore().getRouteInfo(pageName);
 
     const jsonFromResponse = JSON.parse(response.data.Result);
     let routeData = [];
-  
+
     // Add our route data and return our array.
     Object.keys(jsonFromResponse).forEach((key) => {
       routeData.push({
@@ -139,7 +142,7 @@ router.overrideNavigation = (
 router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) => {
 
     navigate(scenario, currentRoute, optionalQuery, optionalParams, optionalPageData);
-  
+
   }
 
 // Navigate to the next route, depending on the scenario.
@@ -154,11 +157,11 @@ function navigate (scenario, currentRoute, optionalQuery = {}, optionalParams =
 
     if (!matchingScenarioMap){
         console.error("No matching scenario found. Please review the routing table.");
-        return;        
-    } 
+        return;
+    }
 
     if (matchingScenarioMap.destinationIssPageValue) {
-        
+
         // Update page data to the store for next page if provided. Otherwise, keep existing page data or set to empty object
         const existingPageDataForPage = useMainStore().pageData(matchingScenarioMap.destinationIssPageValue);
         baseMixin.methods.savePageDataToStore(
@@ -189,7 +192,7 @@ function navigateToUrl(url, optionalQuery = {}) {
     for (const queryKey in optionalQuery) {
       externalUrl.searchParams.append(queryKey, optionalQuery[queryKey]);
     }
-    
+
     window.location.assign(externalUrl);
 };
 
@@ -206,14 +209,14 @@ function getNavigationMap (scenario, currentRoute) {
         );
 
         let maps = matchedQueryValue ? matchedQueryValue.map((m) => m.maps.filter((map) => map.scenario === scenario))[0] : undefined;
-        
+
         return maps ? maps.filter(x => x.filter === true || x.filter === undefined)[0] : undefined;
     }
     catch (e) {
         console.error(e);
         return undefined;
     }
-   
+
 };
 
 function GoToStartOn404(next) {
@@ -262,4 +265,4 @@ async function runExperiments(nextPage) {
     });
 }
 
-export default router;
+export default router;

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

@@ -439,15 +439,46 @@ const routingTable = function(store) {
         }
       ]
     },
+    {
+      issPageValue: issPageValues.SERVICE_LOCATION,
+      maps: [
+        {
+          scenario: navigationScenarios.CLICKED_BACK,
+          destinationIssPageValue: issPageValues.PROVIDER_PREFERENCE,
+        },
+        {
+          scenario: navigationScenarios.CLICKED_FORWARD,
+          destinationIssPageValue: issPageValues.SERVICE_PACKAGES
+        }
+      ]
+    },
+    {
+      issPageValue: issPageValues.SCHEDULE_PAGE,
+      maps: [
+        {
+          scenario: navigationScenarios.CLICKED_BACK,
+          destinationIssPageValue: issPageValues.SERVICE_LOCATION
+        }
+      ]
+    },
+    {
+      issPageValue: issPageValues.CONTACT_DETAILS,
+      maps: [
+        {
+          scenario: navigationScenarios.CLICKED_BACK,
+          destinationIssPageValue: issPageValues.SCHEDULE_PAGE
+        }
+      ]
+    },
     {
       issPageValue: issPageValues.SERVICE_PACKAGE,
-        maps: [
+      maps: [
         {
           scenario: navigationScenarios.CLICKED_BACK,
           destinationIssPageValue: issPageValues.SERVICE_LOCATION
         },
         {
-          scenario: navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE,
+          scenario: navigationScenarios.CLICKED_FORWARD,
           destinationIssPageValue: issPageValues.REVIEW_ORDER
         }
       ]

src/styles/client-customizations.scss

@@ -33,9 +33,7 @@ $limu-button-color: #A9E3E9;
                 color: $limu-button-text-color !important;
                 box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $limu-button-color !important;
             }
-            &:focus {
-                box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $limu-button-color !important;
-            }
+            
         }
     }
 

src/styles/common-error-styles.scss

@@ -160,13 +160,6 @@ html {
       font-weight: 500;
   }
   
-  .vehicle-damage,
-  .vehicle-lookup {
-      .form-test-error {
-          margin: 0;
-          padding: 0 .75rem;
-      }
-  }
 
   .form-test-invalid {
     &.btn.btn-primary {

src/styles/common-styles.scss

@@ -5,56 +5,69 @@ body {
     background-color: #fff;
     color: #4D5151;
     .container-fluid {
-      max-width: 576px; //Remove once desktop app is complete
-      &.container-shadow {
-        box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15); //Use instead of Bootstrap's helper
-      }
-      &.make-tall {
-        height: 100vh;
-        display: flex;
-        flex-direction: column;
-      }
-      .prevent-squish{
-        overflow-x: unset;
-      }
+        max-width: 576px; //Remove once desktop app is complete
+        &.container-shadow {
+            box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15); //Use instead of Bootstrap's helper
+        }
+        &.make-tall {
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+        .prevent-squish{
+            overflow-x: unset;
+        }
     }
     .pointer {
-      cursor: pointer;
+        cursor: pointer;
     }
     .container,
     .container-fluid {
-      overflow: hidden;
+        overflow: hidden;
     }
-
     .sub-container{
-      &.make-tall {
-        height: 100%;
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        overflow-x: hidden;
-      }
+        &.make-tall {
+            height: 100%;
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            overflow-x: hidden;
+        }
     }
-
     .sr-only {
-      position: absolute;
-      left: -10000px;
-      top: auto;
-      width: 1px;
-      height: 1px;
-      overflow: hidden;
+        position: absolute;
+        left: -10000px;
+        top: auto;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
     }
-
     .page-container-grouped-styles {
-      @extend .container-fluid, .shadow, .rounded-3, .p-0, .position-relative, .make-tall;
+        @extend .container-fluid, .shadow, .p-0, .position-relative, .make-tall;
     }
-
     //Footer modal backdrop adjustments for positioning
     .modal-backdrop {
-      left: 50%;
-      transform: translateX(-50%);
-      max-width: 576px;
-      height: calc(100% - 72px);
+        left: 50%;
+        transform: translateX(-50%);
+        max-width: 576px;
+        height: calc(100% - 72px);
+    }
+    // Scroll page when modal isn't open
+    .fade-on-route-transition {
+        height: calc(100% - 80px);
+        overflow: auto;
+    }
+    // Prevent scroll when modal is open
+    .modal-open {
+        .fade-on-route-transition {
+            overflow: hidden;
+        }
     }
 
-  }
+    .modal-text {
+        display: inline;
+        color: $blue;
+        cursor: pointer;
+        text-decoration: underline;
+      }
+}

src/styles/ux-variables.scss

@@ -68,6 +68,9 @@ $orange: #fd7e14;
 $teal: #20c997;
 $cyan: #0dcaf0;
 
+// Darker gray
+$darker-gray: #525656;
+
 // scss-docs-start colors-map
 $colors: (
     "blue": $blue,
@@ -83,6 +86,7 @@ $colors: (
     "white": $white,
     "gray": $gray,
     "gray-dark": $gray-500,
+    "darker-gray":$darker-gray,
 );
 
 // scss-docs-start theme-color-variables

src/ux-components/button-main/button-main.vue

@@ -68,10 +68,7 @@ export default {
         @media (hover: hover) {
             background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
         }
-        &:focus {
-            box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
-        }
-        &:focus, // Mouse, touch, stylus focus
+         // Mouse, touch, stylus focus
     &:focus-visible {
             // Keyboard focus for accessibility
             outline: none;
@@ -93,7 +90,7 @@ export default {
         &.has-loader {
             color: $white;
             background: $blue-700;
-            box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
+           
         }
         &.delay {
             // fixes flicker while transitioning between states

src/ux-components/list-button/list-button.spec.js

@@ -11,7 +11,7 @@ describe("list-button.vue", () => {
                 mockData: {
                     global: {
                         mocks: {
-                            $route: { query: { fmgPage: "page-name" } },
+                            $route: { query: { issPage: "page-name" } },
                             GaActions: GaActions,
                             pushEventToGA: jest.fn(),
                         },
@@ -37,7 +37,7 @@ describe("list-button.vue", () => {
                 mockData: {
                     global: {
                         mocks: {
-                            $route: { query: { fmgPage: "page-name" } },
+                            $route: { query: { issPage: "page-name" } },
                             GaActions: GaActions,
                             pushEventToGA: jest.fn(),
                         },
@@ -64,7 +64,7 @@ describe("list-button.vue", () => {
                 mockData: {
                     global: {
                         mocks: {
-                            $route: { query: { fmgPage: "page-name" } },
+                            $route: { query: { issPage: "page-name" } },
                             GaActions: GaActions,
                             pushEventToGA: jest.fn(),
                         },

src/ux-components/modal-button-main/modal-button-main.spec.js

@@ -0,0 +1,188 @@
+import { shallowMount } from "@vue/test-utils";
+import modalButtonMain from "./modal-button-main";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { nextTick } from "vue";
+
+describe("modal-button-main.vue", () => {
+    it("Should return btn-primary class", () => {
+        // Arrange/Act
+        const wrapper = shallowMount(
+            modalButtonMain,
+            setupMocks({
+                propsData: {
+                    isPrimary: true,
+                },
+            })
+        );
+        const button = wrapper.find("button");
+
+        // Assert
+        expect(button.attributes("class")).toContain("btn-primary");
+    });
+
+    it("Should return aria-disabled state", () => {
+        // Arrange/Act
+        const wrapper = shallowMount(
+            modalButtonMain,
+            setupMocks({
+                propsData: {
+                    isDisabled: true,
+                },
+            })
+        );
+        const button = wrapper.find("button");
+
+        // Assert
+        expect(button.attributes()["aria-disabled"]).toEqual("true");
+    });
+
+    it("Should return loader color", async () => {
+        // Arrange
+        const wrapper = shallowMount(
+            modalButtonMain,
+            setupMocks({
+                propsData: {
+                    loaderColor: "blue",
+                    loaderEnabled: true,
+                },
+            })
+        );
+
+        // Act
+        wrapper.vm.clicked();
+        
+        await nextTick();
+
+        // Assert
+        const loader = wrapper.find("loader-stub");
+        expect(loader.attributes("class")).toContain("blue");
+    });
+
+    it("Should return loader position", async () => {
+        // Arrange
+        const wrapper = shallowMount(
+            modalButtonMain,
+            setupMocks({
+                propsData: {
+                    loaderPosition: "right",
+                    loaderEnabled: true,
+                },
+            })
+        );
+
+        // Act
+        wrapper.vm.clicked();
+        await nextTick();
+
+        // Assert
+        const loader = wrapper.find("loader-stub");
+        expect(loader.attributes("class")).toContain("right");
+    });
+
+    it("Should set 'isLoaderDisplayed' to false when calling 'removeLoader'", async () => {
+        // Arrange
+        const wrapper = shallowMount(
+            modalButtonMain,
+            setupMocks({
+                propsData: {
+                    loaderPosition: "right",
+                    loaderEnabled: true,
+                },
+            })
+        );
+
+        wrapper.setData({
+            isLoaderDisplayed: true,
+        });
+
+        // Act
+        wrapper.vm.removeLoader();
+        await nextTick();
+
+        // Assert
+        const loader = wrapper.find("loader-stub");
+        expect(wrapper.vm.isLoaderDisplayed).toBe(false);
+    });
+
+    it("Should set 'isLoaderDisplayed' to false when calling 'resetButtonStyle'", async () => {
+        // Arrange
+        const wrapper = shallowMount(
+            modalButtonMain,
+            setupMocks({
+                propsData: {
+                    loaderPosition: "right",
+                    loaderEnabled: true,
+                },
+            })
+        );
+
+        wrapper.setData({
+            isLoaderDisplayed: true,
+        });
+
+        // Act
+        wrapper.vm.resetButtonStyle();
+        await nextTick();
+
+        // Assert
+        expect(wrapper.vm.isLoaderDisplayed).toBe(false);
+    });
+
+    it("Should emit 'click-event' event when clicking if the button is enabled", async () => {
+        // Arrange
+        const wrapper = shallowMount(
+            modalButtonMain,
+            setupMocks({
+                propsData: {
+                    loaderPosition: "right",
+                    loaderEnabled: true,
+                    isDisabled: false,
+                },
+            })
+        );
+
+        const buttonElement = wrapper.find("button");
+
+        // Act
+        buttonElement.trigger("click");
+
+        await nextTick();
+
+        // Assert
+        expect(wrapper.emitted("click-event")).toBeTruthy();
+    });
+
+    it("Should not emit 'click-event' event when clicking if the button is disabled", async () => {
+        // Arrange
+        const wrapper = shallowMount(
+            modalButtonMain,
+            setupMocks({
+                propsData: {
+                    loaderPosition: "right",
+                    loaderEnabled: true,
+                    isDisabled: true,
+                },
+            })
+        );
+
+        const buttonElement = wrapper.find("button");
+
+        // Act
+        buttonElement.trigger("click");
+
+        await nextTick();
+
+        // Assert
+        expect(wrapper.emitted("click-event")).toBeFalsy();
+    });
+});
+
+function setupMocks(mountOptionsMockData = {}) {
+    const defaultMountOptions = { route: { query: { issPage: "page-name" } } };
+    const baseMountOptions = getMountOptions(
+        Object.assign(defaultMountOptions, mountOptionsMockData)
+    );
+    const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions);
+
+    return allMountOptions;
+}

src/ux-components/modal-button-main/modal-button-main.vue

@@ -0,0 +1,150 @@
+<template>
+    <button
+        type="button"
+        :aria-disabled="isDisabled"
+        class="btn d-flex align-items-center justify-content-center py-3 px-4 delay"
+        :class="[
+            isPrimary ? 'btn-primary' : 'btn-secondary',
+            isFloat ? 'float-end' : '',
+            isLoaderDisplayed ? 'has-loader' : '',
+        ]"
+        @click="clicked">
+        <span class="m-0">{{ this.buttonText }}</span>
+        <loader
+            class="ms-2"
+            v-if="isLoaderDisplayed && !suppressLoader"
+            v-bind:class="[this.loaderColor, this.loaderPosition]" />
+    </button>
+</template>
+
+<script>
+import loader from "@/ux-components/loader/loader";
+
+export default {
+    name: "modalButtonMain",
+    props: {
+        isPrimary: Boolean,
+        buttonText: String,
+        isDisabled: Boolean,
+        loaderColor: String,
+        loaderPosition: String,
+        isFloat: Boolean,
+        suppressLoader: Boolean,
+    },
+    data() {
+        return {
+            isLoaderDisplayed: false,
+        };
+    },
+    methods: {
+        removeLoader() {
+            this.isLoaderDisplayed = false;
+        },
+        clicked() {
+            this.pushEventToGA(
+                this.$route.query[this.queryStrings.ISS_PAGE],
+                this.GaActions.CLICKED,
+                this.buttonText,
+                true
+            );
+            if (!this.isDisabled) {
+                this.isLoaderDisplayed = true;
+                this.$emit("click-event");
+            }
+        },
+        resetButtonStyle() {
+            this.isLoaderDisplayed = false;
+        },
+    },
+    components: {
+        loader,
+    },
+};
+</script>
+
+<style lang="scss">
+.btn {
+    &.btn-primary {
+        position: relative;
+        background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
+        border: none;
+        border-radius: $border-radius-lg;
+        color: $white;
+        justify-content: center;
+        font-weight: 500;
+        @media (hover: hover) {
+            background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
+        }
+       
+       // Mouse, touch, stylus focus
+    &:focus-visible {
+            // Keyboard focus for accessibility
+            outline: none;
+            box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
+            color: $white;
+            background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%);
+        }
+        &:disabled {
+            background: $gray-200 !important;
+            background: linear-gradient(270deg, $gray-200 0%, $gray-200 100%) !important;
+            color: $gray-600 !important;
+            font-weight: 400;
+            height: 48px;
+            border: none;
+            border-radius: $border-radius-lg;
+            cursor: pointer;
+            pointer-events: all;
+        }
+        &.has-loader {
+            color: $white;
+            background: $blue-700;           
+            pointer-events: none;
+        }
+        &.delay {
+            // fixes flicker while transitioning between states
+            transition: background 0s 0s ease-in-out;
+        }
+    }
+    &.btn-secondary {
+        position: relative;
+        background: transparent;
+        border: 1px solid $blue;
+        border-radius: $border-radius-lg;
+        color: $blue;
+        font-weight: 500;
+        transition: all 150ms linear;
+        height: 3rem;
+        &:hover {
+            color: $white;
+            @include blue-gradient;
+        }
+        &:focus, // Mouse, touch, stylus focus
+    &:focus-visible {
+            // Keyboard focus for accessibility
+            outline: none;
+            box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700;
+            color: $white;
+            @include blue-gradient;
+        }
+        &:disabled {
+            background: transparent;
+            color: $gray-550 !important;
+            font-weight: 400;
+            height: 48px;
+            border: 1px solid $gray-550;
+            border-radius: $border-radius-lg;
+            cursor: pointer;
+            pointer-events: all;
+        }
+        &.has-loader {
+            color: $white;
+            @include blue-gradient;
+            pointer-events: none;
+        }
+        &.delay {
+            // fixes flicker while transitioning between states
+            transition: background 0s 0s ease-in-out;
+        }
+    }
+}
+</style>