823 lines
33 KiB
Vue
823 lines
33 KiB
Vue
<template>
|
|
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
|
<loadingModal ref="loadingModal" />
|
|
<div class="container-fluid page-container-grouped-styles">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6">
|
|
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6 col-xl-4 mt-4">
|
|
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
|
|
|
|
<serviceZipModalQuestion
|
|
editScreenReaderTextCmsWidgetName="ScreenReaderZipEditWidget"
|
|
v-model="serviceZipCodeQuestion"
|
|
ref="serviceZipCodeQuestion"
|
|
:carId="carId"
|
|
:isVehicleHeavyTruck="isVehicleHeavyTruck"
|
|
:mobileFeePart="mobileFeePart"
|
|
@updated-mobile-fee-part="setMobileFeePart"
|
|
@updated-recycle-fee-part="setRecycleFeePart"
|
|
@updated-serviceability="setServiceabilityDetails"
|
|
@updated-contains-military-base="setContainsMilitaryBase"
|
|
@updated-bill-to-account-number="setBillToAccountNumber"
|
|
linkWidgetName="ServiceZipLinkWidget"
|
|
modalWidgetName="ServiceZipModalWidget" />
|
|
|
|
<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" />
|
|
<alert
|
|
ref="alertMobileFeeFree"
|
|
class="my-5"
|
|
cmsWidgetName="AlertMobileFeeFreeWidget"
|
|
v-if="showMobileFreeAlert"
|
|
alertClass="alert-success" />
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center appointment-type">
|
|
<div class="col-md-6">
|
|
<appointmentTypeQuestion
|
|
v-model="selectedAppointmentType"
|
|
v-show="isAppointmentTypeDisplayed"
|
|
:isServiceableMobile="isServiceableMobile"
|
|
:isServiceableInshop="isServiceableInshop"
|
|
:isServiceableDropoff="isServiceableDropoff"
|
|
:isDisplayed="isAppointmentTypeDisplayed"
|
|
:mobileFeeApplies="mobileFeeApplies"
|
|
ref="appointmentTypeQuestion"
|
|
groupName="appointmentTypeQuestion"
|
|
cmsWidgetName="AppointmentTypeQuestionWidget"
|
|
validationRules="option-required" />
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6 col-xl-4">
|
|
<mobileLocationModalQuestions
|
|
customComponentId="mobileLocationQuestions"
|
|
v-if="selectedAppointmentType === 'Mobile'"
|
|
v-model="mobileLocationQuestions"
|
|
:mobileFeePart="mobileFeePart"
|
|
:mobileFeeApplies="mobileFeeApplies"
|
|
@updated-mobile-fee-part="setMobileFeePart"
|
|
@updated-recycle-fee-part="setRecycleFeePart"
|
|
@updated-serviceability="setServiceabilityDetails"
|
|
@updated-contains-military-base="setContainsMilitaryBase"
|
|
@updated-mobile-ctu="setCtuForMobile"
|
|
validationRules="mobile-location-required"
|
|
ref="mobileLocationQuestions"
|
|
linkWidgetName="MobileLocationLinkWidget"
|
|
modalWidgetName="MobileLocationModalWidget"
|
|
@setMobileLocationAndProceed="setMobileLocationQuestions" />
|
|
|
|
<shopQuestion
|
|
ref="shopQuestion"
|
|
v-show="isShopQuestionDisplayed"
|
|
v-model="selectedProvider"
|
|
:selectedAppointmentType="selectedAppointmentType"
|
|
:shopProviderData="shopProviderData"
|
|
:isDisplayed="isShopQuestionDisplayed"
|
|
cmsWidgetName="ShopQuestionWidget" />
|
|
|
|
<contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
|
|
|
|
<navbar
|
|
cmsWidgetName="FunnelFooterWidget"
|
|
ref="navbar"
|
|
:isForwardActionDisabled="!meta.valid || displayNoShopsAlert"
|
|
@back-clicked="backButtonAction"
|
|
@ForwardClicked="forwardButtonAction" />
|
|
</div>
|
|
</div>
|
|
</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 navbar from "@/fmg-components/nav-bar/nav-bar";
|
|
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 experimentMixin from "@/mixins/experiment-mixin.js";
|
|
import { experimentSettings } from "@/constants/experiments";
|
|
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
|
|
|
|
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
|
import { settleAllPromises } from "@/helpers/layout-helper";
|
|
import {
|
|
getPricedMobileFeePart,
|
|
getServiceabilityDetails,
|
|
getShopProviderData,
|
|
getZipCodeData,
|
|
} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
|
|
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
|
|
import { applicationConfig } from "@/constants/application-config";
|
|
import { Provider } from "@/layouts/service-location/classes/provider";
|
|
import { partNumberStrings } from "@/constants/part-number-strings";
|
|
|
|
import store from "@/store";
|
|
|
|
// Validation
|
|
import { defineRule } from "vee-validate";
|
|
import { errorMessages } from "@/constants/error-messages";
|
|
|
|
const MOBILE_FEE_PART_TYPE = "MOBILE FEE";
|
|
|
|
// DEFINE VALIDATION RULES
|
|
defineRule("mobile-location-required", (value) => {
|
|
if (
|
|
!value.addressQuestions.streetAddress ||
|
|
!value.addressQuestions.city ||
|
|
!value.addressQuestions.state ||
|
|
!value.addressQuestions.zipCode ||
|
|
!value.isVehicleProtected
|
|
) {
|
|
return errorMessages.MOBILE_LOCATION_REQUIRED;
|
|
}
|
|
return true;
|
|
});
|
|
|
|
export default {
|
|
name: "service-location",
|
|
data() {
|
|
return {
|
|
streetAddress: this.getServiceAddressFromStore(),
|
|
apartmentNumberOrBusinessName: this.getServiceAddress2FromStore(),
|
|
carId: this.getCarIdfromStore(),
|
|
city: this.getServiceCityFromStore(),
|
|
state: this.getServiceStateFromStore(),
|
|
zipCode: this.getServiceZipCodeFromStore(),
|
|
isVehicleHeavyTruck: this.getIsVehicleHeavyTruckFromStore(),
|
|
isVehicleProtected: this.getIsVehicleProtectedFromStore(),
|
|
isGlassServiceableInshop: null,
|
|
isRecalibrationServiceableInshop: null,
|
|
isGlassServiceableDropoff: null,
|
|
isRecalibrationServiceableDropoff: null,
|
|
isGlassServiceableMobile: null,
|
|
isRecalibrationServiceableMobile: null,
|
|
selectedAppointmentType: this.getSelectedAppointmentType(),
|
|
selectedProvider: this.getSelectedProvider(),
|
|
mobileFeePart: null,
|
|
recycleFeePart: null,
|
|
zipContainsMilitaryBase: false,
|
|
zipCodeCtu: null,
|
|
billToAccountNumber: null,
|
|
shopProviderData: null,
|
|
navigatingForward: false,
|
|
};
|
|
},
|
|
async beforeRouteEnter(to, from, next) {
|
|
// Call APIs
|
|
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
|
|
|
const serviceZipCode = store.getters.order.serviceLocation.zipCode;
|
|
const zipCodeDataPromise = getZipCodeData(serviceZipCode);
|
|
|
|
const serviceabilityDetailsPromise = getServiceabilityDetails(
|
|
serviceZipCode,
|
|
null,
|
|
"service-location"
|
|
);
|
|
|
|
const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode, "service-location");
|
|
|
|
const shopProviderDataPromise = getShopProviderData(serviceZipCode); // shopQuestion.methods.loadInitialData(serviceZipCode);
|
|
|
|
// Settle promises and get results
|
|
const promiseResultMap = [
|
|
{
|
|
resultKey: "cmsContent",
|
|
promise: cmsContentPromise,
|
|
},
|
|
{
|
|
resultKey: "zipCodeData",
|
|
promise: zipCodeDataPromise,
|
|
},
|
|
{
|
|
resultKey: "mobileFeePart",
|
|
promise: mobileFeePartPromise,
|
|
},
|
|
{
|
|
resultKey: "serviceabilityDetails",
|
|
promise: serviceabilityDetailsPromise,
|
|
},
|
|
{
|
|
resultKey: "shopProviderData",
|
|
promise: shopProviderDataPromise,
|
|
},
|
|
];
|
|
|
|
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,
|
|
resultMap.shopProviderData
|
|
);
|
|
});
|
|
},
|
|
computed: {
|
|
serviceZipCodeQuestion: {
|
|
get: function () {
|
|
return {
|
|
state: this.state,
|
|
zipCode: this.zipCode,
|
|
zipCodeCtu: this.zipCodeCtu,
|
|
};
|
|
},
|
|
set: function (newValue) {
|
|
if (newValue.zipCode !== this.zipCode) {
|
|
this.resetMobileLocation();
|
|
this.selectedAppointmentType = null;
|
|
this.selectedProvider = new Provider();
|
|
}
|
|
|
|
this.state = newValue.state;
|
|
this.zipCode = newValue.zipCode;
|
|
this.zipCodeCtu = newValue.zipCodeCtu;
|
|
|
|
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,
|
|
};
|
|
},
|
|
},
|
|
isServiceableMobile() {
|
|
if (this.isRecalibrationServiceableMobile !== null) {
|
|
return (
|
|
(this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile) ||
|
|
this.isMobileStaticRecalibrationApplicable
|
|
);
|
|
} else {
|
|
return this.isGlassServiceableMobile;
|
|
}
|
|
},
|
|
isMobileStaticRecalibrationApplicable() {
|
|
return (
|
|
this.displayMSR &&
|
|
this.mobileFeePart?.partNumber == partNumberStrings.MOBILE_STATIC_RECAL_FEE &&
|
|
(this.isCashItacNoComp || this.mobileFeePart?.isInsurable)
|
|
);
|
|
},
|
|
displayMSR() {
|
|
return (
|
|
experimentMixin.methods
|
|
.getSettingValue(experimentSettings.DISPLAY_MSR)
|
|
?.toLowerCase() === "true"
|
|
);
|
|
},
|
|
isCashItacNoComp() {
|
|
return !this.isInsurance || this.isITAC || this.isNoComp;
|
|
},
|
|
mobileFeeHasPrice() {
|
|
return (
|
|
this.mobileFeePart?.laborAmount > 0 ||
|
|
this.mobileFeePart?.sellingPrice > 0 ||
|
|
this.mobileFeePart?.kitPrice > 0
|
|
);
|
|
},
|
|
mobileFeeApplies() {
|
|
if (this.isMobileStaticRecalibrationApplicable && this.mobileFeeHasPrice) {
|
|
return this.isCashItacNoComp;
|
|
} else {
|
|
return this.mobileFeeHasPrice;
|
|
}
|
|
},
|
|
showMobileFreeAlert() {
|
|
if (this.isServiceableMobile && !this.isInsurance && !this.mobileFeeHasPrice) {
|
|
return true;
|
|
}
|
|
return false;
|
|
},
|
|
isServiceableInshop() {
|
|
if (this.isRecalibrationServiceableInshop !== null) {
|
|
return this.isGlassServiceableInshop && this.isRecalibrationServiceableInshop;
|
|
} else {
|
|
return this.isGlassServiceableInshop;
|
|
}
|
|
},
|
|
isServiceableDropoff() {
|
|
if (this.isRecalibrationServiceableDropoff !== null) {
|
|
return this.isGlassServiceableDropoff && this.isRecalibrationServiceableDropoff;
|
|
} else {
|
|
return this.isGlassServiceableDropoff;
|
|
}
|
|
},
|
|
isShopQuestionDisplayed() {
|
|
return (
|
|
this.selectedAppointmentType === "Inshop" ||
|
|
this.selectedAppointmentType === "Dropoff"
|
|
);
|
|
},
|
|
isAppointmentTypeDisplayed() {
|
|
return this.zipCode && !this.displayNoShopsAlert;
|
|
},
|
|
requiresInshopRecalibration() {
|
|
// Specifically check for isRecalibrationServiceableMobile === false, not null or true.
|
|
return (
|
|
this.isServiceableInshop &&
|
|
this.isGlassServiceableMobile &&
|
|
this.isRecalibrationServiceableMobile === false &&
|
|
!this.isMobileStaticRecalibrationApplicable
|
|
);
|
|
},
|
|
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;
|
|
},
|
|
recalibrationInformationModal() {
|
|
return this.$refs.recalibrationInformationModal;
|
|
},
|
|
isInsurance() {
|
|
return store.getters.payment.isInsurance;
|
|
},
|
|
isITAC() {
|
|
return store.getters.order.policy.isItac;
|
|
},
|
|
isNoComp() {
|
|
return store.getters.order.policy.isNoComp;
|
|
},
|
|
},
|
|
methods: {
|
|
arePagePrerequisitesValid() {
|
|
// insurance drops the recycle fee on replace orders so it won't be in supportingItems
|
|
if (store.getters.payment.isInsurance) {
|
|
if (
|
|
store.getters.payment.parentAccountNumber !==
|
|
applicationConfig.CASH_PARENT_ACCOUNT_NUMBER &&
|
|
store.getters.order.policy.policyNumber &&
|
|
store.getters.order.serviceLocation.zipCode
|
|
) {
|
|
return true;
|
|
} else {
|
|
// prettier-ignore
|
|
{
|
|
console.log(new Date() + "Insurance: servce-location invalid prereqs");
|
|
console.log(new Date() + "store.getters.payment.parentAccountNumber:" + store.getters.payment.parentAccountNumber);
|
|
console.log(new Date() + "store.getters.order.policy.policyNumber:" + store.getters.order.policy.policyNumber);
|
|
console.log(new Date() + "store.getters.order.serviceLocation.zipCode:" + store.getters.order.serviceLocation.zipCode);
|
|
}
|
|
|
|
return false;
|
|
}
|
|
} else {
|
|
if (
|
|
store.getters.lineItems.supportingItems &&
|
|
store.getters.order.serviceLocation.zipCode
|
|
) {
|
|
return true;
|
|
} else {
|
|
// prettier-ignore
|
|
{
|
|
console.log(new Date() + "Cash: servce-location invalid prereqs");
|
|
console.log(new Date() + "store.getters.lineItems.supportingItems:" + JSON.stringify(store.getters.lineItems.supportingItems));
|
|
console.log(new Date() + "store.getters.order.serviceLocation.zipCode:" + store.getters.order.serviceLocation.zipCode);
|
|
}
|
|
return false;
|
|
}
|
|
}
|
|
},
|
|
setData(zipCodeData, serviceabilityDetails, mobileFeePart, shopProviderData) {
|
|
if (zipCodeData) {
|
|
this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
|
|
this.zipCodeCtu = zipCodeData.zipCodeCtu;
|
|
}
|
|
|
|
if (serviceabilityDetails) {
|
|
this.setServiceabilityDetails(serviceabilityDetails);
|
|
}
|
|
|
|
if (mobileFeePart) {
|
|
this.mobileFeePart = mobileFeePart;
|
|
}
|
|
|
|
if (shopProviderData) {
|
|
this.shopProviderData = shopProviderData;
|
|
}
|
|
|
|
var gaLabel = this.GaLabels.NO;
|
|
if (this.isServiceableMobile) {
|
|
gaLabel = this.GaLabels.YES;
|
|
}
|
|
|
|
this.pushEventToGA(
|
|
this.GaCategories.APPOINTMENT,
|
|
this.GaActions.MOBILE_AVAILABLE,
|
|
gaLabel,
|
|
true
|
|
);
|
|
},
|
|
setContainsMilitaryBase(val) {
|
|
if (this.zipContainsMilitaryBase !== val) {
|
|
this.zipContainsMilitaryBase = val;
|
|
}
|
|
},
|
|
setBillToAccountNumber(val) {
|
|
this.billToAccountNumber = val;
|
|
},
|
|
setCtuForMobile(val) {
|
|
this.zipCodeCtu = val;
|
|
},
|
|
setMobileFeePart(mobileFeePart) {
|
|
this.mobileFeePart = mobileFeePart;
|
|
},
|
|
setRecycleFeePart(recycleFeePart) {
|
|
this.recycleFeePart = recycleFeePart;
|
|
},
|
|
//creating async function as the computed property can not directly handle asynchronous operations or promises.
|
|
async setMobileLocationQuestions(newValue) {
|
|
var newZipCode = newValue.addressQuestions.zipCode;
|
|
if (newZipCode !== this.zipCode) {
|
|
await getShopProviderData(newZipCode).then((result) => {
|
|
if (this.isServiceableMobile) {
|
|
this.shopProviderData = result.data;
|
|
this.selectedProvider = new Provider(
|
|
this.shopProviderData.mobileProviderNumber
|
|
);
|
|
}
|
|
});
|
|
}
|
|
if (this.isServiceableMobile) {
|
|
this.setMobileLocation(newValue);
|
|
//proceed to next page
|
|
this.forwardButtonAction();
|
|
} else {
|
|
this.closeModalAction("mobileLocationQuestions");
|
|
await getZipCodeData(newZipCode).then((zipCodeData) => {
|
|
this.serviceZipCodeQuestion = {
|
|
state: zipCodeData.state,
|
|
zipCode: newZipCode,
|
|
zipCodeCtu: zipCodeData.zipCodeCtu,
|
|
};
|
|
});
|
|
}
|
|
},
|
|
getCarIdfromStore() {
|
|
return store.getters.vehicle.carId;
|
|
},
|
|
getServiceAddressFromStore() {
|
|
return store.getters.order.serviceLocation.address;
|
|
},
|
|
getServiceAddress2FromStore() {
|
|
return store.getters.order.serviceLocation.address2;
|
|
},
|
|
getServiceCityFromStore() {
|
|
return store.getters.order.serviceLocation.city;
|
|
},
|
|
getServiceStateFromStore() {
|
|
return store.getters.order.serviceLocation.state;
|
|
},
|
|
getServiceZipCodeFromStore() {
|
|
return store.getters.order.serviceLocation.zipCode;
|
|
},
|
|
getIsVehicleHeavyTruckFromStore() {
|
|
return store.getters.order.vehicle?.isBigTruck ?? false;
|
|
},
|
|
getIsVehicleProtectedFromStore() {
|
|
return store.getters.order.serviceLocation.isVehicleProtected;
|
|
},
|
|
getSelectedAppointmentType() {
|
|
return store.getters.order.serviceLocation.appointmentType;
|
|
},
|
|
getSelectedProvider() {
|
|
return store.getters.order.serviceLocation.provider;
|
|
},
|
|
resetMobileLocation() {
|
|
this.streetAddress = "";
|
|
this.apartmentNumberOrBusinessName = "";
|
|
this.city = "";
|
|
|
|
this.isVehicleProtected = null;
|
|
},
|
|
setServiceabilityDetails(serviceabilityDetails) {
|
|
this.isGlassServiceableInshop = serviceabilityDetails.isGlassServiceableInshop;
|
|
this.isRecalibrationServiceableInshop =
|
|
serviceabilityDetails.isRecalibrationServiceableInshop;
|
|
this.isGlassServiceableDropoff = serviceabilityDetails.isGlassServiceableDropoff;
|
|
this.isRecalibrationServiceableDropoff =
|
|
serviceabilityDetails.isRecalibrationServiceableDropoff;
|
|
this.isGlassServiceableMobile = serviceabilityDetails.isGlassServiceableMobile;
|
|
this.isRecalibrationServiceableMobile =
|
|
serviceabilityDetails.isRecalibrationServiceableMobile;
|
|
},
|
|
setMobileLocation(mobileLocation) {
|
|
this.streetAddress = mobileLocation.addressQuestions.streetAddress;
|
|
this.apartmentNumberOrBusinessName =
|
|
mobileLocation.addressQuestions.apartmentNumberOrBusinessName;
|
|
this.city = mobileLocation.addressQuestions.city;
|
|
this.state = mobileLocation.addressQuestions.state;
|
|
this.zipCode = mobileLocation.addressQuestions.zipCode;
|
|
this.isVehicleProtected = mobileLocation.isVehicleProtected;
|
|
},
|
|
async reloadShopData(zipCode) {
|
|
await this.$refs.shopQuestion.reloadShopData(zipCode);
|
|
},
|
|
openRecalibrationInformationModal() {
|
|
this.recalibrationInformationModal.openModal();
|
|
},
|
|
backButtonAction() {
|
|
const payment = store.getters.order.payment;
|
|
if (
|
|
payment?.isInsurance &&
|
|
(payment?.insuranceCoverage?.isVerified ||
|
|
store.getters.order.referralNumber.length === 6)
|
|
) {
|
|
navigateToHeritageFunnel({
|
|
shouldSaveSession: false,
|
|
pageNameToLog: "service-location",
|
|
navType: "back",
|
|
});
|
|
} else {
|
|
this.$router.navigateWithoutSaving(
|
|
this.navigationScenarios.CLICKED_BACK,
|
|
this.$route
|
|
);
|
|
}
|
|
},
|
|
updateAndSaveIsMSRFeeApplicable() {
|
|
const isMSRFeeApplicable =
|
|
this.isMobileStaticRecalibrationApplicable &&
|
|
this.selectedAppointmentType == "Mobile";
|
|
this.dispatchStoreAction(
|
|
this.storeActions.SAVE_IS_MSR_FEE_APPLICABLE,
|
|
isMSRFeeApplicable
|
|
);
|
|
},
|
|
updateAndSaveSupportingItems() {
|
|
let supportingItems = store.getters.lineItems.supportingItems;
|
|
let shouldSaveSupportingItems = false;
|
|
|
|
supportingItems =
|
|
!supportingItems && this.isMobileStaticRecalibrationApplicable
|
|
? []
|
|
: supportingItems;
|
|
|
|
// for insurance orders, fees can get removed causing supportingitems to be null or empty
|
|
if (!supportingItems) {
|
|
return;
|
|
}
|
|
|
|
// update recyle fee price
|
|
if (this.recycleFeePart) {
|
|
const recycleFeeIndex = supportingItems.findIndex(
|
|
(item) => item.partNumber == partNumberStrings.RECYCLE_FEE
|
|
);
|
|
if (recycleFeeIndex >= 0) {
|
|
supportingItems[recycleFeeIndex].laborAmount = this.recycleFeePart.laborAmount;
|
|
supportingItems[recycleFeeIndex].sellingPrice =
|
|
this.recycleFeePart.sellingPrice;
|
|
supportingItems[recycleFeeIndex].kitPrice = this.recycleFeePart.kitPrice;
|
|
|
|
shouldSaveSupportingItems = true;
|
|
}
|
|
}
|
|
|
|
// if we have a mobile fee, then save/update supporting items
|
|
if (this.selectedAppointmentType == "Mobile") {
|
|
const mobileFeeIndex = supportingItems.findIndex(
|
|
(item) => item.partType == MOBILE_FEE_PART_TYPE
|
|
);
|
|
// If it already exists, update the price with latest data
|
|
if (mobileFeeIndex >= 0) {
|
|
supportingItems[mobileFeeIndex].laborAmount = this.mobileFeePart.laborAmount;
|
|
supportingItems[mobileFeeIndex].sellingPrice = this.mobileFeePart.sellingPrice;
|
|
supportingItems[mobileFeeIndex].kitPrice = this.mobileFeePart.kitPrice;
|
|
} else {
|
|
if (this.mobileFeePart !== null) supportingItems.push(this.mobileFeePart);
|
|
}
|
|
|
|
shouldSaveSupportingItems = true;
|
|
} else {
|
|
// if it's not a mobile, then make sure we remove any that may have been added
|
|
const removeMobileFeeIndex = supportingItems?.findIndex(
|
|
(item) => item.partType == MOBILE_FEE_PART_TYPE
|
|
);
|
|
|
|
if (removeMobileFeeIndex >= 0) {
|
|
supportingItems.splice(removeMobileFeeIndex, 1);
|
|
shouldSaveSupportingItems = true;
|
|
}
|
|
}
|
|
|
|
// Use shouldSaveSupportingItems flag to determine if we need to save supporting items. Prevents unnecessary/multiple saves
|
|
if (shouldSaveSupportingItems) {
|
|
this.dispatchStoreAction(
|
|
this.storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
|
|
supportingItems,
|
|
false
|
|
);
|
|
}
|
|
},
|
|
async forwardButtonAction() {
|
|
this.navigatingForward = true;
|
|
|
|
if (
|
|
this.selectedAppointmentType == AppointmentTypeStrings.MOBILE &&
|
|
this.selectedProvider &&
|
|
this.selectedProvider.address
|
|
) {
|
|
this.selectedProvider.address.streetAddress = null;
|
|
this.selectedProvider.address.city = null;
|
|
this.selectedProvider.address.state = null;
|
|
this.selectedProvider.address.zipCode = null;
|
|
this.selectedProvider.address.zipCodeCtu = null;
|
|
}
|
|
|
|
var ctu = this.zipCodeCtu;
|
|
if (this.selectedAppointmentType == AppointmentTypeStrings.IN_SHOP) {
|
|
// if we have a provider.zipCodeCtu that's different than the servicelocation.zipCodeCtu then they
|
|
// may have selected a shop in a different ctu. change the servicelocation zip/ctu if different
|
|
if (this.zipCodeCtu != this.selectedProvider.address.zipCodeCtu) {
|
|
ctu = this.selectedProvider.address.zipCodeCtu;
|
|
}
|
|
|
|
this.city = null;
|
|
this.streetAddress = null;
|
|
}
|
|
|
|
await this.dispatchStoreAction(
|
|
this.storeActions.SAVE_SERVICE_LOCATION,
|
|
{
|
|
address: this.streetAddress,
|
|
address2: this.apartmentNumberOrBusinessName,
|
|
city: this.city,
|
|
state: this.state,
|
|
zipCode: this.zipCode,
|
|
zipCodeCtu: ctu,
|
|
appointmentType: this.selectedAppointmentType,
|
|
isVehicleProtected: this.isVehicleProtected,
|
|
provider: {
|
|
providerNumber: this.selectedProvider?.providerNumber,
|
|
address: {
|
|
streetAddress: this.selectedProvider?.address?.streetAddress,
|
|
city: this.selectedProvider?.address?.city,
|
|
state: this.selectedProvider?.address?.state,
|
|
zipCode: this.selectedProvider?.address?.zipCode,
|
|
zipCodeCtu: this.selectedProvider?.address?.zipCodeCtu,
|
|
},
|
|
},
|
|
},
|
|
false
|
|
);
|
|
|
|
if (this.billToAccountNumber) {
|
|
this.dispatchStoreAction(
|
|
this.storeActions.SAVE_BILL_TO_ACCOUNT_NUMBER,
|
|
this.billToAccountNumber,
|
|
false
|
|
);
|
|
}
|
|
|
|
this.updateAndSaveSupportingItems();
|
|
this.updateAndSaveIsMSRFeeApplicable();
|
|
this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route);
|
|
},
|
|
openModalAction(modalName) {
|
|
this.$refs[modalName].openModal();
|
|
},
|
|
closeModalAction(modalName) {
|
|
this.$refs[modalName].closeModal();
|
|
},
|
|
},
|
|
watch: {
|
|
zipCode: {
|
|
handler(newValue) {
|
|
if (!this.navigatingForward) {
|
|
getShopProviderData(this.zipCode).then(async (result) => {
|
|
this.shopProviderData = result.data;
|
|
if (this.selectedAppointmentType === "Mobile") {
|
|
this.selectedProvider = new Provider(
|
|
this.shopProviderData.mobileProviderNumber
|
|
);
|
|
} else {
|
|
this.selectedProvider = new Provider();
|
|
}
|
|
});
|
|
}
|
|
},
|
|
},
|
|
selectedAppointmentType: {
|
|
handler(newValue) {
|
|
if (newValue === "Mobile") {
|
|
this.selectedProvider = new Provider(
|
|
this.shopProviderData.mobileProviderNumber
|
|
);
|
|
} else {
|
|
this.selectedProvider = new Provider();
|
|
}
|
|
},
|
|
},
|
|
},
|
|
components: {
|
|
alert,
|
|
serviceZipModalQuestion,
|
|
appointmentTypeQuestion,
|
|
mobileLocationModalQuestions,
|
|
funnelHeader,
|
|
navbar,
|
|
funnelSubHeader,
|
|
Form,
|
|
loadingModal,
|
|
contentGroupModal,
|
|
shopQuestion,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.appointment-type-question {
|
|
.button-question {
|
|
.col {
|
|
@include media-breakpoint-up(md) {
|
|
padding: 0 0.75rem;
|
|
}
|
|
@include media-breakpoint-up(xl) {
|
|
width: 33.3333333%;
|
|
flex: 0 0 auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.question-text {
|
|
& > span {
|
|
text-align: center;
|
|
color: $black;
|
|
}
|
|
}
|
|
</style>
|