Merge branch 'develop' into feature/digital/SSR-540
# Conflicts: # src/layouts/coverage-statement/coverage-statement.vue
This commit is contained in:
Katie Kroell
commit
e7d15c2135
14 changed files with 277 additions and 318 deletions
|
|
@ -121,9 +121,7 @@ export default {
|
|||
return this.isMultiSelect ? "checkbox" : "radio";
|
||||
},
|
||||
buttonId() {
|
||||
return `${this.groupName?.replace(" ", "-")}-${this.value
|
||||
?.toString()
|
||||
?.replace(" ", "-")}`;
|
||||
return `${this.groupName}-${this.value}`.replaceAll(" ", "-");
|
||||
},
|
||||
isValueSelectedOnClick() {
|
||||
return this.isMultiSelect || this.selectingInitiatesLoad;
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
<div
|
||||
:class="getComponentWrapperClasses"
|
||||
v-for="answer in buttonsInfo"
|
||||
:key="answer.value ? answer.value : answer">
|
||||
:key="answer.value ?? answer">
|
||||
<component
|
||||
:is="buttonTypeString"
|
||||
:buttonLabel="answer.buttonLabel"
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
@keypress.space="closeModal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body ps-5 pe-5 pb-4 pt-0">
|
||||
<div class="modal-body ps-5 pe-5 pb-5 pt-0">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="modal-footer px-5 py-4">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div class="textbox-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''">
|
||||
<label
|
||||
v-if="displayQuestionText"
|
||||
:for="inputId"
|
||||
:aria-label="questionText"
|
||||
class="form-label"
|
||||
|
|
@ -66,6 +67,10 @@ export default {
|
|||
type: String,
|
||||
default: "",
|
||||
},
|
||||
displayQuestionText: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
modelValue: String,
|
||||
inputId: {
|
||||
type: String,
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
:validationRules="validationRules" />
|
||||
</div>
|
||||
<siteFooter
|
||||
class="mt-3"
|
||||
class="mt-5"
|
||||
ref="siteFooter"
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
:isForwardActionDisabled="!isMetaValid"
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@
|
|||
|
||||
</div>
|
||||
<siteFooter
|
||||
class="mt-5"
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@backClicked="navigateBack"
|
||||
|
|
@ -43,7 +44,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<recalModal ref="RecalModal" cmsWidgetName="RecalModal" />
|
||||
<recalModal ref="RecalModal" cmsWidgetName="RecalModal" />
|
||||
</Form>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -81,14 +82,6 @@ export default {
|
|||
recalModal,
|
||||
steeringText
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isITAC: false,
|
||||
deductible: "",
|
||||
policyVehicles: useMainStore().pageData(issPageValues.POLICY_VEHICLES),
|
||||
isVerified: useMainStore().order.payment.insuranceCoverage.isVerified,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
setupModalLinks(this);
|
||||
this.getPriceInfo();
|
||||
|
|
@ -239,61 +232,23 @@ export default {
|
|||
});
|
||||
},
|
||||
methods: {
|
||||
processIfStatements,
|
||||
getSubheaderTextFromCms(cmsWidgetName) {
|
||||
const subHeader = this.getCmsContent(cmsWidgetName, 'SubHeaderText');
|
||||
return this.processIfStatements(subHeader, "custom", this.getCustomValueFromString);
|
||||
},
|
||||
getBodyTextFromCms(cmsWidgetName) {
|
||||
const bodyText = this.getCmsContent(cmsWidgetName, "BodyText");
|
||||
return this.processIfStatements(bodyText, "custom", this.getCustomValueFromString);
|
||||
},
|
||||
getSecondaryTextFromCms(cmsWidgetName) {
|
||||
const secondaryText = this.getCmsContent(cmsWidgetName, "SecondaryText");
|
||||
return this.processIfStatements(secondaryText, "custom", this.getCustomValueFromString);
|
||||
},
|
||||
arePagePrerequisitesValid() {
|
||||
if (useMainStore().vehicle.vin) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
getCustomValueFromString(str) {
|
||||
switch (str) {
|
||||
case 'coverageUnverified':
|
||||
return this.coverageUnverified;
|
||||
case 'verifiedDeductible':
|
||||
return this.verifiedDeductible;
|
||||
case 'verifiedITAC':
|
||||
return this.verifiedITAC;
|
||||
case 'verifiedNoComp':
|
||||
return this.verifiedNoComp;
|
||||
case 'ADASReplace':
|
||||
return this.ADASReplace;
|
||||
case 'nonADASReplace':
|
||||
return this.nonADASReplace;
|
||||
case 'nonADASRepair':
|
||||
return this.nonADASRepair;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
},
|
||||
getPriceInfo() {
|
||||
const servicePrice = store.getPriceOrderItems();
|
||||
arePagePrerequisitesValid() {
|
||||
if (useMainStore().vehicle.vin) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
async forwardButtonAction() {
|
||||
return this.navigateForward();
|
||||
},
|
||||
|
||||
if (servicePrice > this.vehicleDeductible) {
|
||||
return this.isITAC = true;
|
||||
}
|
||||
},
|
||||
async forwardButtonAction() {
|
||||
return this.navigateForward();
|
||||
},
|
||||
navigateForward() {
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.CLICKED_FORWARD,
|
||||
this.$route
|
||||
);
|
||||
},
|
||||
navigateForward() {
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.CLICKED_FORWARD,
|
||||
this.$route
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -315,10 +270,10 @@ ol {
|
|||
color: $black;
|
||||
}
|
||||
p strong {
|
||||
color: $black;
|
||||
color: $black;
|
||||
font-weight: 500;
|
||||
}
|
||||
p.small{
|
||||
margin-bottom:0;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -193,25 +193,25 @@ export default {
|
|||
const vehicle = await this.lookupVehicleByVin(value);
|
||||
|
||||
// handle error in case vehicle info doesn't come back for selected VIN
|
||||
if (vehicle?.error ?? true) {
|
||||
this.mainStore.resetVehicleState();
|
||||
this.displayGeneric = true;
|
||||
return;
|
||||
}
|
||||
|
||||
// save selected vehicle to the store
|
||||
this.mainStore.updateVehicle(vehicle.data);
|
||||
this.displayGeneric = true;
|
||||
|
||||
// get the style(s) associated with the selected YMM
|
||||
const styleOptions = await this.mainStore.getVehicleStyles(
|
||||
if (vehicle?.error === true) {
|
||||
this.mainStore.resetVehicleState();
|
||||
this.displayGeneric = true;
|
||||
return;
|
||||
}
|
||||
if (vehicle) {
|
||||
// save selected vehicle to the store
|
||||
this.mainStore.updateVehicle(vehicle.data);
|
||||
this.displayGeneric = true;
|
||||
|
||||
// get the style(s) associated with the selected YMM
|
||||
const styleOptions = await this.mainStore.getVehicleStyles(
|
||||
vehicle.data.year,
|
||||
vehicle.data.make,
|
||||
vehicle.data.model
|
||||
)
|
||||
|
||||
// if there is more than 1 style for the selected vehicle, display generic/blurred image
|
||||
this.displayGeneric = styleOptions?.data?.length > 1;
|
||||
vehicle.data.make,
|
||||
vehicle.data.model,
|
||||
);
|
||||
// if there is more than 1 style for the selected vehicle, display generic/blurred image
|
||||
this.displayGeneric = styleOptions?.data?.length > 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -31,22 +31,14 @@
|
|||
validationRules="selection-required"
|
||||
class="service-location-button-question mb-1"/>
|
||||
<div class="select-car">
|
||||
<div class="container-fluid pb-2 g-0">
|
||||
<div class="row">
|
||||
<div class="col px-0">
|
||||
<div class="select-car-form rounded">
|
||||
<siteFooter
|
||||
class="mt-4"
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@backClicked="backButtonAction"
|
||||
@forwardClicked="forwardButtonAction"
|
||||
ref="siteFooter"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<siteFooter
|
||||
class="mt-5"
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@backClicked="backButtonAction"
|
||||
@forwardClicked="forwardButtonAction"
|
||||
ref="siteFooter"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -81,7 +73,7 @@ import serviceZipModalQuestion from '@/layouts/service-location/service-zip-moda
|
|||
defineRule("selection-required", required(errorMessages.OPTION_REQUIRED));
|
||||
export default {
|
||||
name: "service-location",
|
||||
mixins: [baseFormMixin, baseMixin],
|
||||
mixins: [baseFormMixin],
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
</div>
|
||||
<modal
|
||||
:ref="modalName"
|
||||
:headerText="modalHeaderText"
|
||||
:onModalOpenedCallback="onModalOpened"
|
||||
:onModalClosedCallback="onModalClosed"
|
||||
:footerButtonText="modalFooterText"
|
||||
|
|
|
|||
|
|
@ -1,30 +1,27 @@
|
|||
<template>
|
||||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
||||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
||||
<div class="page-container-grouped-styles">
|
||||
<div class="fade-on-route-transition sub-container make-tall">
|
||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget"
|
||||
justification="left"
|
||||
issContainingPage="service-packages"
|
||||
/>
|
||||
justification="left"
|
||||
issContainingPage="service-packages"
|
||||
/>
|
||||
<div class="mx-5">
|
||||
|
||||
<servicePackageQuestion ref="servicePackage"
|
||||
cmsWidgetName="ServicePackage"
|
||||
groupName="ServicePackageQuestion"
|
||||
:availableLineItems="availableLineItems"
|
||||
@vapsItemsSelected="vapsItemsSelectedAction"
|
||||
v-on:link-event="openModalAction"
|
||||
validationRules="option-required"
|
||||
isRequired
|
||||
cmsWidgetName="ServicePackage"
|
||||
groupName="ServicePackageQuestion"
|
||||
:availableLineItems="availableLineItems"
|
||||
@vapsItemsSelected="vapsItemsSelectedAction"
|
||||
v-on:link-event="openModalAction"
|
||||
validationRules="option-required"
|
||||
isRequired
|
||||
/>
|
||||
|
||||
<p class="caption disclaimer" v-html="PriceDisclaimerText"></p>
|
||||
|
||||
<p class="caption disclaimer" v-html="PriceDisclaimerText"></p>
|
||||
<siteFooter cmsWidgetName="SiteFooterWidget"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@back-clicked="backButtonAction"
|
||||
@ForwardClicked="forwardButtonAction" />
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@back-clicked="backButtonAction"
|
||||
@ForwardClicked="forwardButtonAction" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -33,155 +30,155 @@
|
|||
<contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />
|
||||
<contentGroupModal ref="RearWiperModal" cmsWidgetName="RearWiperModal" />
|
||||
<contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
|
||||
|
||||
|
||||
|
||||
|
||||
</Form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Components
|
||||
import baseFormMixin from '@/mixins/base-form-mixin';
|
||||
import siteHeader from '@/iss-components/site-header/site-header';
|
||||
import siteFooter from '@/iss-components/site-footer/site-footer';
|
||||
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header';
|
||||
import servicePackageQuestion from './service-package-question/service-package-question';
|
||||
import textBlock from '@/digital-components/text-block/text-block';
|
||||
import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal';
|
||||
import loadingModal from '@/iss-components/loading-modal/loading-modal.vue';
|
||||
import { settleAllPromises } from '@/helpers/layout-helper';
|
||||
import { useMainStore } from "@/store";
|
||||
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
|
||||
import { required } from '@/helpers/validation-rules';
|
||||
import { errorMessages } from '@/constants/error-messages';
|
||||
import { Form, defineRule } from 'vee-validate';
|
||||
import { allGlassPartsAndItemsHavePrices } from '@/layouts/service-packages/service-package-helper/service-package-helper'
|
||||
// Components
|
||||
import baseFormMixin from '@/mixins/base-form-mixin';
|
||||
import siteHeader from '@/iss-components/site-header/site-header';
|
||||
import siteFooter from '@/iss-components/site-footer/site-footer';
|
||||
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header';
|
||||
import servicePackageQuestion from './service-package-question/service-package-question';
|
||||
import textBlock from '@/digital-components/text-block/text-block';
|
||||
import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal';
|
||||
import loadingModal from '@/iss-components/loading-modal/loading-modal.vue';
|
||||
import { settleAllPromises } from '@/helpers/layout-helper';
|
||||
import { useMainStore } from "@/store";
|
||||
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
|
||||
import { required } from '@/helpers/validation-rules';
|
||||
import { errorMessages } from '@/constants/error-messages';
|
||||
import { Form, defineRule } from 'vee-validate';
|
||||
import { allGlassPartsAndItemsHavePrices } from '@/layouts/service-packages/service-package-helper/service-package-helper'
|
||||
|
||||
defineRule('option-required', required(errorMessages.OPTION_REQUIRED));
|
||||
defineRule('option-required', required(errorMessages.OPTION_REQUIRED));
|
||||
|
||||
const store = useMainStore();
|
||||
const store = useMainStore();
|
||||
|
||||
export default {
|
||||
name: 'service-packages',
|
||||
mixins: [baseFormMixin],
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||
export default {
|
||||
name: 'service-packages',
|
||||
mixins: [baseFormMixin],
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||
|
||||
const wipersPromise = await store.getWipers();
|
||||
const rainDefensePromise = await store.getRainDefense();
|
||||
const supportingItemsPromise = await store.getSupportingItems();
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: 'cmsContent',
|
||||
promise: cmsContentPromise,
|
||||
},
|
||||
{
|
||||
resultKey: 'wipers',
|
||||
promise: wipersPromise,
|
||||
},
|
||||
{
|
||||
resultKey: 'rainDefense',
|
||||
promise: rainDefensePromise,
|
||||
},
|
||||
{
|
||||
resultKey: 'supportingItems',
|
||||
promise: supportingItemsPromise,
|
||||
},
|
||||
];
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
const wipersPromise = await store.getWipers();
|
||||
const rainDefensePromise = await store.getRainDefense();
|
||||
const supportingItemsPromise = await store.getSupportingItems();
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: 'cmsContent',
|
||||
promise: cmsContentPromise,
|
||||
},
|
||||
{
|
||||
resultKey: 'wipers',
|
||||
promise: wipersPromise,
|
||||
},
|
||||
{
|
||||
resultKey: 'rainDefense',
|
||||
promise: rainDefensePromise,
|
||||
},
|
||||
{
|
||||
resultKey: 'supportingItems',
|
||||
promise: supportingItemsPromise,
|
||||
},
|
||||
];
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
const clonedGlassParts = store.order.lineItems.glassParts
|
||||
? JSON.parse(JSON.stringify(store.order.lineItems.glassParts))
|
||||
: [];
|
||||
const availableLineItems = [
|
||||
resultMap.rainDefense,
|
||||
...resultMap.supportingItems,
|
||||
...resultMap.wipers,
|
||||
...clonedGlassParts,
|
||||
];
|
||||
const clonedGlassParts = store.order.lineItems.glassParts
|
||||
? JSON.parse(JSON.stringify(store.order.lineItems.glassParts))
|
||||
: [];
|
||||
const availableLineItems = [
|
||||
resultMap.rainDefense,
|
||||
...resultMap.supportingItems,
|
||||
...resultMap.wipers,
|
||||
...clonedGlassParts,
|
||||
];
|
||||
|
||||
const pricingResults = await store.getPriceOrderItems(availableLineItems);
|
||||
const pricingResults = await store.getPriceOrderItems(availableLineItems);
|
||||
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.pricedGlassParts = clonedGlassParts;
|
||||
vm.supportingItems = resultMap.supportingItems;
|
||||
vm.availableLineItems = pricingResults;
|
||||
});
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.pricedGlassParts = clonedGlassParts;
|
||||
vm.supportingItems = resultMap.supportingItems;
|
||||
vm.availableLineItems = pricingResults;
|
||||
});
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedVaps: [],
|
||||
availableLineItems: [],
|
||||
supportingItems: [],
|
||||
pricedGlassParts: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
PriceDisclaimerText() {
|
||||
return this.getCmsContent("PriceDisclaimerWidget", "Text");
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedVaps: [],
|
||||
availableLineItems: [],
|
||||
supportingItems: [],
|
||||
pricedGlassParts: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
openModalAction(modalName) {
|
||||
this.$refs[modalName.args].openModal();
|
||||
},
|
||||
computed: {
|
||||
PriceDisclaimerText() {
|
||||
return this.getCmsContent("PriceDisclaimerWidget", "Text");
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
openModalAction(modalName) {
|
||||
this.$refs[modalName.args].openModal();
|
||||
},
|
||||
arePagePrerequisitesValid() {
|
||||
return (
|
||||
store.order.serviceLocation.zipCode &&
|
||||
store.order.serviceLocation.zipCodeCtu &&
|
||||
(store.order.damage.isRepair ||
|
||||
(store.order.lineItems?.glassParts != null &&
|
||||
store.order.lineItems.glassParts.length > 0)) &&
|
||||
store.order.referralNumber?.length !== 6
|
||||
);
|
||||
},
|
||||
vapsItemsSelectedAction(vapsItemsSelected) {
|
||||
this.selectedVaps = vapsItemsSelected;
|
||||
},
|
||||
backButtonAction() {
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
},
|
||||
forwardButtonAction() {
|
||||
const parts = { glassParts: this.pricedGlassParts, supportingItems: this.supportingItems, vaps: this.selectedVaps };
|
||||
if (!allGlassPartsAndItemsHavePrices(parts)) {
|
||||
console.error('One or more items have no price assigned!');
|
||||
arePagePrerequisitesValid() {
|
||||
return (
|
||||
store.order.serviceLocation.zipCode &&
|
||||
store.order.serviceLocation.zipCodeCtu &&
|
||||
(store.order.damage.isRepair ||
|
||||
(store.order.lineItems?.glassParts != null &&
|
||||
store.order.lineItems.glassParts.length > 0)) &&
|
||||
store.order.referralNumber?.length !== 6
|
||||
);
|
||||
},
|
||||
vapsItemsSelectedAction(vapsItemsSelected) {
|
||||
this.selectedVaps = vapsItemsSelected;
|
||||
},
|
||||
backButtonAction() {
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
},
|
||||
forwardButtonAction() {
|
||||
const parts = { glassParts: this.pricedGlassParts, supportingItems: this.supportingItems, vaps: this.selectedVaps };
|
||||
if (!allGlassPartsAndItemsHavePrices(parts)) {
|
||||
console.error('One or more items have no price assigned!');
|
||||
}
|
||||
if (this.pricedGlassParts.length > 0) {
|
||||
|
||||
store.saveGlassParts(this.pricedGlassParts);
|
||||
}
|
||||
store.saveSupportingItems(this.supportingItems);
|
||||
store.saveVaps(this.selectedVaps);
|
||||
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route);
|
||||
}
|
||||
if (this.pricedGlassParts.length > 0) {
|
||||
|
||||
store.saveGlassParts(this.pricedGlassParts);
|
||||
}
|
||||
store.saveSupportingItems(this.supportingItems);
|
||||
store.saveVaps(this.selectedVaps);
|
||||
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route);
|
||||
},
|
||||
components: {
|
||||
siteHeader,
|
||||
siteFooter,
|
||||
siteSubHeader,
|
||||
Form, /* eslint-disable-line */
|
||||
textBlock,
|
||||
servicePackageQuestion,
|
||||
loadingModal,
|
||||
contentGroupModal
|
||||
}
|
||||
},
|
||||
components: {
|
||||
siteHeader,
|
||||
siteFooter,
|
||||
siteSubHeader,
|
||||
Form, /* eslint-disable-line */
|
||||
textBlock,
|
||||
servicePackageQuestion,
|
||||
loadingModal,
|
||||
contentGroupModal
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.subheader-secondary {
|
||||
margin-top: .5rem;
|
||||
padding: 0px;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.subheader-secondary {
|
||||
margin-top: .5rem;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.disclaimer {
|
||||
margin-top: 1.3rem;
|
||||
.disclaimer {
|
||||
margin: 1.3rem 0 1.5rem 0;
|
||||
|
||||
a {
|
||||
color: #4D5151;
|
||||
font-weight: 400;
|
||||
a {
|
||||
color: #4D5151;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<VehicleBanner class="mt-2 mb-4" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" />
|
||||
<SiteSubHeader cms-widget-name="SiteSubHeaderWidget" class="mt-5 mb-2" />
|
||||
<VinLookupMethods v-model="selectedVinLookupMethod" cms-widget-name="VINLookupMethod" group-name="VinLookupMethods" ref="VinLookupMethods" />
|
||||
<SiteFooter cms-widget-name="SiteFooterWidget" :is-forward-action-disabled="isForwardActionDisabled" @back-clicked="backButtonAction" @forward-clicked="forwardButtonAction" class="mt-3"/>
|
||||
<SiteFooter cms-widget-name="SiteFooterWidget" :is-forward-action-disabled="isForwardActionDisabled" @back-clicked="backButtonAction" @forward-clicked="forwardButtonAction" class="mt-5"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
:isWide="true"
|
||||
altText=""
|
||||
isRequired
|
||||
:groupName="`${glassLocation}-${glassName}`"
|
||||
:groupName="replaceAllSpaceWithDash(`${glassLocation}-${glassName}`)"
|
||||
:validationRules="tintValidationRules">
|
||||
<div class="row my-2" aria-live="polite">
|
||||
<div class="col">
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
:loaderEnabled="false"
|
||||
isRequired
|
||||
isSmallQuestionText
|
||||
:groupName="`${glassLocation}-${glassName}-${selectedTint}`"
|
||||
:groupName="replaceAllSpaceWithDash(`${glassLocation}-${glassName}-${selectedTint}`)"
|
||||
:validationRules="partValidationRules" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -210,6 +210,10 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
|
||||
replaceAllSpaceWithDash(str) {
|
||||
return String(str).replaceAll(" ", "-");
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
selectedTint() {
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
:alreadyPopulatedPartsData="alreadyPopulatedPartsData" />
|
||||
</div>
|
||||
<siteFooter
|
||||
class="mt-5"
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
ref="siteFooter"
|
||||
:isForwardActionDisabled="isForwardActionDisabled"
|
||||
|
|
|
|||
|
|
@ -76,69 +76,75 @@ export default {
|
|||
value: inputValue,
|
||||
handleChange,
|
||||
errors,
|
||||
resetField
|
||||
} = useField(props.groupName, props.validationRules,
|
||||
{
|
||||
type: inputType,
|
||||
checkedValue: props.value,
|
||||
});
|
||||
return {
|
||||
handleChange,
|
||||
errors,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
{
|
||||
type: inputType
|
||||
});
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.form-check {
|
||||
position: relative;
|
||||
return {
|
||||
handleChange,
|
||||
errors,
|
||||
resetField
|
||||
};
|
||||
},
|
||||
unmounted(){
|
||||
this.resetField();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
label {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.form-check-input {
|
||||
border: 1px solid $gray-500;
|
||||
border-radius: 50%;
|
||||
margin-right: 0.5rem;
|
||||
|
||||
&:checked {
|
||||
background-color: $white;
|
||||
background-size: 71%;
|
||||
background-position: center;
|
||||
border: 1px solid $blue;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' xml:space='preserve'%3e%3ccircle cx='25' cy='25' r='25' fill='%231574A1'/%3e%3c/svg%3e");
|
||||
+ label {
|
||||
p {
|
||||
font-weight: 500;
|
||||
font-size: .875rem;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
}
|
||||
|
||||
&, & + label {
|
||||
margin-top: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
.form-check {
|
||||
position: relative;
|
||||
|
||||
label {
|
||||
&:hover {
|
||||
.form-check-input {
|
||||
box-shadow: 0 0 0 4px $blue-300;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: .875rem;
|
||||
color: $gray-600;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
.form-check-input {
|
||||
border: 1px solid $gray-500;
|
||||
border-radius: 50%;
|
||||
margin-right: 0.5rem;
|
||||
|
||||
&:checked {
|
||||
background-color: $white;
|
||||
background-size: 71%;
|
||||
background-position: center;
|
||||
border: 1px solid $blue;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' xml:space='preserve'%3e%3ccircle cx='25' cy='25' r='25' fill='%231574A1'/%3e%3c/svg%3e");
|
||||
+ label {
|
||||
p {
|
||||
font-weight: 500;
|
||||
font-size: .875rem;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
}
|
||||
|
||||
&, & + label {
|
||||
margin-top: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.form-check-input {
|
||||
box-shadow: 0 0 0 4px $blue-300;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: .875rem;
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue