CSR-347: WIP, more elements and data setup for address-vehicles page
This commit is contained in:
Adam Caouette
parent
3d905c65e8
commit
f78b5b20c3
3 changed files with 128 additions and 25 deletions
|
|
@ -0,0 +1,76 @@
|
|||
<template>
|
||||
<buttonQuestion
|
||||
class="radioQuestion"
|
||||
:questionText="questionText"
|
||||
:answers="vehicles"
|
||||
groupName="ChooseAddressVehicle"
|
||||
textPosition="text-start"
|
||||
v-model="selectedValueAsArray"
|
||||
isRequired=true
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import buttonQuestion from "@/common-components/button-question/button-question";
|
||||
// Supporting files
|
||||
import store from "@/store";
|
||||
import { storeActions } from "@/constants/store-actions.js";
|
||||
import baseMixin from "@/mixins/base-mixin.js";
|
||||
|
||||
export default {
|
||||
name: "address-vehicles-question",
|
||||
data() {
|
||||
return {
|
||||
// makes: Array,
|
||||
// questionText: String,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
vehicles: Array,
|
||||
modelValue: String,
|
||||
cmsWidgetName: String,
|
||||
},
|
||||
computed: {
|
||||
differentVehicleAlertHeader() {
|
||||
return [];
|
||||
},
|
||||
differentVehicleAlertBody() {
|
||||
return [];
|
||||
},
|
||||
selectedValue() {
|
||||
return [];
|
||||
},
|
||||
questionText(){
|
||||
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
|
||||
},
|
||||
// selectedValueAsArray: {
|
||||
// get: function() {
|
||||
// const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
|
||||
// return modelValueAsArray;
|
||||
// },
|
||||
// set: function(newValue) {
|
||||
// const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null;
|
||||
// this.$emit("update:modelValue", newValueAsScalar);
|
||||
// }
|
||||
// }
|
||||
},
|
||||
components: {
|
||||
buttonQuestion,
|
||||
},
|
||||
methods: {
|
||||
loadInitialData() {
|
||||
return baseMixin.methods.dispatchStoreAction(
|
||||
storeActions.GET_VEHICLE_MAKES,
|
||||
{ year: store.getters.vehicle.year }
|
||||
);
|
||||
},
|
||||
// initializeComponent(initialData) {
|
||||
// this.makes = initialData;
|
||||
// },
|
||||
initializeComponent(initialData) {
|
||||
console.log('initializeComponent... initialData: ', initialData)
|
||||
// this.makes = initialData;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -9,23 +9,27 @@
|
|||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
|
||||
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
|
||||
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
|
||||
<alert
|
||||
ref="alertFoundMultipleVehicles"
|
||||
class="my-3"
|
||||
alertClass="alert-warning"
|
||||
:manualHeadline="AlertFoundMultipleVehiclesHeader"
|
||||
manualCopy=""
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
|
||||
<addressVehiclesQuestion cmsWidgetName="VehicleConfirmationQuestion" :vehicles="VehiclesForQuestions" />
|
||||
|
||||
new section:
|
||||
<div v-for="(item, i) in PartsForQuestions" :key="i">
|
||||
<!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
|
||||
<div class="container-fluid">
|
||||
<hr v-if="i > 0" />
|
||||
</div>
|
||||
|
||||
<h3>item.glassLocation: {{ item.glassLocation }}</h3>
|
||||
<h3>item.glassName: {{ item.glassName }}</h3>
|
||||
<h3>item.colorAnswers: {{ item.colorAnswers }}</h3>
|
||||
|
||||
<div class="alert-provide-vin" v-if="splitAlertProvideVinBodyForLink.length">
|
||||
<span v-for="copy in splitAlertProvideVinBodyForLink" :key="copy">
|
||||
<span v-if="copy.includes('routerLink:')" class="m-0 text-body small">
|
||||
<router-link :to="{query: {fmgPage: `${copy.split(':')[1].split(',')[0]}`}, name: 'root'}">{{ copy.split(':')[1].split(',')[1] }}</router-link>
|
||||
</span>
|
||||
<span v-else class="m-0 text-body small" v-html="copy"></span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="row my-2">
|
||||
<!-- <div class="row my-2">
|
||||
<div class="col">
|
||||
<textboxQuestion cmsWidgetName="VinNumber" v-model="vin" inputId="vin" isRequired disableAutoFill validationRules="vin-required|vin-format" :isDisabled=isVinFieldReadOnly />
|
||||
</div>
|
||||
|
|
@ -100,7 +104,7 @@ new section:
|
|||
v-if="perfectMatchNewVinAlert"
|
||||
alertClass="alert-warning"
|
||||
cmsWidgetName="PerfectMatchNewVinAlert"
|
||||
/>
|
||||
/> -->
|
||||
<funnelFooter
|
||||
cmsWidgetName="FunnelFooterWidget"
|
||||
ref="funnelFooter"
|
||||
|
|
@ -121,6 +125,7 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
|
|||
import alert from "@/ux-components/alert/alert";
|
||||
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
|
||||
import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
|
||||
import addressVehiclesQuestion from "@/layouts/address-vehicles/address-vehicles-question/address-vehicles-question";
|
||||
|
||||
// Supporting files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
|
|
@ -220,6 +225,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
matchedDifferentVehicle: false,
|
||||
noMatchAlert: false,
|
||||
noServiceZip: false,
|
||||
|
|
@ -235,14 +241,34 @@ export default {
|
|||
};
|
||||
},
|
||||
computed: {
|
||||
PartsForQuestions() {
|
||||
vehicleCount() {
|
||||
return this.VehiclesForQuestions.length;
|
||||
},
|
||||
AlertFoundMultipleVehiclesHeader(){
|
||||
// let zip = this.serviceZip ? this.serviceZip : this.customerQuestions.addressQuestions.zip;
|
||||
let count = 88;
|
||||
let text = this.getCmsContent("FoundMultipleVehicles", "HeadlineText").replaceAll("{custom:vehicleCount}", this.vehicleCount);
|
||||
return text;
|
||||
},
|
||||
AlertProvideVinBody(){
|
||||
// let text = this.getCmsContent("ProvideVinAlert", "BodyText").replaceAll("{routerLink:clickedChangeVinLookupMethod,provide your VIN}", "LINKHERE");
|
||||
let text = this.getCmsContent("ProvideVinAlert", "BodyText");
|
||||
return text;
|
||||
},
|
||||
splitAlertProvideVinBodyForLink(){
|
||||
// Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
|
||||
return this.AlertProvideVinBody.split(/{(.*?)}/g);
|
||||
},
|
||||
VehiclesForQuestions() {
|
||||
|
||||
return [];
|
||||
const vehiclesData = this.VehiclesFromApi;
|
||||
|
||||
// const partsData = this.PartsFromApi;
|
||||
console.log('vehiclesData: ', vehiclesData)
|
||||
|
||||
// // Map API result data, to vehicle-parts data structure
|
||||
// const mappedData = partsData.partsOrQuestions.map((g) => {
|
||||
return vehiclesData;
|
||||
|
||||
// // Map API result data, to address-vehicles data structure
|
||||
// const mappedData = vehiclesData.partsOrQuestions.map((g) => {
|
||||
// return {
|
||||
// glassName: g.glassName,
|
||||
// glassLocation: g.glassLocation,
|
||||
|
|
@ -264,8 +290,8 @@ export default {
|
|||
|
||||
// return mappedData;
|
||||
},
|
||||
PartsFromApi() {
|
||||
return store.getters.pageData(fmgPageValues.VEHICLE_PARTS);
|
||||
VehiclesFromApi() {
|
||||
return store.getters.pageData(fmgPageValues.ADDRESS_VEHICLES);
|
||||
},
|
||||
isVinFieldReadOnly(){
|
||||
return this.$store.getters.payment.insuranceCoverage.isVerified;
|
||||
|
|
@ -372,10 +398,11 @@ export default {
|
|||
funnelHeader,
|
||||
vehicleBanner,
|
||||
funnelSubHeader,
|
||||
textboxQuestion,
|
||||
// textboxQuestion,
|
||||
alert,
|
||||
funnelFooter,
|
||||
vinInformation,
|
||||
// vinInformation,
|
||||
addressVehiclesQuestion,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export default {
|
|||
isDismissible: Boolean,
|
||||
/*
|
||||
alertClass class names:
|
||||
alert-sucess (green)
|
||||
alert-success (green)
|
||||
alert-danger (red)
|
||||
alert-warning (yellow)
|
||||
alert-info (blue)
|
||||
|
|
|
|||
Loading…
Reference in a new issue