Merge branch 'develop' into rlsmerge/2023.01.19-to-develop

src/constants/application-config.js

@@ -7,6 +7,7 @@ const applicationConfig = {
     CURRENT_ENVIRONMENT: process.env.VUE_APP_CURRENT_ENVIRONMENT, // "Localhost", "Dev", "QA", and "Prod"
     APPLICATION_NAME: "FixMyGlass",
     APPLICATION_ABBREVIATION: "fmg",
+    PAGE_QUERYSTRING: "fmgPage",
     SITE_ENTRY_TRIGGER_VALUE: "FixMyGlass",
     CASH_ACCOUNT_NUMBER: 167132,
 };

src/digital-components/base-input-button/base-input-button.vue

@@ -33,7 +33,7 @@ import {
     handleButtonComponentFocus,
     handleInputComponentBlur,
 } from "@/helpers/button-question-focus-helper";
-import { inputButtonProps } from "@/common-components/base-input-button/button-functionality-props";
+import { inputButtonProps } from "@/digital-components/base-input-button/button-functionality-props";
 
 export default {
     name: "base-input-button",

src/digital-components/base-input-button/button-functionality-props.js

@@ -4,8 +4,15 @@ export const inputButtonProps = {
         required: true,
     },
     modelValue: {
-        type: [Array, String, Number],
         required: true,
+        validator: function (prop) {
+            return (
+                prop === null ||
+                Array.isArray(prop) ||
+                typeof prop === "string" ||
+                (typeof prop === "number" && !Number.isNaN(prop))
+            );
+        },
     },
     isMultiSelect: Boolean,
     groupName: {

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

@@ -1,5 +1,5 @@
 import { shallowMount, mount } from "@vue/test-utils";
-import buttonQuestion from "@/common-components/button-question/button-question";
+import buttonQuestion from "./button-question";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 
 describe("buttonQuestion.vue", () => {

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

@@ -1,4 +1,5 @@
-<!-- Documented in confluence https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Component -->
+<!-- Documented in confluence
+https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Component -->
 <template>
     <div
         :class="
@@ -68,7 +69,10 @@
             </fieldset>
         </div>
         <div class="row form-test-error mt-1">
-            <error-message :name="formatString(groupName)" v-if="!suppressError"></error-message>
+            <error-message
+                class="small"
+                :name="formatString(groupName)"
+                v-if="!suppressError"></error-message>
         </div>
     </div>
 </template>

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

@@ -1,5 +1,7 @@
 <template>
-    <div class="dropdown-question" :class="errorMessage || hasError ? 'has-error' : ''">
+    <div
+        class="dropdown-question"
+        :class="(errors && errors.length) || hasError ? 'has-error' : ''">
         <label
             :for="inputId"
             :aria-label="questionText"
@@ -13,7 +15,9 @@
             :aria-disabled="isDisabled"
             :disabled="isDisabled"
             :aria-required="isRequired"
-            :validationRules="validationRules">
+            :validationRules="validationRules"
+            :placeHolderText="placeHolderText">
+            <option v-if="placeHolderText" value="" selected>{{ placeHolderText }}</option>
             <option v-for="(value, name, index) in options" :value="name" :key="index">
                 {{ value }}
             </option>
@@ -38,9 +42,11 @@ export default {
         },
         isDisabled: Boolean,
         isRequired: Boolean,
+        disableAutoFill: Boolean,
         validationRules: String,
         cmsWidgetName: String,
         hasError: Boolean,
+        placeHolderText: String,
     },
     setup(props) {
         const propsClone = Object.assign({}, props);
@@ -62,7 +68,7 @@ export default {
             initialValue: initialValue,
         };
 
-        const { errorMessage, handleBlur, handleChange, meta } = useField(
+        const { errorMessage, handleBlur, handleChange, meta, errors } = useField(
             props.inputId,
             props.validationRules,
             fieldOptions
@@ -73,6 +79,7 @@ export default {
             handleBlur,
             handleChange,
             meta,
+            errors,
         };
     },
     computed: {
@@ -81,7 +88,7 @@ export default {
         },
         selectedOption: {
             get: function () {
-                return this.modelValue;
+                return !this.modelValue ? "" : this.modelValue;
             },
             set: function (newValue) {
                 this.$emit("update:modelValue", newValue);

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

@@ -1,5 +1,5 @@
 import { shallowMount } from "@vue/test-utils";
-import questionChain from "@/common-components/question-chain/question-chain.vue";
+import questionChain from "./question-chain.vue";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { nextTick } from "vue";
 

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

@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import buttonQuestion from "@/common-components/button-question/button-question";
+import buttonQuestion from "@/digital-components/button-question/button-question";
 import { useValidateForm } from "vee-validate";
 
 export default {
@@ -82,7 +82,7 @@ export default {
     },
     methods: {
         handleAnswer(question, returnedAnswer) {
-            /* 
+            /*
                 returnedAnswer example format:
                 "1|answer|DD11132|Yes"
             */

src/digital-components/text-block/text-block.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        class="text-block d-flex w-100 mt-2"
+        class="text-block w-100 mt-2"
         :class="[justifyText, typeStyle, fontWeight]"
         v-html="this.TextBlockCopy"></div>
 </template>

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

@@ -32,8 +32,8 @@
                 @focus="$emit('focus', $event.target.value)" />
             <button v-if="includeSearchIcon" type="submit" aria-label="Search button" />
         </div>
-        <div v-show="errorMessage" class="row my-2 form-test-error">
+        <div v-show="errorMessage" class="row my-1 form-test-error">
-            <span class="d-inline-flex mt-0" role="alert">{{ errorMessage }}</span>
+            <span class="d-inline-flex small mt-0" role="alert">{{ errorMessage }}</span>
         </div>
     </div>
 </template>

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

@@ -19,7 +19,7 @@
 import alert from "@/ux-components/alert/alert";
 import eventBus from "@/helpers/event-bus/event-bus";
 import { globalEvents } from "@/constants/events";
-import menuModal from "@/common-components/funnel-header/menu-modal/menu-modal";
+import menuModal from "@/fmg-components/funnel-header/menu-modal/menu-modal";
 
 export default {
     name: "funnel-header",

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

@@ -1,8 +1,8 @@
 <template>
-    <div class="current_car_info-text">
+    <div class="funnel-sub-header">
         <div
             class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
-            <h5 class="text-center fw-normal mb-0" :class="headerColor">
+            <h5 class="text-center fw-normal mb-2" :class="headerColor">
                 <span>
                     {{ text }}
                 </span>
@@ -13,8 +13,9 @@
             </h5>
         </div>
         <div
+            v-if="subText"
             class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
-            <p class="text-center small fw-normal mb-0">
+            <p class="text-center small fw-normal sub-text">
                 <span>
                     {{ subText }}
                 </span>
@@ -24,13 +25,17 @@
 </template>
 
 <script>
-import buttonBack from "@/common-components/funnel-sub-header/button-back/button-back";
+import buttonBack from "@/fmg-components/funnel-sub-header/button-back/button-back";
 
 export default {
     name: "FunnelSubHeader",
     props: {
         hasBackButton: Boolean,
         cmsWidgetName: String,
+        headerColor: {
+            type: String,
+            default: "dark-header",
+        },
     },
     components: {
         buttonBack,
@@ -45,9 +50,6 @@ export default {
         backButtonAccessibleText() {
             return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText");
         },
-        headerColor() {
-            return this.subText ? "dark-header" : "light-header";
-        },
     },
     methods: {
         clickEvent() {
@@ -77,4 +79,7 @@ h5 {
 p.small {
     color: $gray-550;
 }
+.sub-text {
+    margin: 0;
+}
 </style>

src/fmg-components/layouts/questions-page-layout/questions-page-layout.spec.js

@@ -1,5 +1,5 @@
 // Components
-import questionsPageLayout from "@/common-components/layouts/questions-page-layout/questions-page-layout";
+import questionsPageLayout from "./questions-page-layout";
 
 // Supporting Files
 import { shallowMount } from "@vue/test-utils";

src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue

@@ -35,13 +35,13 @@
 
 <script>
 // Components
-import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 import alert from "@/ux-components/alert/alert";
-import questionChain from "@/common-components/question-chain/question-chain";
+import questionChain from "@/digital-components/question-chain/question-chain";
-import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
-import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
-import loadingModal from "@/common-components/loading-modal/loading-modal.vue";
+import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 
 export default {
     name: "questions-page",

src/helpers/cms-content-helper.js

@@ -303,7 +303,7 @@ export function splitCopyOnCMSPlaceHolder(copy) {
  * Returns string2 of input following this pattern: {string1:string2,string3}
  * @returns string
  */
-export function getLinkTargetFromCopy(copy) {
+export function getRouterLinkRouteFromCopy(copy) {
     // sample input:      {routerLink:estimate,provide your VIN}
     // first split would return      'estimate,provide your VIN'
     // second split would return     'estimate'
@@ -314,7 +314,7 @@ export function getLinkTargetFromCopy(copy) {
  * Returns string3 of input following this pattern: {string1:string2,string3}
  * @returns string
  */
-export function getLinkDisplayTextFromCopy(copy) {
+export function getRouterLinkDisplayTextFromCopy(copy) {
     // sample input:     {routerLink:estimate,provide your VIN}
     // first split would return     'estimate,provide your VIN'
     // second split would return             'provide your VIN'

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

@@ -81,13 +81,13 @@
 
 <script>
 // Components
-import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
-import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
-import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import customerQuestions from "@/layouts/address-lookup/customer-questions/customer-questions";
 import alert from "@/ux-components/alert/alert";
-import textboxQuestion from "@/common-components/textbox-question/textbox-question";
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
 
 import { Form, defineRule } from "vee-validate";
 import { required, regex } from "@/helpers/validation-rules";

src/layouts/address-lookup/customer-questions/address-questions/address-questions.spec.js

@@ -7,6 +7,7 @@ import { mount, shallowMount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { storeMutations } from "@/constants/store-mutations";
 import store from "@/store";
+import { createImportSpecifier } from "typescript";
 
 let autocompleteElement;
 describe("address-questions.vue", () => {
@@ -18,7 +19,7 @@ describe("address-questions.vue", () => {
     });
 
     describe("initial state", () => {
-        test("only street address field is shown", () => {
+        test("Should only show the street address field", () => {
             // Arrange
             const { wrapper } = setupMocks({});
 
@@ -58,7 +59,7 @@ describe("address-questions.vue", () => {
             expect(zipCode.exists()).toBe(true);
         });
 
-        test("Should it set this.showAddressFields to true when the model is prepopulated", async () => {
+        test("Should set this.showAddressFields to true when the model is prepopulated", async () => {
             // Arrange
             // Act
             const newAddressModel = {
@@ -305,38 +306,6 @@ describe("address-questions.vue", () => {
     });
 
     describe("alerts", () => {
-        const places = [null, { address_components: null }, undefined, {}];
-        test.each(places)(
-            "selected place/place properties is null => display verification alert",
-            async (place) => {
-                // Arrange
-                const { wrapper } = setupMocks({});
-                await wrapper.setData({
-                    addressModel: {
-                        streetAddress: "123 Test Street",
-                    },
-                });
-
-                const selectedPlace = place;
-
-                // Act
-                autocompleteElement.dispatchEvent(
-                    new CustomEvent("place_changed", { detail: selectedPlace })
-                );
-                await wrapper.vm.$nextTick();
-
-                // Assert
-                const verificationAlert = wrapper.findComponent({
-                    ref: "alertVerificationWarning",
-                });
-                expect(verificationAlert.exists()).toBe(true);
-                expect(verificationAlert.isVisible()).toBe(true);
-
-                const noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
-                expect(noMatchAlert.exists()).toBe(false);
-            }
-        );
-
         test("user enters address that yields no autocomplete results => show noMatch alert", async () => {
             // Arrange
             let changeEventCallbackFunction;
@@ -413,110 +382,110 @@ describe("address-questions.vue", () => {
         describe("noMatch alert is cleared on address change", () => {
             test("user sees noMatch warning and modifies street address => noMatch warning is removed", async () => {
                 // Arrange
-                const { wrapper } = setupMocks({});
+                const { wrapper } = setupMocks({
+                    props: {
+                        modelValue: {
+                            streetAddress: "LS",
+                            city: "",
+                            state: "",
+                            zipCode: "",
+                        },
+                    },
+                });
 
+                // Initial condition to display noMatch warning
                 await wrapper.setData({
                     matchFound: false,
                 });
+
+                // Act
+                wrapper.vm.addressModel.streetAddress = "LJS";
                 await wrapper.vm.$nextTick();
 
-                let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
-                expect(noMatchAlert.exists()).toBeTruthy();
-                expect(noMatchAlert.isVisible()).toBeTruthy();
-
-                // // Act
-                wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, {
-                    streetAddress: "LS",
-                });
-
                 // Assert
-                wrapper.vm.$nextTick(function () {
+                let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
-                    expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
+                expect(noMatchAlert.exists()).toBeFalsy();
-
-                    noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
-                    expect(noMatchAlert.exists()).toBeFalsy();
-                });
             });
 
             test("user sees noMatch warning and enters city => noMatch warning is removed", async () => {
                 // Arrange
-                const { wrapper } = setupMocks({});
+                const { wrapper } = setupMocks({
+                    props: {
+                        modelValue: {
+                            streetAddress: "",
+                            city: "LS",
+                            state: "",
+                            zipCode: "",
+                        },
+                    },
+                });
 
+                // Initial condition to display noMatch warning
                 await wrapper.setData({
                     matchFound: false,
                 });
+
+                // Act
+                wrapper.vm.addressModel.city = "LJS";
                 await wrapper.vm.$nextTick();
 
-                let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
-                expect(noMatchAlert.exists()).toBeTruthy();
-                expect(noMatchAlert.isVisible()).toBeTruthy();
-
-                // // Act
-                wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, {
-                    city: "LS",
-                });
-
                 // Assert
-                wrapper.vm.$nextTick(function () {
+                let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
-                    expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
+                expect(noMatchAlert.exists()).toBeFalsy();
-
-                    noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
-                    expect(noMatchAlert.exists()).toBeFalsy();
-                });
             });
 
             test("user sees noMatch warning and enters state => noMatch warning is removed", async () => {
                 // Arrange
-                const { wrapper } = setupMocks({});
+                const { wrapper } = setupMocks({
+                    props: {
+                        modelValue: {
+                            streetAddress: "",
+                            city: "",
+                            state: "LS",
+                            zipCode: "",
+                        },
+                    },
+                });
 
+                // Initial condition to display noMatch warning
                 await wrapper.setData({
                     matchFound: false,
                 });
+
+                // Act
+                wrapper.vm.addressModel.state = "LJS";
                 await wrapper.vm.$nextTick();
 
-                let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
-                expect(noMatchAlert.exists()).toBeTruthy();
-                expect(noMatchAlert.isVisible()).toBeTruthy();
-
-                // // Act
-                wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, {
-                    state: "KO",
-                });
-
                 // Assert
-                wrapper.vm.$nextTick(function () {
+                let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
-                    expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
+                expect(noMatchAlert.exists()).toBeFalsy();
-
-                    noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
-                    expect(noMatchAlert.exists()).toBeFalsy();
-                });
             });
 
             test("user sees noMatch warning and enters zip code => noMatch warning is removed", async () => {
                 // Arrange
-                const { wrapper } = setupMocks({});
+                const { wrapper } = setupMocks({
+                    props: {
+                        modelValue: {
+                            streetAddress: "",
+                            city: "",
+                            state: "",
+                            zipCode: "LS",
+                        },
+                    },
+                });
 
+                // Initial condition to display noMatch warning
                 await wrapper.setData({
                     matchFound: false,
                 });
+
+                // Act
+                wrapper.vm.addressModel.zipCode = "LJS";
                 await wrapper.vm.$nextTick();
 
-                let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
-                expect(noMatchAlert.exists()).toBeTruthy();
-                expect(noMatchAlert.isVisible()).toBeTruthy();
-
-                // // Act
-                wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, {
-                    zipCode: "12345",
-                });
-
                 // Assert
-                wrapper.vm.$nextTick(function () {
+                let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
-                    expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
+                expect(noMatchAlert.exists()).toBeFalsy();
-
-                    noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
-                    expect(noMatchAlert.exists()).toBeFalsy();
-                });
             });
         });
     });
@@ -576,6 +545,7 @@ function setupMocks({
     const wrapper = isShallowMount
         ? shallowMount(addressQuestions, resultingMountOptions)
         : mount(addressQuestions, resultingMountOptions);
+
     document.querySelector = jest.fn().mockImplementation((query) => {
         let result = null;
         if (query == ".pac-container") result = document.createElement("div");

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

@@ -71,13 +71,14 @@
 </template>
 
 <script>
-import textboxQuestion from "@/common-components/textbox-question/textbox-question";
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
-import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
+import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question";
 import alert from "@/ux-components/alert/alert";
 import { applicationConfig } from "@/constants/application-config.js";
 import { defineRule } from "vee-validate";
 import { required, regex } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
+import { fill } from "lodash";
 
 // DEFINE VALIDATION RULES
 defineRule("street-address-required", required(errorMessages.STREET_ADDRESS_REQUIRED));
@@ -110,10 +111,7 @@ export default {
             alertCopyVerificationWarning: "",
             alertHeadlineNoMatchWarning: "",
             alertCopyNoMatchWarning: "",
-            matchingIndirectly: false,
             matchFound: null, // null = no attempted match, true = match was found, false = match was not found
-            enterPressed: false,
-            isAddressWatchActive: false, // Only deep watch the address model when a match was not found
         };
     },
     computed: {
@@ -235,27 +233,25 @@ export default {
                     });
 
                     addressField1.addEventListener("keydown", (e) => {
-                        if (e.code === "Enter" || e.code === "NumpadEnter" || e.code === "Tab") {
+                        if (e.code === "Enter" || e.code === "NumpadEnter") {
-                            if (e.code === "Tab") {
+                            const selectedItem = document.querySelector(
-                                self.matchingIndirectly = true;
+                                ".pac-container .pac-item-selected"
+                            );
+                            if (selectedItem !== null) {
+                                // Fill-in the address using selected item in the list.
+                                fillInAddress(selectedItem);
                             } else {
-                                self.enterPressed = true;
+                                // Fill-in the address using first item in the list.
+                                fillInAddressUsingFirstItem();
                             }
-
-                            addressField1.blur();
                         } else {
                             return;
                         }
                     });
 
                     addressField1.addEventListener("change", () => {
-                        // NOTE: The "place_changed" event of the autocomplete fires after this and will use either the address the user had chosen
+                        // If a match has been previously attempted then do nothing
-                        // using either the down / up arrows or the address the user was hovering over when they pressed "Enter."
+                        if (self.matchFound !== null) {
-
-                        // If a match has been previously found then do nothing
-                        // OR
-                        // If the user pressed "Enter" then do nothing
-                        if (self.matchFound || self.enterPressed) {
                             return;
                         }
 
@@ -267,29 +263,32 @@ export default {
                         // If the Street Address field changed without clicking (i.e. by pressing Tab, or clicking outside the field)
                         if (clickedAddress === null) {
                             // Fill-in the address using first item in the list.
-                            const item = document.querySelector(".pac-container .pac-item");
+                            fillInAddressUsingFirstItem();
-                            if (item != null) {
-                                self.matchingIndirectly = true;
-
-                                const firstResult = item.textContent;
-                                const geocoder = new window.google.maps.Geocoder();
-                                geocoder.geocode(
-                                    {
-                                        address: firstResult,
-                                    },
-                                    function (results, status) {
-                                        if (status === window.google.maps.GeocoderStatus.OK) {
-                                            fillInAddress(results[0]);
-                                        }
-                                    }
-                                );
-                            } else {
-                                // No addresses found for the input
-                                self.matchFound = false;
-                            }
                         }
                     });
 
+                    function fillInAddressUsingFirstItem() {
+                        // Fill-in the address using first item in the list.
+                        const item = document.querySelector(".pac-container .pac-item");
+                        if (item != null) {
+                            const firstResult = item.textContent;
+                            const geocoder = new window.google.maps.Geocoder();
+                            geocoder.geocode(
+                                {
+                                    address: firstResult,
+                                },
+                                function (results, status) {
+                                    if (status === window.google.maps.GeocoderStatus.OK) {
+                                        fillInAddress(results[0]);
+                                        self.displayVerificationWarning = true;
+                                    }
+                                }
+                            );
+                        } else {
+                            self.matchFound = false;
+                        }
+                    }
+
                     function fillInAddress(place) {
                         if (!place) {
                             place = autocomplete.getPlace();
@@ -297,6 +296,7 @@ export default {
 
                         if (place && place.address_components) {
                             self.matchFound = true;
+
                             self.addressModel.streetAddress = "";
                             self.$nextTick(function () {
                                 self.showAddressFields = true;
@@ -329,8 +329,6 @@ export default {
                                     }
                                 }
 
-                                self.displayVerificationWarning = self.matchingIndirectly;
-
                                 // after showing the address fields, disable the address autocomplete
                                 window.google.maps.event.removeListener(autocompleteListener);
                                 window.google.maps.event.clearInstanceListeners(autocomplete);
@@ -340,8 +338,6 @@ export default {
                                     pacContainer.remove();
                                 }
                             });
-                        } else {
-                            self.displayVerificationWarning = true;
                         }
                     }
                 })
@@ -357,6 +353,13 @@ export default {
     watch: {
         matchFound: {
             handler(newValue) {
+                if (newValue === null) {
+                    this.displayNoMatchWarning = false;
+                    this.displayVerificationWarning = false;
+                    this.unwatchAddress();
+                    return;
+                }
+
                 if (!newValue) {
                     this.displayNoMatchWarning = true;
 
@@ -366,22 +369,19 @@ export default {
                     this.showAddressFields = true;
                     this.displayVerificationWarning = false;
 
-                    this.$nextTick(function () {
+                    // Only deep watch the Address Model after a failed match
-                        // Only deep watch the Address Model after a failed match
+                    this.unwatchAddress = this.$watch(
-                        this.isAddressWatchActive = true;
+                        "addressModel",
-                    });
+                        () => {
+                            // When the address model changes reset to "no attempted match"
+                            this.matchFound = null;
+                            this.$nextTick();
+                        },
+                        { deep: true, flush: "post" }
+                    );
                 }
             },
         },
-        addressModel: {
-            handler() {
-                if (this.isAddressWatchActive) {
-                    this.displayNoMatchWarning = false;
-                    this.isAddressWatchActive = false;
-                }
-            },
-            deep: true,
-        },
     },
     components: {
         textboxQuestion,

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

@@ -42,12 +42,12 @@
 
 <script>
 import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
-import textboxQuestion from "@/common-components/textbox-question/textbox-question";
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
 import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
 import { regex } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
-import textBlock from "@/common-components/text-block/text-block";
+import textBlock from "@/digital-components/text-block/text-block";
 
 // DEFINE VALIDATION RULES
 defineRule("first-name-required", required(errorMessages.FIRST_NAME_REQUIRED));

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

@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import buttonQuestion from "@/common-components/button-question/button-question";
+import buttonQuestion from "@/digital-components/button-question/button-question";
 import alert from "@/ux-components/alert/alert";
 
 // Supporting files

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

@@ -25,10 +25,10 @@
                     <span v-if="doesCopyContainRouterLink(copy)" class="text-body">
                         <router-link
                             :to="{
-                                query: { fmgPage: `${getLinkTargetFromCopy(copy)}` },
+                                query: { fmgPage: `${getRouterLinkRouteFromCopy(copy)}` },
                                 name: 'root',
                             }"
-                            >{{ getLinkDisplayTextFromCopy(copy) }}</router-link
+                            >{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link
                         >
                     </span>
                     <span v-else class="m-0 text-body" v-html="copy"></span>
@@ -46,10 +46,10 @@
 
 <script>
 // Components
-import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
-import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
-import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import alert from "@/ux-components/alert/alert";
 import addressVehiclesQuestion from "@/layouts/address-vehicles/address-vehicles-question/address-vehicles-question";
 
@@ -66,8 +66,8 @@ import { isGlassAvailableForCarId } from "@/helpers/damage-helper";
 import {
     doesCopyContainRouterLink,
     splitCopyOnCMSPlaceHolder,
-    getLinkTargetFromCopy,
+    getRouterLinkRouteFromCopy,
-    getLinkDisplayTextFromCopy,
+    getRouterLinkDisplayTextFromCopy,
 } from "@/helpers/cms-content-helper";
 import { routerParams } from "@/router/router-constants/router-params";
 import vinPagesMixin from "@/mixins/vin-pages-mixin";
@@ -151,8 +151,8 @@ export default {
     methods: {
         doesCopyContainRouterLink,
         splitCopyOnCMSPlaceHolder,
-        getLinkTargetFromCopy,
+        getRouterLinkRouteFromCopy,
-        getLinkDisplayTextFromCopy,
+        getRouterLinkDisplayTextFromCopy,
         arePagePrerequisitesValid() {
             if (
                 store.getters.order.vehicle.carId &&
@@ -247,7 +247,7 @@ export default {
     line-height: 1.4;
 
     a {
-        text-underline-offset: 0.2em;
+        text-underline-offset: 4px; //Per Devyn. This can't be documented in Figma so there is a comment with the Prototype mocks on the Quote page in Figma
         line-height: inherit;
     }
 }

src/layouts/capability-questions/capability-questions.vue

@@ -16,7 +16,7 @@
 
 <script>
 // Components
-import questionsPageLayout from "@/common-components/layouts/questions-page-layout/questions-page-layout";
+import questionsPageLayout from "@/fmg-components/layouts/questions-page-layout/questions-page-layout";
 
 // Supporting Files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";

src/layouts/estimate/estimate.vue

@@ -4,7 +4,7 @@
             <loadingModal ref="loadingModal" />
             <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
             <vehicleBanner cmsWidgetName="VehicleBannerWidget" />
-            <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+            <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
             <div class="fade-on-route-transition sub-container make-tall">
                 <div v-if="!skipVin">
                     <alert
@@ -84,15 +84,15 @@
 
 <script>
 // Components
-import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
-import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
-import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
-import buttonQuestion from "@/common-components/button-question/button-question";
+import buttonQuestion from "@/digital-components/button-question/button-question";
 import alert from "@/ux-components/alert/alert";
-import textboxQuestion from "@/common-components/textbox-question/textbox-question";
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
-import textBlock from "@/common-components/text-block/text-block";
+import textBlock from "@/digital-components/text-block/text-block";
-import loadingModal from "@/common-components/loading-modal/loading-modal.vue";
+import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 
 //Supporting Files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -305,7 +305,4 @@ export default {
     font-weight: 500;
     color: $black;
 }
-div .current_car_info-text {
-    padding-bottom: 16px;
-}
 </style>

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

@@ -91,13 +91,13 @@
 
 <script>
 // Components
-import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
-import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
-import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import alert from "@/ux-components/alert/alert";
-import textboxQuestion from "@/common-components/textbox-question/textbox-question";
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
-import textBlock from "@/common-components/text-block/text-block";
+import textBlock from "@/digital-components/text-block/text-block";
 
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";

src/layouts/molding-questions/molding-questions.vue

@@ -16,7 +16,7 @@
 
 <script>
 // Components
-import questionsPageLayout from "@/common-components/layouts/questions-page-layout/questions-page-layout";
+import questionsPageLayout from "@/fmg-components/layouts/questions-page-layout/questions-page-layout";
 
 // Supporting Files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";

src/layouts/part-questions/part-questions.vue

@@ -16,7 +16,7 @@
 
 <script>
 // Components
-import questionsPageLayout from "@/common-components/layouts/questions-page-layout/questions-page-layout";
+import questionsPageLayout from "@/fmg-components/layouts/questions-page-layout/questions-page-layout";
 
 // Supporting Files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";

src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import buttonQuestion from "@/common-components/button-question/button-question";
+import buttonQuestion from "@/digital-components/button-question/button-question";
 
 const cashAnswer = "CashAnswer";
 const insuranceAnswer = "InsuranceAnswer";

src/layouts/quote/quote.vue

@@ -1,3 +1,4 @@
+digital
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <div class="page-container-grouped-styles">
@@ -6,13 +7,8 @@
             <vehicleBanner
                 cmsWidgetName="VehicleBannerWidget"
                 :displayGenericVehicleImage="false" />
-            <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+            <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
             <div class="fade-on-route-transition sub-container make-tall">
-                <textBlock
-                    cmsWidgetName="paymentServiceOptionsCopy"
-                    justifyText="center"
-                    typeStyle="small"
-                    class="mt-2 mb-5" />
                 <cashOrInsuranceQuestion
                     ref="cashOrInsurance"
                     cmsWidgetName="CashOrInsuranceQuestionWidget"
@@ -33,7 +29,7 @@
                     cmsWidgetName="quoteDisclaimer"
                     justifyText="left"
                     typeStyle="caption"
-                    class="mt-4" />
+                    class="mt-7" />
                 <modal cmsWidgetName="RainDefenseModal" />
                 <modal cmsWidgetName="FrontWiperModal" />
                 <modal cmsWidgetName="RearWiperModal" />
@@ -51,15 +47,15 @@
 
 <script>
 // Components
-import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
-import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
-import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import cashOrInsuranceQuestion from "./cash-or-insurance-question/cash-or-insurance-question";
 import servicePackageQuestion from "./service-package-question/service-package-question";
-import textBlock from "@/common-components/text-block/text-block";
+import textBlock from "@/digital-components/text-block/text-block";
-import modal from "@/common-components/modal/modal";
+import modal from "@/digital-components/modal/modal";
-import loadingModal from "@/common-components/loading-modal/loading-modal.vue";
+import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import baseMixin from "@/mixins/base-mixin.js";
 import vehicleQuestionsMixin from "../../mixins/vehicle-questions-mixin";
 import { settleAllPromises } from "@/helpers/layout-helper";

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

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import buttonQuestion from "@/common-components/button-question/button-question";
+import buttonQuestion from "@/digital-components/button-question/button-question";
 import baseMixin from "@/mixins/base-mixin.js";
 import { processIfStatements } from "@/helpers/cms-content-helper";
 import { damageLocationsSelected as glassLocations } from "@/constants/damage-locations-selected";

src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue

@@ -30,10 +30,10 @@
                                 <span v-else>
                                     <textLink
                                         linkType="text"
-                                        :text="getLinkDisplayTextFromCopy(copy)"
+                                        :text="getRouterLinkDisplayTextFromCopy(copy)"
                                         href="#!"
                                         data-bs-toggle="modal"
-                                        :data-bs-target="'#' + getLinkTargetFromCopy(copy)"
+                                        :data-bs-target="'#' + getRouterLinkRouteFromCopy(copy)"
                                         aria-label="Modal window" />
                                 </span>
                             </template>
@@ -51,12 +51,12 @@
 </template>
 
 <script>
-import baseInputButton from "@/common-components/base-input-button/base-input-button";
+import baseInputButton from "@/digital-components/base-input-button/base-input-button";
 import textLink from "@/ux-components/text-link/text-link";
 import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
 import {
-    getLinkDisplayTextFromCopy,
+    getRouterLinkDisplayTextFromCopy,
-    getLinkTargetFromCopy,
+    getRouterLinkRouteFromCopy,
     splitCopyOnCMSPlaceHolder,
     doesCopyContainTextLink,
 } from "@/helpers/cms-content-helper";
@@ -74,8 +74,8 @@ export default {
         },
     },
     methods: {
-        getLinkDisplayTextFromCopy,
+        getRouterLinkDisplayTextFromCopy,
-        getLinkTargetFromCopy,
+        getRouterLinkRouteFromCopy,
         splitCopyOnCMSPlaceHolder,
         doesCopyContainTextLink,
         stripUlTagFromCopy(copy) {
@@ -229,6 +229,11 @@ export default {
                 li {
                     margin-bottom: 0.5rem;
                     font-size: 0.875rem;
+                    line-height: 1.714;
+                    a {
+                        line-height: 1.714;
+                        padding: 0;
+                    }
                 }
             }
 

src/layouts/reveal/reveal.vue

@@ -11,8 +11,8 @@
 
 <script>
 // Components
-import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
 
 // Supporting Files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";

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

@@ -1,3 +1,4 @@
+fmg
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <div class="page-container-grouped-styles">
@@ -14,9 +15,9 @@
 
 <script>
 // Components
-import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
-import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import { Form } from "vee-validate";
 
 // Supporting files

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

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import buttonQuestion from "@/common-components/button-question/button-question";
+import buttonQuestion from "@/digital-components/button-question/button-question";
 import store from "@/store";
 import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";

src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import buttonQuestion from "@/common-components/button-question/button-question";
+import buttonQuestion from "@/digital-components/button-question/button-question";
 import store from "@/store";
 
 export default {

src/layouts/vehicle-damage/side-door-options/side-door-options.vue

@@ -40,8 +40,8 @@
 </template>
 
 <script>
-import buttonQuestion from "@/common-components/button-question/button-question";
+import buttonQuestion from "@/digital-components/button-question/button-question";
-import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import replaceOptionsQuestion from "../replace-options-question/replace-options-question";
 import store from "@/store";
 import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";

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

@@ -1,3 +1,4 @@
+fmg
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <div class="page-container-grouped-styles">
@@ -58,10 +59,10 @@
 
 <script>
 // Components
-import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
-import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
-import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options";
 import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
 import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";

src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import buttonQuestion from "@/common-components/button-question/button-question";
+import buttonQuestion from "@/digital-components/button-question/button-question";
 
 export default {
     name: "windshieldOptions",

src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import buttonQuestion from "@/common-components/button-question/button-question";
+import buttonQuestion from "@/digital-components/button-question/button-question";
 
 export default {
     name: "windshieldDamageTypeQuestion",

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

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import buttonQuestion from "@/common-components/button-question/button-question";
+import buttonQuestion from "@/digital-components/button-question/button-question";
 // Supporting files
 import store from "@/store";
 import { storeActions } from "@/constants/store-actions.js";

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

@@ -7,7 +7,8 @@
                 <funnelSubHeader
                     cmsWidgetName="FunnelSubHeaderWidget"
                     :hasBackButton="true"
-                    @click-event="backButtonAction" />
+                    @click-event="backButtonAction"
+                    headerColor="light-header" />
                 <div class="fade-on-route-transition">
                     <makeQuestion
                         v-model="selectedMake"
@@ -22,9 +23,9 @@
 <script>
 // Components
 import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
-import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
-import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";

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

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import buttonQuestion from "@/common-components/button-question/button-question";
+import buttonQuestion from "@/digital-components/button-question/button-question";
 // Supporting files
 import store from "@/store";
 import { storeActions } from "@/constants/store-actions.js";

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

@@ -7,7 +7,8 @@
                 <funnelSubHeader
                     cmsWidgetName="FunnelSubHeaderWidget"
                     :hasBackButton="true"
-                    @click-event="backButtonAction" />
+                    @click-event="backButtonAction"
+                    headerColor="light-header" />
                 <div class="fade-on-route-transition">
                     <modelQuestion
                         v-model="selectedModel"
@@ -22,9 +23,9 @@
 <script>
 // Components
 import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
-import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
-import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { storeMutations } from "@/constants/store-mutations";

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

@@ -37,7 +37,7 @@
 
 <script>
 // Components
-import buttonQuestion from "@/common-components/button-question/button-question";
+import buttonQuestion from "@/digital-components/button-question/button-question";
 
 // Supporting files
 import { getTintImage } from "@/constants/tint-mapper";

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

@@ -45,12 +45,12 @@
 <script>
 // Components
 import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass-part-question";
-import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
-import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
-import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
 import alert from "@/ux-components/alert/alert";
-import loadingModal from "@/common-components/loading-modal/loading-modal.vue";
+import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 // Supporting Files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";

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

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import buttonQuestion from "@/common-components/button-question/button-question";
+import buttonQuestion from "@/digital-components/button-question/button-question";
 // Supporting files
 import store from "@/store";
 import { storeActions } from "@/constants/store-actions.js";

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

@@ -7,7 +7,8 @@
                 <funnelSubHeader
                     cmsWidgetName="FunnelSubHeaderWidget"
                     :hasBackButton="true"
-                    @click-event="backButtonAction" />
+                    @click-event="backButtonAction"
+                    headerColor="light-header" />
                 <div class="fade-on-route-transition">
                     <styleQuestion
                         v-model="selectedStyle"
@@ -23,9 +24,9 @@
 // Components
 import baseMixin from "@/mixins/base-mixin.js";
 import styleQuestion from "@/layouts/vehicle-style/style-question/style-question";
-import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
-import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";

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

@@ -4,7 +4,7 @@
         <div class="select-car">
             <div class="select-car-form rounded text-center">
                 <vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
-                <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+                <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" headerColor="light-header" />
                 <div class="fade-on-route-transition">
                     <yearQuestion
                         class="fade-on-route-transition"
@@ -20,9 +20,9 @@
 <script>
 // Components
 import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
-import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
-import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";

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

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import buttonQuestion from "@/common-components/button-question/button-question";
+import buttonQuestion from "@/digital-components/button-question/button-question";
 // Supporting files
 import { storeActions } from "@/constants/store-actions.js";
 import baseMixin from "@/mixins/base-mixin.js";

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

@@ -1,3 +1,4 @@
+fmg
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <div class="page-container-grouped-styles">
@@ -109,15 +110,15 @@
 
 <script>
 // Components
-import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
-import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
-import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import alert from "@/ux-components/alert/alert";
-import textboxQuestion from "@/common-components/textbox-question/textbox-question";
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
 import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
-import textBlock from "@/common-components/text-block/text-block";
+import textBlock from "@/digital-components/text-block/text-block";
-import loadingModal from "@/common-components/loading-modal/loading-modal.vue";
+import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";

src/mixins/input-button-wrapper-mixin.js

@@ -1,4 +1,4 @@
-import { inputButtonProps } from "@/common-components/base-input-button/button-functionality-props";
+import { inputButtonProps } from "@/digital-components/base-input-button/button-functionality-props";
 
 export default {
     model: {

src/mixins/input-button-wrapper-mixin.spec.js

@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import baseInputButton from "@/common-components/base-input-button/base-input-button";
+import baseInputButton from "@/digital-components/base-input-button/base-input-button";
 import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
 import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 import listButton from "@/ux-components/list-button/list-button";

src/router/index.js

@@ -30,7 +30,7 @@ import { applicationConfig } from "../constants/application-config";
 
 // Components
 import quote from "@/layouts/quote/quote.vue";
-import datePicker from "@/common-components/date-picker/date-picker.vue";
+import datePicker from "@/digital-components/date-picker/date-picker.vue";
 
 const routes = [
     {

src/ux-components/alert/alert.spec.js

@@ -41,7 +41,7 @@ describe("alert.vue", () => {
         expect(wrapperDiv.classes()).toContain("warning");
     });
 
-    it("Should update alert Headline to manualHeadline datam entered and alert copy to manualCopy datam entered when no cmsWidgetName entered", async () => {
+    it("Should update alert Headline to manualHeadline datam entered and alert copy to manualCopy datam entered when no cmsWidgetName entered.", async () => {
         // Arrange
         const wrapper = shallowMount(alert, setupMocks({}));
         // Assert

src/ux-components/alert/alert.vue

@@ -19,10 +19,10 @@
                     <span v-else>
                         <router-link
                             :to="{
-                                query: { fmgPage: `${getLinkTargetFromCopy(copy)}` },
+                                query: { [pageQueryString]: `${getRouterLinkRouteFromCopy(copy)}` },
                                 name: 'root',
                             }"
-                            >{{ getLinkDisplayTextFromCopy(copy) }}</router-link
+                            >{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link
                         >
                     </span>
                 </template>
@@ -41,10 +41,11 @@
 import {
     doesCopyContainRouterLink,
     splitCopyOnCMSPlaceHolder,
-    getLinkTargetFromCopy,
+    getRouterLinkRouteFromCopy,
-    getLinkDisplayTextFromCopy,
+    getRouterLinkDisplayTextFromCopy,
     splitCMSCopyOnParagraphTag,
 } from "@/helpers/cms-content-helper";
+import { applicationConfig } from "@/constants/application-config";
 
 export default {
     name: "alert",
@@ -75,6 +76,9 @@ export default {
         },
     },
     computed: {
+        pageQueryString() {
+            return applicationConfig.PAGE_QUERYSTRING;
+        },
         alertHeadline() {
             return this.manualHeadline
                 ? this.manualHeadline
@@ -92,8 +96,8 @@ export default {
     methods: {
         doesCopyContainRouterLink,
         splitCopyOnCMSPlaceHolder,
-        getLinkTargetFromCopy,
+        getRouterLinkRouteFromCopy,
-        getLinkDisplayTextFromCopy,
+        getRouterLinkDisplayTextFromCopy,
         ensureAlertIsInViewPort() {
             if (this.shouldScrollToOnMount && this.$el.style.display != "none") {
                 var footerHeight = this.getFooterInfoBoxHeight();

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import baseInputButton from "@/common-components/base-input-button/base-input-button";
+import baseInputButton from "@/digital-components/base-input-button/base-input-button";
 import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
 
 export default {

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

@@ -24,7 +24,7 @@
 
 <script>
 import loader from "@/ux-components/loader/loader";
-import baseInputButton from "@/common-components/base-input-button/base-input-button";
+import baseInputButton from "@/digital-components/base-input-button/base-input-button";
 import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
 
 export default {

src/ux-components/list-card/list-card.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script>
-import baseInputButton from "@/common-components/base-input-button/base-input-button";
+import baseInputButton from "@/digital-components/base-input-button/base-input-button";
 import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
 
 export default {

src/ux-components/radio/radio.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import baseInputButton from "@/common-components/base-input-button/base-input-button";
+import baseInputButton from "@/digital-components/base-input-button/base-input-button";
 import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
 
 export default {

src/ux-components/text-link/text-link.vue

@@ -44,10 +44,9 @@ export default {
 
 <style lang="scss">
 a {
-    display: inline-flex !important;
     color: $blue;
-    text-underline-offset: 0.5em;
+    text-underline-offset: 4px; //Per Devyn. This can't be documented in Figma so there is a comment with the Prototype mocks on the Quote page in Figma
-    line-height: 26px;
+    line-height: 2;
     padding: 0 0 4px 0;
     font-weight: 500;
     max-width: fit-content;