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

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

Browse source
This commit is contained in:
Matt Sykes 2023-01-30 10:18:18 -05:00
commit a877ccf093
79 changed files with 314 additions and 313 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/constants/application-config.js
View file

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

0
src/common-components/base-input-button/base-input-button.spec.js → src/digital-components/base-input-button/base-input-button.spec.js
View file

2
src/common-components/base-input-button/base-input-button.vue → src/digital-components/base-input-button/base-input-button.vue
View file

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

9
src/common-components/base-input-button/button-functionality-props.js → src/digital-components/base-input-button/button-functionality-props.js
View file

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

2
src/common-components/button-question/button-question.spec.js → src/digital-components/button-question/button-question.spec.js
View file

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

8
src/common-components/button-question/button-question.vue → src/digital-components/button-question/button-question.vue
View file

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

0
src/common-components/date-picker/date-picker-spec.js1 → src/digital-components/date-picker/date-picker-spec.js1
View file

0
src/common-components/date-picker/date-picker.vue → src/digital-components/date-picker/date-picker.vue
View file

0
src/common-components/dropdown-question/dropdown-question.spec.js → src/digital-components/dropdown-question/dropdown-question.spec.js
View file

15
src/common-components/dropdown-question/dropdown-question.vue → src/digital-components/dropdown-question/dropdown-question.vue
View file

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

0
src/common-components/modal/modal.spec.js → src/digital-components/modal/modal.spec.js
View file

0
src/common-components/modal/modal.vue → src/digital-components/modal/modal.vue
View file

2
src/common-components/question-chain/question-chain.spec.js → src/digital-components/question-chain/question-chain.spec.js
View file

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

4
src/common-components/question-chain/question-chain.vue → src/digital-components/question-chain/question-chain.vue
View file

@ -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"
*/

0
src/common-components/text-block/text-block.spec.js → src/digital-components/text-block/text-block.spec.js
View file

2
src/common-components/text-block/text-block.vue → src/digital-components/text-block/text-block.vue
View file

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

0
src/common-components/textbox-question/textbox-question.spec.js → src/digital-components/textbox-question/textbox-question.spec.js
View file

4
src/common-components/textbox-question/textbox-question.vue → src/digital-components/textbox-question/textbox-question.vue
View file

@ -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">
<span class="d-inline-flex mt-0" role="alert">{{ errorMessage }}</span>
<div v-show="errorMessage" class="row my-1 form-test-error">
<span class="d-inline-flex small mt-0" role="alert">{{ errorMessage }}</span>
</div>
</div>
</template>

0
src/common-components/funnel-footer/funnel-footer.spec.js → src/fmg-components/funnel-footer/funnel-footer.spec.js
View file

0
src/common-components/funnel-footer/funnel-footer.vue → src/fmg-components/funnel-footer/funnel-footer.vue
View file

0
src/common-components/funnel-header/funnel-header.spec.js → src/fmg-components/funnel-header/funnel-header.spec.js
View file

2
src/common-components/funnel-header/funnel-header.vue → src/fmg-components/funnel-header/funnel-header.vue
View file

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

0
src/common-components/funnel-header/menu-modal/menu-modal.spec.js → src/fmg-components/funnel-header/menu-modal/menu-modal.spec.js
View file

0
src/common-components/funnel-header/menu-modal/menu-modal.vue → src/fmg-components/funnel-header/menu-modal/menu-modal.vue
View file

0
src/common-components/funnel-sub-header/button-back/button-back.spec.js → src/fmg-components/funnel-sub-header/button-back/button-back.spec.js
View file

0
src/common-components/funnel-sub-header/button-back/button-back.vue → src/fmg-components/funnel-sub-header/button-back/button-back.vue
View file

0
src/common-components/funnel-sub-header/funnel-sub-header.spec.js → src/fmg-components/funnel-sub-header/funnel-sub-header.spec.js
View file

19
src/common-components/funnel-sub-header/funnel-sub-header.vue → src/fmg-components/funnel-sub-header/funnel-sub-header.vue
View file

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

2
src/common-components/layouts/questions-page-layout/questions-page-layout.spec.js → src/fmg-components/layouts/questions-page-layout/questions-page-layout.spec.js
View file

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

12
src/common-components/layouts/questions-page-layout/questions-page-layout.vue → src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
View file

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

0
src/common-components/loading-modal/loading-modal.spec.js → src/fmg-components/loading-modal/loading-modal.spec.js
View file

0
src/common-components/loading-modal/loading-modal.vue → src/fmg-components/loading-modal/loading-modal.vue
View file

0
src/common-components/vehicle-banner/vehicle-banner.spec.js → src/fmg-components/vehicle-banner/vehicle-banner.spec.js
View file

0
src/common-components/vehicle-banner/vehicle-banner.vue → src/fmg-components/vehicle-banner/vehicle-banner.vue
View file

4
src/helpers/cms-content-helper.js
View file

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

10
src/layouts/address-lookup/address-lookup.vue
View file

@ -81,13 +81,13 @@
<script>
// Components
import funnelHeader from "@/common-components/funnel-header/funnel-header";
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
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";

166
src/layouts/address-lookup/customer-questions/address-questions/address-questions.spec.js
View file

@ -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 () {
expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
expect(noMatchAlert.exists()).toBeFalsy();
});
let 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 () {
expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
expect(noMatchAlert.exists()).toBeFalsy();
});
let 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 () {
expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
expect(noMatchAlert.exists()).toBeFalsy();
});
let 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 () {
expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
expect(noMatchAlert.exists()).toBeFalsy();
});
let 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");

110
src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
View file

