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

Merge branch 'develop' into feature/digital/SSR-178

Browse source
This commit is contained in:
Kroell 2023-01-04 10:09:00 -05:00
commit 8c5114e536
16 changed files with 691 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/common-components/site-sub-header/site-sub-header.vue
View file

@ -1,7 +1,7 @@
<template>
<div>
<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-0 subheader-primary" :class="headerColor">
<span>
{{ content }}
</span>
@ -13,7 +13,7 @@
</h5>
</div>
<div 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 mb-0 subheader-secondary">
<span>
{{ subText }}
</span>

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

@ -7,6 +7,7 @@ const applicationConfig = {
APPLICATION_NAME: "SelfService",
SITE_ENTRY_TRIGGER_VALUE: "SelfService",
APPLICATION_ABBREVIATION: "iss",
PAGE_QUERYSTRING: 'issPage',
};
export { applicationConfig };

8
src/constants/damage-custom-labels.js Normal file
View file

@ -0,0 +1,8 @@
const damageCustomLabels = Object.freeze({
MATCH: 'match',
REAR_WINDOW: 'rear window',
SIDE_WINDOW: 'side window',
WINDSHIELD: 'windshield',
});
export default damageCustomLabels;

4
src/constants/endpoints.js
View file

@ -55,6 +55,10 @@ const endpoints = {
url: "/analytics/api/v1/analytics/log-custom-event",
method: "POST",
},
LookupVehicleByVin: {
url: "/vehicle/api/v1/vehicle/lookup",
method: "POST",
},
InitializeSession: {
url: "/analytics/api/v1/analytics/initialize",
method: "POST",

6
src/constants/vehicle-lookup-alert-types.js Normal file
View file

@ -0,0 +1,6 @@
const vehicleLookupAlertTypes = Object.freeze({
NOT_FOUND: 'notFound',
NOT_MATCHED: 'notMatched',
});
export default vehicleLookupAlertTypes;

89
src/helpers/damage-helper.js Normal file
View file

@ -0,0 +1,89 @@
import damageCustomLabels from '@/constants/damage-custom-labels';
import { damageLocationsSelected } from '@/constants/damage-locations-selected';
import { useMainStore } from '@/store';
export function getDamageString() {
const mainStore = useMainStore();
// If it's a repair it's always a windshield.
const { isRepair } = mainStore.damage;
if (isRepair) {
return damageCustomLabels.WINDSHIELD;
}
const damageLocations = mainStore.damage.glassToReplace;
if (!damageLocations || !Array.isArray(damageLocations)) {
return '';
}
if (damageLocations.length > 1) {
return damageCustomLabels.MATCH;
}
const { glassLocation } = damageLocations[0];
if (glassLocation) {
switch (glassLocation) {
case damageLocationsSelected.WINDSHIELD:
return damageCustomLabels.WINDSHIELD;
case damageLocationsSelected.DRIVER:
case damageLocationsSelected.PASSENGER:
return damageCustomLabels.SIDE_WINDOW;
case damageLocationsSelected.REAR:
return damageCustomLabels.REAR_WINDOW;
default:
return '';
}
}
// No condition is matched
return '';
}
/**
* Commented code are copied directly from DigitalConsumer.FixMyGlass
* and have not been adjusted for ISS.
*/
// import store from "@/store";
// import baseMixin from "@/mixins/base-mixin.js";
// import { storeActions } from "@/constants/store-actions";
// export function getIsWindshieldOnly() {
// const damageLocations = store.getters.damage.glassToReplace;
// const returnString =
// damageLocations &&
// damageLocations.length === 1 &&
// damageLocations[0]?.glassLocation === "Windshield"
// ? "windshield"
// : "glass";
// return returnString;
// }
// export async function isGlassAvailableForCarId(carId) {
// const newGlassOptions = await baseMixin.methods.dispatchStoreAction(
// storeActions.GET_DAMAGE_OPTIONS,
// { carId: carId }
// );
// const currentGlassOptions = store.getters.damage.glassToReplace;
// const optionsMap = {
// Windshield: "windshieldOptions",
// Driver: "driverSideOptions",
// Passenger: "passengerSideOptions",
// Rear: "backGlassOptions",
// };
// for (const option of currentGlassOptions) {
// if (
// !newGlassOptions.data[
// optionsMap[option.glassLocation]
// ].availableReplacementOptions.includes(option.glassName)
// ) {
// return false;
// }
// }
// return true;
// }

113
src/layouts/vin-lookup/vin-location-information/vin-location-information.vue Normal file
View file

@ -0,0 +1,113 @@
<template>
<div class="vin-location-information">
<div
class="vin-toggle mt-2"
:class="[isVinLocationDetailVisible ? 'active' : '']"
@click="handleClickToggle"
>
<TextLink
link-type="text"
href="#!"
:text="textForToggle"
/>
</div>
<Transition>
<div
v-show="isVinLocationDetailVisible"
id="vin-location-detail-wrapper"
class="mt-2"
>
<div
v-html="vinLocationDetailContent"
id="vin-location-detail-content"
class="mb-2"
/>
<img
:src="vinLocationDetailImage"
alt="VIN Locations"
>
</div>
</Transition>
</div>
</template>
<script>
import TextLink from '@/ux-components/text-link/text-link.vue';
export default {
name: 'vin-location-information',
components: {
TextLink,
},
data() {
return {
isVinLocationDetailVisible: false,
};
},
computed: {
textForToggle() {
return this.getCmsContent('WhereCanIFindMyVINToggle', 'HeaderText');
},
vinLocationDetailContent() {
return this.getCmsContent('WhereCanIFindMyVINToggle', 'BodyText');
},
vinLocationDetailImage() {
return this.getCmsContent('WhereCanIFindMyVINToggle', 'Image');
},
},
methods: {
handleClickToggle() {
this.isVinLocationDetailVisible = !this.isVinLocationDetailVisible;
},
},
};
</script>
<style lang="scss">
.vin-location-information {
.vin-toggle {
&::after {
content: "";
transition: all 0.5s ease;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
background-repeat: no-repeat;
margin-left: 0.5rem;
width: 16px;
height: 9px;
display: inline-block;
}
&.active::after {
transform: rotate(180deg);
}
a {
font-size: 0.875rem;
}
}
}
#vin-location-detail-wrapper {
// START - Vue Transition
&.v-enter-active,
&.v-leave-active {
transition: opacity 250ms ease-in;
}
&.v-enter-from,
&.v-leave-to {
opacity: 0;
}
// END - Vue Transition
img {
width: 100%;
}
}
#vin-location-detail-content {
font-size: 0.875rem;
p {
font-size: 0.875rem;
margin-bottom: 0;
}
ol {
margin-top: 0.5rem;
margin-bottom: 0;
}
}
</style>

25
src/layouts/vin-lookup/vin-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue Normal file
View file

@ -0,0 +1,25 @@
<template>
<Alert
alert-class="alert-danger"
cms-widget-name="AlertVinNotFoundWidget"
id="vehicle-not-found-alert"
/>
</template>
<script>
import Alert from '@/ux-components/alert/alert.vue';
export default {
name: 'vehicle-not-found-alert',
components: {
Alert,
},
};
</script>
<style>
/**
Override wrong margin-bottom rule in the Alert component.
*/
#vehicle-not-found-alert p:last-of-type {
margin-bottom: 0 !important;
}
</style>

48
src/layouts/vin-lookup/vin-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue Normal file
View file

@ -0,0 +1,48 @@
<template>
<Alert
alert-class="alert-warning"
cms-widget-name="AlertMatchedDifferentVehicleWidget"
:manual-copy="body"
:manual-headline="header"
/>
</template>
<script>
import { getDamageString } from '@/helpers/damage-helper';
import Alert from '@/ux-components/alert/alert.vue';
export default {
name: 'vehicle-not-matched-alert',
components: {
Alert,
},
inject: ['vehicleFromLookup'],
computed: {
header() {
return (
this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'HeadlineText')
.replaceAll('{custom:damage}', getDamageString())
);
},
body() {
let year = '';
let make = '';
let model = '';
if (this.vehicleFromLookup) {
year = this.vehicleFromLookup.year;
make = this.vehicleFromLookup.make;
model = this.vehicleFromLookup.model;
}
return (
this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'BodyText')
.replaceAll('{custom:damage}', getDamageString())
.replaceAll('{custom:vinlookupYear}', year)
.replaceAll('{custom:vinlookupMake}', make)
.replaceAll('{custom:vinlookupModel}', model)
);
},
},
};
</script>

