sheena
parent
030335d161
commit
9ee71bfbf5
1 changed files with 272 additions and 0 deletions
272
src/layouts/service-location/service-location.vue
Normal file
272
src/layouts/service-location/service-location.vue
Normal file
|
|
@ -0,0 +1,272 @@
|
||||||
|
<template>
|
||||||
|
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
|
||||||
|
<div class="page-container-grouped-styles">
|
||||||
|
<div class="fade-on-route-transition position-relative">
|
||||||
|
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||||
|
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header" />
|
||||||
|
<div class="select-car">
|
||||||
|
<div class="container-fluid pb-2">
|
||||||
|
<div class="row px-3">
|
||||||
|
<div class="col">
|
||||||
|
<div class="select-car-form rounded">
|
||||||
|
<serviceZipModalQuestion
|
||||||
|
v-model="serviceZipCodeQuestion"
|
||||||
|
ref="serviceZipCodeQuestion"
|
||||||
|
@updated-serviceability="setServiceabilityDetails"
|
||||||
|
@updated-contains-military-base="setContainsMilitaryBase"
|
||||||
|
modalWidgetName="ServiceZipModalWidget" />
|
||||||
|
<alert
|
||||||
|
ref="alertMilitaryBaseZip"
|
||||||
|
class="my-5"
|
||||||
|
cmsWidgetName="AlertMilitaryBaseZipWidget"
|
||||||
|
v-if="displayMilitaryZipAlert"
|
||||||
|
alertClass="alert-warning" />
|
||||||
|
<buttonQuestion
|
||||||
|
cmsWidgetName="ServiceTypeQuestionWidget"
|
||||||
|
:questionText="questionText"
|
||||||
|
:answers="answersFromCms"
|
||||||
|
buttonTypeString="listCard"
|
||||||
|
isRequired
|
||||||
|
v-model="selectedAppointmentType"
|
||||||
|
validationRules="selection-required"
|
||||||
|
class="service-location-button-question mb-1"/>
|
||||||
|
<div class="select-car">
|
||||||
|
<div class="container-fluid pb-2">
|
||||||
|
<div class="row px-3">
|
||||||
|
<div class="col">
|
||||||
|
<div class="select-car-form rounded">
|
||||||
|
<siteFooter
|
||||||
|
cmsWidgetName="SiteFooterWidget"
|
||||||
|
:isForwardActionDisabled="!meta.valid"
|
||||||
|
@backClicked="backButtonAction"
|
||||||
|
@forwardClicked="forwardButtonAction"
|
||||||
|
ref="siteFooter"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Form>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
// Import Supporting Files
|
||||||
|
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||||
|
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||||
|
import { required } from "@/helpers/validation-rules";
|
||||||
|
import { errorMessages } from "@/constants/error-messages";
|
||||||
|
import buttonQuestion from "@/digital-components/button-question/button-question";
|
||||||
|
import { useMainStore } from "@/store";
|
||||||
|
import { getServiceabilityDetails, getZipCodeData } from "@/helpers/service-location-helper";
|
||||||
|
|
||||||
|
// Import Component
|
||||||
|
import alert from "@/ux-components/alert/alert";
|
||||||
|
import baseFormMixin from "@/mixins/base-form-mixin";
|
||||||
|
import baseMixin from "@/mixins/base-mixin";
|
||||||
|
import { Form, defineRule } from "vee-validate";
|
||||||
|
import siteFooter from "@/iss-components/site-footer/site-footer.vue";
|
||||||
|
import siteHeader from "@/iss-components/site-header/site-header.vue";
|
||||||
|
import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
|
||||||
|
import serviceZipModalQuestion from '@/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue';
|
||||||
|
|
||||||
|
// DEFINE VALIDATION RULES
|
||||||
|
defineRule("selection-required", required(errorMessages.OPTION_REQUIRED));
|
||||||
|
export default {
|
||||||
|
name: "service-location",
|
||||||
|
mixins: [baseFormMixin, baseMixin],
|
||||||
|
async beforeRouteEnter(to, from, next) {
|
||||||
|
// Call APIs
|
||||||
|
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||||
|
|
||||||
|
const serviceZipCode = useMainStore().order.customer.address.zipCode;
|
||||||
|
const zipCodeData = getZipCodeData(serviceZipCode);
|
||||||
|
|
||||||
|
const serviceabilityDetailsPromise = getServiceabilityDetails(serviceZipCode);
|
||||||
|
|
||||||
|
// Settle promises and get results
|
||||||
|
const promiseResultMap = [
|
||||||
|
{
|
||||||
|
resultKey: "cmsContent",
|
||||||
|
promise: cmsContentPromise,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
resultKey: "serviceabilityDetails",
|
||||||
|
promise: serviceabilityDetailsPromise,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
resultKey: "zipCodeData",
|
||||||
|
promise: zipCodeData,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const resultMap = await settleAllPromises(promiseResultMap);
|
||||||
|
|
||||||
|
next((vm) => {
|
||||||
|
vm.setCmsContent(resultMap.cmsContent);
|
||||||
|
vm.setData(
|
||||||
|
resultMap.zipCodeData,
|
||||||
|
resultMap.serviceabilityDetails,
|
||||||
|
)
|
||||||
|
});
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const mainStore = useMainStore();
|
||||||
|
return { mainStore };
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
zipCode: this.mainStore.order.customer.address.zipCode,
|
||||||
|
state: this.mainStore.order.customer.address.state,
|
||||||
|
isServiceZipServiceable: null,
|
||||||
|
isGlassServiceableMobile: null,
|
||||||
|
isRecalibrationServiceableMobile: null,
|
||||||
|
selectedAppointmentType: "",
|
||||||
|
zipContainsMilitaryBase: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
questionText() {
|
||||||
|
return this.getCmsContent("ServiceTypeQuestionWidget", "QuestionText");
|
||||||
|
},
|
||||||
|
answersFromCms() {
|
||||||
|
return this.getCmsContent("ServiceTypeQuestionWidget", "Answers");
|
||||||
|
},
|
||||||
|
serviceZipCodeQuestion: {
|
||||||
|
get: function() {
|
||||||
|
return {
|
||||||
|
zipCode: this.zipCode,
|
||||||
|
state: this.state,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
set: function (newValue) {
|
||||||
|
if (newValue.zipCode !== this.zipCode) {
|
||||||
|
this.selectedAppointmentType = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.zipCode = newValue.zipCode;
|
||||||
|
this.state = newValue.state;
|
||||||
|
|
||||||
|
this.$nextTick();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
isServiceableMobile() {
|
||||||
|
if (this.isRecalibrationServiceableMobile !== null) {
|
||||||
|
return this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile;
|
||||||
|
} else {
|
||||||
|
return this.isGlassServiceableMobile;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
displayMilitaryZipAlert() {
|
||||||
|
return this.zipContainsMilitaryBase && this.isServiceableMobile;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
arePagePrerequisiteValid() {
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
backButtonAction() {
|
||||||
|
/**
|
||||||
|
* this.navigationScenarios comes from base-mixin
|
||||||
|
*/
|
||||||
|
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||||
|
},
|
||||||
|
async forwardButtonAction() {
|
||||||
|
//validate and save data here
|
||||||
|
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route);
|
||||||
|
},
|
||||||
|
resetDependentState() {
|
||||||
|
|
||||||
|
},
|
||||||
|
setData(zipCodeData, serviceabilityDetails) {
|
||||||
|
if (zipCodeData) {
|
||||||
|
this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
|
||||||
|
}
|
||||||
|
if (serviceabilityDetails) {
|
||||||
|
this.setServiceabilityDetails(serviceabilityDetails);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setContainsMilitaryBase(val) {
|
||||||
|
if (this.zipContainsMilitaryBase !== val) {
|
||||||
|
this.zipContainsMilitaryBase = val;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setServiceabilityDetails(serviceabilityDetails) {
|
||||||
|
this.isGlassServiceableInshop = serviceabilityDetails.isGlassServiceableInshop;
|
||||||
|
this.isRecalibrationServiceableInshop =
|
||||||
|
serviceabilityDetails.isRecalibrationServiceableInshop;
|
||||||
|
this.isGlassServiceableMobile = serviceabilityDetails.isGlassServiceableMobile;
|
||||||
|
this.isRecalibrationServiceableMobile =
|
||||||
|
serviceabilityDetails.isRecalibrationServiceableMobile;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
siteFooter,
|
||||||
|
siteHeader,
|
||||||
|
siteSubHeader,
|
||||||
|
buttonQuestion,
|
||||||
|
Form,
|
||||||
|
serviceZipModalQuestion,
|
||||||
|
alert
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
|
||||||
|
.page-container-grouped-styles {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.modal-open {
|
||||||
|
.page-container-grouped-styles {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#sub-header span {
|
||||||
|
color: $black;
|
||||||
|
}
|
||||||
|
.question-text {
|
||||||
|
& > span {
|
||||||
|
line-height: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.list-card-content p {
|
||||||
|
&:first-of-type {
|
||||||
|
line-height: 1.5rem;
|
||||||
|
}
|
||||||
|
&:not(:nth-of-type(1)){
|
||||||
|
line-height: 1.250rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.siteHeader{
|
||||||
|
.site-header{
|
||||||
|
margin-bottom: 1.25rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.choose-option{
|
||||||
|
.button-question >div {
|
||||||
|
&:first-of-type {
|
||||||
|
margin-bottom: 0.95rem;
|
||||||
|
line-height: 1.500rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.button-question{
|
||||||
|
.row.form-test-error{
|
||||||
|
line-height:1.500rem;
|
||||||
|
padding-left: 0rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.service-location-button-question {
|
||||||
|
.question-text {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in a new issue