@ -71,13 +71,14 @@
</template>
<script>
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
import textboxQuestion from "@/digital-components/textbox-question/textbox-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 === "Tab") {
self.matchingIndirectly = true;
if (e.code === "Enter" || e.code === "NumpadEnter") {
const selectedItem = document.querySelector(
".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
// using either the down / up arrows or the address the user was hovering over when they pressed "Enter."
// If a match has been previously found then do nothing
// OR
// If the user pressed "Enter" then do nothing
if (self.matchFound || self.enterPressed) {
// If a match has been previously attempted then do nothing
if (self.matchFound !== null) {
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");
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;
}
fillInAddressUsingFirstItem();
}
});
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
this.isAddressWatchActive = true;
});
// Only deep watch the Address Model after a failed match
this.unwatchAddress = this.$watch(
"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,

4
src/layouts/address-lookup/customer-questions/customer-questions.vue
View file

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

2
src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue
View file

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

22
src/layouts/address-vehicles/address-vehicles.vue
View file

@ -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 funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
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,
getLinkDisplayTextFromCopy,
getRouterLinkRouteFromCopy,
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,
getLinkDisplayTextFromCopy,
getRouterLinkRouteFromCopy,
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;
}
}

2
src/layouts/capability-questions/capability-questions.vue
View file

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

21
src/layouts/estimate/estimate.vue
View file

@ -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 funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import buttonQuestion from "@/common-components/button-question/button-question";
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
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 textBlock from "@/common-components/text-block/text-block";
import loadingModal from "@/common-components/loading-modal/loading-modal.vue";
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
import textBlock from "@/digital-components/text-block/text-block";
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>

12
src/layouts/license-plate-lookup/license-plate-lookup.vue
View file

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

2
src/layouts/molding-questions/molding-questions.vue
View file

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

2
src/layouts/part-questions/part-questions.vue
View file

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

2
src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue
View file

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

24
src/layouts/quote/quote.vue
View file

@ -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 funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
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 modal from "@/common-components/modal/modal";
import loadingModal from "@/common-components/loading-modal/loading-modal.vue";
import textBlock from "@/digital-components/text-block/text-block";
import modal from "@/digital-components/modal/modal";
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";

2
src/layouts/quote/service-package-question/service-package-question.vue
View file

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

19
src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
View file

@ -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,
getLinkTargetFromCopy,
getRouterLinkDisplayTextFromCopy,
getRouterLinkRouteFromCopy,
splitCopyOnCMSPlaceHolder,
doesCopyContainTextLink,
} from "@/helpers/cms-content-helper";
@ -74,8 +74,8 @@ export default {
},
},
methods: {
getLinkDisplayTextFromCopy,
getLinkTargetFromCopy,
getRouterLinkDisplayTextFromCopy,
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;
}
}
}

4
src/layouts/reveal/reveal.vue
View file

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

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

@ -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 funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import { Form } from "vee-validate";
// Supporting files

2
src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
View file

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

2
src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
View file

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

4
src/layouts/vehicle-damage/side-door-options/side-door-options.vue
View file

@ -40,8 +40,8 @@
</template>
<script>
import buttonQuestion from "@/common-components/button-question/button-question";
import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
import buttonQuestion from "@/digital-components/button-question/button-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";

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

@ -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 funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
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";

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

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

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

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

2
src/layouts/vehicle-make/make-question/make-question.vue
View file

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

9
src/layouts/vehicle-make/vehicle-make.vue
View file

@ -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 vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
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";

2
src/layouts/vehicle-model/model-question/model-question.vue
View file

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

9
src/layouts/vehicle-model/vehicle-model.vue
View file

@ -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 funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { storeMutations } from "@/constants/store-mutations";

2
src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
View file

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

10
src/layouts/vehicle-parts/vehicle-parts.vue
View file

@ -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 vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
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";

2
src/layouts/vehicle-style/style-question/style-question.vue
View file

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

9
src/layouts/vehicle-style/vehicle-style.vue
View file

@ -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 funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";

8
src/layouts/vehicle-year/vehicle-year.vue
View file

@ -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 vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";

2
src/layouts/vehicle-year/year-question/year-question.vue
View file

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

15
src/layouts/vin-lookup/vin-lookup.vue
View file

@ -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 funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
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 loadingModal from "@/common-components/loading-modal/loading-modal.vue";
import textBlock from "@/digital-components/text-block/text-block";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";

2
src/mixins/input-button-wrapper-mixin.js
View file

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

2
src/mixins/input-button-wrapper-mixin.spec.js
View file

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

2
src/router/index.js
View file

@ -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 = [
{

2
src/ux-components/alert/alert.spec.js
View file

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

16
src/ux-components/alert/alert.vue
View file

@ -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,
getLinkDisplayTextFromCopy,
getRouterLinkRouteFromCopy,
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,
getLinkDisplayTextFromCopy,
getRouterLinkRouteFromCopy,
getRouterLinkDisplayTextFromCopy,
ensureAlertIsInViewPort() {
if (this.shouldScrollToOnMount && this.$el.style.display != "none") {
var footerHeight = this.getFooterInfoBoxHeight();

2
src/ux-components/list-button-horizontal/list-button-horizontal.vue
View file

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

2
src/ux-components/list-button/list-button.vue
View file

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

2
src/ux-components/list-card/list-card.vue
View file

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

2
src/ux-components/radio/radio.vue
View file

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

5
src/ux-components/text-link/text-link.vue
View file

@ -44,10 +44,9 @@ export default {
<style lang="scss">
a {
display: inline-flex !important;
color: $blue;
text-underline-offset: 0.5em;
line-height: 26px;
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: 2;
padding: 0 0 4px 0;
font-weight: 500;
max-width: fit-content;