49
src/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue Normal file
View file

@ -0,0 +1,49 @@
<template>
<div
id="vin-lookup-alerts-wrapper"
:class="wrapperCssClass"
>
<VehicleNotFoundAlert
v-if="isVehicleNotFoundVisible"
/>
<VehicleNotMatchedAlert
v-else-if="isVehicleNotMatchedVisible"
/>
</div>
</template>
<script>
import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
import VehicleNotFoundAlert from './vehicle-not-found-alert/vehicle-not-found-alert.vue';
import VehicleNotMatchedAlert from './vehicle-not-matched-alert/vehicle-not-matched-alert.vue';
export default {
name: 'vin-lookup-alerts',
components: {
VehicleNotFoundAlert,
VehicleNotMatchedAlert,
},
props: {
activeAlertType: {
type: String,
validator(value) {
const acceptedValues = [null];
acceptedValues.push(...Object.values(vehicleLookupAlertTypes));
return acceptedValues.includes(value);
},
},
},
computed: {
isVehicleNotFoundVisible() {
return this.activeAlertType === vehicleLookupAlertTypes.NOT_FOUND;
},
isVehicleNotMatchedVisible() {
return this.activeAlertType === vehicleLookupAlertTypes.NOT_MATCHED;
},
wrapperCssClass() {
return {
'mb-5': this.activeAlertType !== null,
};
},
},
};
</script>

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

@ -1,5 +1,9 @@
<template>
<VeeValidateForm @submit="onSubmit" @invalid-submit="onInvalidSubmit">
<template>
<VeeValidateForm
@submit="onSubmit"
@invalid-submit="onInvalidSubmit"
v-slot="{ meta }"
>
<div class="page-container-grouped-styles overflow-auto">
<SiteHeader
cms-widget-name="SiteHeaderWidget"
@ -11,13 +15,23 @@
<SiteSubHeader
cms-widget-name="SiteSubHeaderWidget"
/>
<div class="fade-on-route-transition sub-container make-tall">
<p>VIN Lookup Page Placeholder</p>
<div class="fade-on-route-transition sub-container make-tall mt-5">
<VinLookupAlerts
:active-alert-type="activeVehicleLookupAlertType"
/>
<VinQuestion
v-model="vin"
/>
<VinLocationInformation />
<SiteFooter
cms-widget-name="SiteFooterWidget"
:is-forward-action-disabled="isForwardActionDisabled"
:is-forward-action-disabled="!meta.valid"
@back-clicked="backButtonAction"
@forward-clicked="forwardButtonAction"
ref="siteFooter"
/>
</div>
</div>
@ -25,29 +39,54 @@
</template>
<script>
// Import Supporting Files
import { computed } from 'vue';
import { endpoints } from '@/constants/endpoints';
import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
import globalMethods from '@/global-methods';
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import { settleAllPromises } from '@/helpers/layout-helper';
import { Form } from 'vee-validate';
import BaseFormMixin from '@/mixins/base-form-mixin.js';
import { useMainStore } from '@/store';
// Import Component
import BaseFormMixin from '@/mixins/base-form-mixin';
import { Form } from 'vee-validate';
import SiteFooter from '@/common-components/site-footer/site-footer.vue';
import SiteHeader from '@/common-components/site-header/site-header.vue';
import SiteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
import VehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
import VinLocationInformation from './vin-location-information/vin-location-information.vue';
import VinLookupAlerts from './vin-lookup-alerts/vin-lookup-alerts.vue';
import VinQuestion from './vin-question/vin-question.vue';
export default {
name: 'vin-lookup',
mixins: [BaseFormMixin],
components: {
VeeValidateForm: Form,
SiteFooter,
SiteHeader,
SiteSubHeader,
VehicleBanner,
VeeValidateForm: Form,
VehicleBanner,
VinLocationInformation,
VinLookupAlerts,
VinQuestion,
},
setup() {
const mainStore = useMainStore();
return { mainStore };
},
data() {
return {};
return {
activeVehicleLookupAlertType: null,
vehicleFromLookup: null,
vin: null,
};
},
provide() {
return {
vehicleFromLookup: computed(() => this.vehicleFromLookup),
};
},
async beforeRouteEnter(to, from, next) {
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
@ -63,16 +102,11 @@ export default {
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.setCmsContent(resultMap.cmsContent);
});
},
computed: {
isForwardActionDisabled() {
return true;
}
},
methods: {
arePagePrerequisiteValid() {
arePagePrerequisiteValid() {
return true;
},
backButtonAction() {
@ -81,8 +115,55 @@ export default {
*/
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
forwardButtonAction() {
return true;
async forwardButtonAction() {
this.resetActiveAlert();
// NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin);
if (vehicleLookupResponse.error) {
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
this.resetVehicleFromLookup();
this.$refs.siteFooter.removeLoader();
return;
}
this.vehicleFromLookup = vehicleLookupResponse.data;
if (this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId) {
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
const vehicleYearMakeModel = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModel}`);
this.$refs.siteFooter.removeLoader();
}
// Continue
},
async lookupVehicleByVin(vin) {
try {
const response = await globalMethods.callHttpClient({
method: endpoints.LookupVehicleByVin.method,
endpoint: endpoints.LookupVehicleByVin.url,
payload: {
vin,
},
});
return response;
} catch (responseError) {
return {
error: {
status: responseError.status,
},
};
}
},
resetActiveAlert() {
this.activeVehicleLookupAlertType = null;
},
resetVehicleFromLookup() {
this.vehicleFromLookup = null;
},
resetDependentState() {},
},

44
src/layouts/vin-lookup/vin-question/vin-question.vue Normal file
View file

@ -0,0 +1,44 @@
<template>
<TextboxQuestion
v-model="vin"
cms-widget-name="VinNumberQuestionWidget"
disable-auto-fill
input-id="vin-question"
is-required
max-length="17"
validation-rules="vin-required|vin-format"
/>
</template>
<script>
// Import Other Supporting File(s)
import { defineRule } from 'vee-validate';
import { regex, required } from '@/helpers/validation-rules';
import { errorMessages } from '@/constants/error-messages';
// Import Component(s)
import TextboxQuestion from '@/common-components/textbox-question/textbox-question.vue';
defineRule('vin-required', required(errorMessages.VIN_REQUIRED));
defineRule('vin-format', regex(/^[a-hA-Hj-nJ-NpPr-zR-Z0-9]{17}$/, errorMessages.VIN_FORMAT));
export default {
name: 'vin-question',
props: {
modelValue: String,
},
emits: ['update:modelValue'],
components: {
TextboxQuestion,
},
computed: {
vin: {
get() {
return this.modelValue;
},
set(newValue) {
this.$emit('update:modelValue', newValue);
},
},
},
};
</script>

206
src/layouts/welcome-page/welcome-page.vue
View file

@ -1,35 +1,89 @@
<template>
<div class="page-container-grouped-styles">
<div class="fade-on-route-transition">
<siteHeader cmsWidgetName="Header"/>
<siteSubHeader cmsWidgetName="SubHeader"/>
<div class="row mt-2">
<textboxQuestion
type="date"
cmsWidgetName="dmgDate"
v-model="test"
inputId="dmgDate"
isRequired
disableAutoFill
:max="new Date().toJSON().slice(0,10)"
:min="'1972-12-01'"
/>
</div>
<div class="row mt-2 mb-4">
<div class="col">
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="page-container-grouped-styles">
<div class="fade-on-route-transition">
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
<div class="row mt-2 mb-4">
<textboxQuestion
id="damageCauseField"
id="policyNumberField"
cmsWidgetName="PolicyNumberQuestion"
v-model="policyNumber"
validationRules="policy-number-required" />
</div>
<div class="row mt-2 mb-4">
<textboxQuestion
id="policyZipField"
cmsWidgetName="PolicyZipQuestion"
v-model="policyZip"
validationRules="policy-zip-required" />
</div>
<div class="row mt-2 mb-4">
<textboxQuestion
type="date"
cmsWidgetName="DateOfLossQuestion"
v-model="test"
inputId="dateOfLossField"
isRequired
disableAutoFill
:max="new Date().toJSON().slice(0,10)"
:min="'1972-12-01'"
validationRules="loss-date-required"
/>
</div>
<div class="row mt-2 mb-4">
<dropdownQuestion
cmsWidgetName="DamageCauseQuestion"
v-model="damageCause"
ref="damageCause"
inputId="damageCauseQuestionField"
:options="DamageCauseOptions"
validationRules="loss-cause-required"
placeholderText="Select an option"
includeSelectIcon
disableAutoFill
validationRules="damage-cause-required" />
/>
</div>
<div class="row mt-2 mb-4">
<textboxQuestion
id="damageCityField"
cmsWidgetName="DamageCityQuestion"
v-model="damageCity"
validationRules="loss-city-required" />
</div>
<div class="row mt-2 mb-4">
<dropdownQuestion
cmsWidgetName="DamageStateQuestion"
v-model="state"
ref="state"
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
:options="stateOptions"
validationRules="loss-state-required"
placeholderText="Select an option"
/>
</div>
<div class="row mt-2 mb-4">
<textboxQuestion
id="phoneNumberField"
cmsWidgetName="PhoneNumberQuestion"
v-model="phoneNumber"
validationRules="phone-number-required" />
</div>
<div class="row mt-2 mb-4">
<textboxQuestion
id="emailField"
cmsWidgetName="EmailAddressQuestion"
v-model="email"
validationRules="email-address-required" />
</div>
<div class="row mt-2 mb-4">
<site-footer
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
<buttonQuestionModal cmsWidgetName="DamageCauseQuestion" validationRules="damage-cause-required" />
</div>
</div>
</Form>
</template>
<script>
@ -42,13 +96,25 @@
import { errorMessages } from "@/constants/error-messages";
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
import buttonQuestionModal from "@/common-components/button-question-modal/button-question-modal";
import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
import siteFooter from "@/common-components/site-footer/site-footer";
import BaseFormMixin from '@/mixins/base-form-mixin.js';
//define validation rules
defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
defineRule("damage-cause-required", required(errorMessages.LOSS_CAUSE_REQUIRED));
defineRule("loss-cause-required", required(errorMessages.LOSS_CAUSE_REQUIRED));
defineRule("policy-number-required", required(errorMessages.POLICY_NUMBER_REQUIRED));
defineRule("policy-zip-required", required(errorMessages.POLICY_ZIP_REQUIRED));
defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
defineRule("loss-state-required", required(errorMessages.LOSS_STATE_REQUIRED));
defineRule("loss-city-required", required(errorMessages.LOSS_CITY_REQUIRED));
defineRule("phone-number-required", required(errorMessages.PHONE_NUMBER_REQUIRED));
defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
export default {
name: "welcome-page",
mixins: [BaseFormMixin],
emits: ['update:modelValue'], // The component emits an event
props: {
modelValue: {
@ -79,12 +145,102 @@
vm.setCmsContent(resultMap.cmsContent);
});
},
computed:{
DamageCauseOptions() {
const damageCauseAnswers = this.getCmsContent("DamageCauseQuestion", "Answers");
const answerArray = [];
for (let answer of Object.values(damageCauseAnswers)) {
if (answer?.Name) {
answerArray.push(answer.Name);
}
}
return answerArray;
},
stateOptions: {
get: function () {
return {
AL: "Alabama",
AK: "Alaska",
AZ: "Arizona",
AR: "Arkansas",
CA: "California",
CO: "Colorado",
CT: "Connecticut",
DE: "Delaware",
DC: "District Of Columbia",
FL: "Florida",
GA: "Georgia",
HI: "Hawaii",
ID: "Idaho",
IL: "Illinois",
IN: "Indiana",
IA: "Iowa",
KS: "Kansas",
KY: "Kentucky",
LA: "Louisiana",
ME: "Maine",
MD: "Maryland",
MA: "Massachusetts",
MI: "Michigan",
MN: "Minnesota",
MS: "Mississippi",
MO: "Missouri",
MT: "Montana",
NE: "Nebraska",
NV: "Nevada",
NH: "New Hampshire",
NJ: "New Jersey",
NM: "New Mexico",
NY: "New York",
NC: "North Carolina",
ND: "North Dakota",
OH: "Ohio",
OK: "Oklahoma",
OR: "Oregon",
PA: "Pennsylvania",
RI: "Rhode Island",
SC: "South Carolina",
SD: "South Dakota",
TN: "Tennessee",
TX: "Texas",
UT: "Utah",
VT: "Vermont",
VA: "Virginia",
WA: "Washington",
WV: "West Virginia",
WI: "Wisconsin",
WY: "Wyoming",
};
},
},
},
components: {
siteHeader,
siteSubHeader,
buttonQuestionModal,
textboxQuestion,
dropdownQuestion,
siteFooter
},
}
</script>
<style lang="scss">
.subheader-primary
{
font-weight: 300 !important;
font-size: 26px;
line-height: 36px !important;
margin-top: 16px;
}
.subheader-secondary
{
font-weight: 300 !important;
font-size: 26px;
line-height: 36px;
color: #000000 !important;
margin-bottom: 16px !important;
}
</style>

7
src/main.js
View file

@ -14,6 +14,13 @@ import experimentMixin from "@/mixins/experiment-mixin.js";
// Vue App Setup
const vueApp = createApp(App);
/**
* Needed to make injections reactively linked to the provider.
* This is not needed once Vue.js is in version 3.3
* https://vuejs.org/guide/components/provide-inject.html#working-with-reactivity
*/
vueApp.config.unwrapInjectedRef = true;
// Pinia
const pinia = createPinia();
vueApp.use(pinia);

9
src/router/router-constants/routing-table.js
View file

@ -94,6 +94,15 @@ const routingTable = function(store) {
},
],
},
{
issPageValue: issPageValues.VIN_LOOKUP,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationIssPageValue: issPageValues.VEHICLE_LOOKUP,
},
],
},
{
issPageValue: issPageValues.PART_QUESTIONS,
maps: [

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

@ -19,7 +19,7 @@
<span v-else>
<router-link
:to="{
query: { fmgPage: `${getRouterLinkRouteFromCopy(copy)}` },
query: { [pageQueryString]: `${getRouterLinkRouteFromCopy(copy)}` },
name: 'root',
}"
>{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link
@ -45,6 +45,7 @@ import {
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