418 lines
16 KiB
Vue
418 lines
16 KiB
Vue
<template>
|
|
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
|
<div class="page-container-grouped-styles">
|
|
<loadingModal ref="loadingModal" />
|
|
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
|
|
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
|
|
<serviceZipModalQuestion
|
|
v-model="serviceZipCodeQuestion"
|
|
ref="serviceZipCodeQuestion"
|
|
:mobileFeePart="mobileFeePart"
|
|
@updated-mobile-fee-part="setMobileFeePart"
|
|
@updated-serviceability="setServiceabilityDetails"
|
|
@updated-contains-military-base="setContainsMilitaryBase"
|
|
linkWidgetName="ServiceZipLinkWidget"
|
|
modalWidgetName="ServiceZipModalWidget"
|
|
:onZipUpdateCallback="reloadShopData" />
|
|
<alert
|
|
ref="alertMilitaryBaseZip"
|
|
class="my-5"
|
|
cmsWidgetName="AlertMilitaryBaseZipWidget"
|
|
v-if="displayMilitaryZipAlert"
|
|
alertClass="alert-warning" />
|
|
<alert
|
|
ref="alertMobileOnly"
|
|
class="my-5"
|
|
cmsWidgetName="AlertMobileOnlyWidget"
|
|
v-if="displayServiceableMobileOnly"
|
|
alertClass="alert-warning" />
|
|
<alert
|
|
ref="alertRecalNoMobile"
|
|
class="my-5"
|
|
cmsWidgetName="AlertRecalNoMobileWidget"
|
|
v-if="displayRecalibrationWarning"
|
|
@text-link-clicked="openModalAction"
|
|
alertClass="alert-warning" />
|
|
<alert
|
|
ref="alertInshopOnly"
|
|
class="my-5"
|
|
cmsWidgetName="AlertInshopOnlyWidget"
|
|
v-if="displayServiceableInshopOnly"
|
|
alertClass="alert-warning" />
|
|
<alert
|
|
ref="alertNoShops"
|
|
class="my-5"
|
|
cmsWidgetName="AlertNoShopsWidget"
|
|
v-if="displayNoShopsAlert"
|
|
alertClass="alert-warning" />
|
|
<appointmentTypeQuestion
|
|
v-model="selectedAppointmentType"
|
|
v-show="!displayNoShopsAlert"
|
|
:isServiceableMobile="isServiceableMobile"
|
|
:isServiceableInshop="isServiceableInshop"
|
|
ref="appointmentTypeQuestion"
|
|
groupName="appointmentTypeQuestion"
|
|
cmsWidgetName="AppointmentTypeQuestionWidget"
|
|
validationRules="option-required" />
|
|
<mobileLocationModalQuestions
|
|
customComponentId="mobileLocationQuestions"
|
|
v-if="selectedAppointmentType === 'Mobile'"
|
|
v-model="mobileLocationQuestions"
|
|
:mobileFeePart="mobileFeePart"
|
|
@updated-mobile-fee-part="setMobileFeePart"
|
|
@updated-serviceability="setServiceabilityDetails"
|
|
@updated-contains-military-base="setContainsMilitaryBase"
|
|
validationRules="mobile-location-required"
|
|
ref="mobileLocationQuestions"
|
|
linkWidgetName="MobileLocationLinkWidget"
|
|
modalWidgetName="MobileLocationModalWidget"
|
|
:onZipUpdateCallback="reloadShopData" />
|
|
<Transition name="fade" mode="out-in">
|
|
<shopQuestion
|
|
ref="shopQuestion"
|
|
v-show="isShopQuestionDisplayed"
|
|
v-model="selectedProviderNumber"
|
|
@providerSelected="onProviderSelected"
|
|
:serviceZipCode="zipCode"
|
|
:selectedAppointmentType="selectedAppointmentType"
|
|
:isDisplayed="isShopQuestionDisplayed"
|
|
cmsWidgetName="ShopQuestionWidget" />
|
|
</Transition>
|
|
<contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
|
|
<funnel-footer
|
|
cmsWidgetName="FunnelFooterWidget"
|
|
ref="funnelFooter"
|
|
:isForwardActionDisabled="!meta.valid || displayNoShopsAlert"
|
|
@back-clicked="backButtonAction"
|
|
@ForwardClicked="forwardButtonAction" />
|
|
</div>
|
|
</Form>
|
|
</template>
|
|
|
|
<script>
|
|
// Components
|
|
import alert from "@/ux-components/alert/alert";
|
|
import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question";
|
|
import mobileLocationModalQuestions from "@/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions";
|
|
import appointmentTypeQuestion from "@/layouts/service-location/appointment-type-question/appointment-type-question";
|
|
import shopQuestion from "@/layouts/service-location/shop-question/shop-question";
|
|
|
|
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 loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
|
|
import { Form } from "vee-validate";
|
|
import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
|
|
|
|
// Supporting files
|
|
import baseMixin from "@/mixins/base-mixin.js";
|
|
|
|
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
|
import { settleAllPromises } from "@/helpers/layout-helper";
|
|
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
|
|
import {
|
|
getPricedMobileFeePart,
|
|
getServiceabilityDetails,
|
|
} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
|
|
import store from "@/store";
|
|
|
|
// Validation
|
|
import { defineRule } from "vee-validate";
|
|
import { errorMessages } from "@/constants/error-messages";
|
|
|
|
// DEFINE VALIDATION RULES
|
|
defineRule("mobile-location-required", (value) => {
|
|
if (
|
|
value.addressQuestions.streetAddress == "" ||
|
|
value.addressQuestions.city == "" ||
|
|
value.addressQuestions.state == "" ||
|
|
value.addressQuestions.zipCode == "" ||
|
|
value.isVehicleProtected == null
|
|
) {
|
|
return errorMessages.MOBILE_LOCATION_REQUIRED;
|
|
}
|
|
return true;
|
|
});
|
|
|
|
const defaultProvider = {
|
|
providerNumber: null,
|
|
address: null,
|
|
city: null,
|
|
state: null,
|
|
zip: null,
|
|
};
|
|
|
|
export default {
|
|
name: "service-location",
|
|
data() {
|
|
return {
|
|
streetAddress: this.getServiceAddressFromStore(),
|
|
apartmentNumberOrBusinessName: "",
|
|
city: this.getServiceCityFromStore(),
|
|
state: this.getServiceStateFromStore(),
|
|
zipCode: this.getServiceZipCodeFromStore(),
|
|
isVehicleProtected: null,
|
|
isGlassServiceableInshop: null,
|
|
isRecalibrationServiceableInshop: null,
|
|
isGlassServiceableMobile: null,
|
|
isRecalibrationServiceableMobile: null,
|
|
selectedAppointmentType: this.getSelectedAppointmentType(),
|
|
selectedProvider: this.getSelectedProvider(),
|
|
selectedProviderNumber: this.getSelectedProvider().providerNumber,
|
|
mobileFeePart: null,
|
|
zipContainsMilitaryBase: false,
|
|
};
|
|
},
|
|
async beforeRouteEnter(to, from, next) {
|
|
// Call APIs
|
|
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
|
|
|
const serviceZipCode = store.getters.order.serviceLocation.zipCode;
|
|
const getZipCodeData = baseMixin.methods.getZipCodeData(serviceZipCode);
|
|
|
|
const serviceabilityDetailsPromise = getServiceabilityDetails(serviceZipCode);
|
|
|
|
const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode);
|
|
|
|
const shopQuestionInitialDataPromise = shopQuestion.methods.loadInitialData(serviceZipCode);
|
|
|
|
// Settle promises and get results
|
|
const promiseResultMap = [
|
|
{
|
|
resultKey: "cmsContent",
|
|
promise: cmsContentPromise,
|
|
},
|
|
{
|
|
resultKey: "mobileFeePart",
|
|
promise: mobileFeePartPromise,
|
|
},
|
|
{
|
|
resultKey: "serviceabilityDetails",
|
|
promise: serviceabilityDetailsPromise,
|
|
},
|
|
{
|
|
resultKey: "zipCodeData",
|
|
promise: getZipCodeData,
|
|
},
|
|
{
|
|
resultKey: "shopQuestionInitialData",
|
|
promise: shopQuestionInitialDataPromise,
|
|
},
|
|
];
|
|
|
|
const resultMap = await settleAllPromises(promiseResultMap);
|
|
|
|
// Call the "next" function to complete the transition to this page.
|
|
next((vm) => {
|
|
vm.setCmsContent(resultMap.cmsContent);
|
|
vm.setData(
|
|
resultMap.zipCodeData,
|
|
resultMap.serviceabilityDetails,
|
|
resultMap.mobileFeePart
|
|
);
|
|
vm.$refs.shopQuestion.initializeComponent(resultMap.shopQuestionInitialData);
|
|
});
|
|
},
|
|
computed: {
|
|
serviceZipCodeQuestion: {
|
|
get: function () {
|
|
return {
|
|
state: this.state,
|
|
zipCode: this.zipCode,
|
|
};
|
|
},
|
|
set: function (newValue) {
|
|
if (newValue.zipCode !== this.zipCode) {
|
|
this.resetMobileLocation();
|
|
this.selectedAppointmentType = null;
|
|
this.selectedProvider = defaultProvider;
|
|
}
|
|
|
|
this.state = newValue.state;
|
|
this.zipCode = newValue.zipCode;
|
|
|
|
this.$nextTick();
|
|
},
|
|
},
|
|
mobileLocationQuestions: {
|
|
get: function () {
|
|
return {
|
|
addressQuestions: {
|
|
streetAddress: this.streetAddress,
|
|
apartmentNumberOrBusinessName: this.apartmentNumberOrBusinessName,
|
|
city: this.city,
|
|
state: this.state,
|
|
zipCode: this.zipCode,
|
|
},
|
|
isVehicleProtected: this.isVehicleProtected,
|
|
};
|
|
},
|
|
set: function (newValue) {
|
|
this.streetAddress = newValue.addressQuestions.streetAddress;
|
|
this.apartmentNumberOrBusinessName =
|
|
newValue.addressQuestions.apartmentNumberOrBusinessName;
|
|
this.city = newValue.addressQuestions.city;
|
|
this.state = newValue.addressQuestions.state;
|
|
this.zipCode = newValue.addressQuestions.zipCode;
|
|
this.isVehicleProtected = newValue.isVehicleProtected;
|
|
|
|
if (newValue.zipCode !== this.zipCode) {
|
|
if (!this.selectedAppointmentType == "Mobile") {
|
|
this.selectedAppointmentType = null;
|
|
}
|
|
this.selectedProvider = defaultProvider;
|
|
}
|
|
},
|
|
},
|
|
isServiceableMobile() {
|
|
if (this.isRecalibrationServiceableMobile !== null) {
|
|
return this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile;
|
|
} else {
|
|
return this.isGlassServiceableMobile;
|
|
}
|
|
},
|
|
isServiceableInshop() {
|
|
if (this.isRecalibrationServiceableInshop !== null) {
|
|
return this.isGlassServiceableInshop && this.isRecalibrationServiceableInshop;
|
|
} else {
|
|
return this.isGlassServiceableInshop;
|
|
}
|
|
},
|
|
isShopQuestionDisplayed() {
|
|
return (
|
|
this.selectedAppointmentType === "Inshop" ||
|
|
this.selectedAppointmentType === "Dropoff"
|
|
);
|
|
},
|
|
// Specifically check for isRecalibrationServiceableMobile === false, not null or true.
|
|
requiresInshopRecalibration() {
|
|
return (
|
|
this.isServiceableInshop &&
|
|
this.isGlassServiceableMobile &&
|
|
this.isRecalibrationServiceableMobile === false
|
|
);
|
|
},
|
|
displayRecalibrationWarning() {
|
|
return this.requiresInshopRecalibration;
|
|
},
|
|
displayServiceableInshopOnly() {
|
|
return (
|
|
!this.displayRecalibrationWarning &&
|
|
this.isServiceableInshop &&
|
|
!this.isServiceableMobile
|
|
);
|
|
},
|
|
displayMilitaryZipAlert() {
|
|
return this.zipContainsMilitaryBase && this.isServiceableMobile;
|
|
},
|
|
displayServiceableMobileOnly() {
|
|
return this.isServiceableMobile && !this.isServiceableInshop;
|
|
},
|
|
displayNoShopsAlert() {
|
|
return !this.isServiceableInshop && !this.isServiceableMobile;
|
|
},
|
|
},
|
|
methods: {
|
|
arePagePrerequisitesValid() {
|
|
return (
|
|
store.getters.lineItems.supportingItems !== null &&
|
|
store.getters.order.serviceLocation.zipCode !== null &&
|
|
store.getters.payment.isInsurance !== null
|
|
);
|
|
},
|
|
setData(zipCodeData, serviceabilityDetails, mobileFeePart) {
|
|
if (zipCodeData) {
|
|
this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
|
|
}
|
|
|
|
if (serviceabilityDetails) {
|
|
this.setServiceabilityDetails(serviceabilityDetails);
|
|
}
|
|
|
|
if (mobileFeePart) {
|
|
this.mobileFeePart = mobileFeePart;
|
|
}
|
|
},
|
|
setContainsMilitaryBase(val) {
|
|
if (this.zipContainsMilitaryBase !== val) {
|
|
this.zipContainsMilitaryBase = val;
|
|
}
|
|
},
|
|
getServiceAddressFromStore() {
|
|
return store.getters.order.serviceLocation.address;
|
|
},
|
|
getServiceCityFromStore() {
|
|
return store.getters.order.serviceLocation.city;
|
|
},
|
|
getServiceStateFromStore() {
|
|
return store.getters.order.serviceLocation.state;
|
|
},
|
|
getServiceZipCodeFromStore() {
|
|
return store.getters.order.serviceLocation.zipCode;
|
|
},
|
|
getSelectedAppointmentType() {
|
|
return store.getters.order.serviceLocation.appointmentType;
|
|
},
|
|
getSelectedProvider() {
|
|
return store.getters.order.serviceLocation.provider ?? defaultProvider;
|
|
},
|
|
setMobileFeePart(mobileFeePart) {
|
|
this.mobileFeePart = mobileFeePart;
|
|
},
|
|
resetMobileLocation() {
|
|
this.streetAddress = "";
|
|
this.apartmentNumberOrBusinessName = "";
|
|
this.city = "";
|
|
|
|
this.isVehicleProtected = null;
|
|
},
|
|
setServiceabilityDetails(serviceabilityDetails) {
|
|
this.isGlassServiceableInshop = serviceabilityDetails.isGlassServiceableInshop;
|
|
this.isRecalibrationServiceableInshop =
|
|
serviceabilityDetails.isRecalibrationServiceableInshop;
|
|
this.isGlassServiceableMobile = serviceabilityDetails.isGlassServiceableMobile;
|
|
this.isRecalibrationServiceableMobile =
|
|
serviceabilityDetails.isRecalibrationServiceableMobile;
|
|
},
|
|
backButtonAction() {
|
|
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
|
|
},
|
|
forwardButtonAction() {
|
|
this.$router.navigateWithoutSaving(
|
|
this.navigationScenarios.SELECTED_LOCATION,
|
|
this.$route
|
|
);
|
|
},
|
|
openModalAction(modalName) {
|
|
this.$refs[modalName].openModal();
|
|
},
|
|
async reloadShopData() {
|
|
await this.$refs.shopQuestion.reloadShopData(this.zipCode);
|
|
},
|
|
onProviderSelected(selectedProvider) {
|
|
this.selectedProvider = selectedProvider;
|
|
},
|
|
},
|
|
components: {
|
|
alert,
|
|
serviceZipModalQuestion,
|
|
appointmentTypeQuestion,
|
|
mobileLocationModalQuestions,
|
|
funnelHeader,
|
|
funnelFooter,
|
|
funnelSubHeader,
|
|
Form,
|
|
loadingModal,
|
|
contentGroupModal,
|
|
shopQuestion,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.question-text {
|
|
& > span {
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|