961 lines
38 KiB
Vue
961 lines
38 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"
|
|
:zipCode="zipCode"
|
|
ref="appointmentTypeQuestion"
|
|
groupName="appointmentTypeQuestion"
|
|
cmsWidgetName="AppointmentTypeQuestionWidget"
|
|
validationRules="option-required"
|
|
labelBold="true" />
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6 col-xl-4">
|
|
<button-question
|
|
v-if="selectedAppointmentType == appointmentTypeStrings.IN_SHOP"
|
|
class="shop-question-button"
|
|
ref="buttonQuestion"
|
|
:answers="selectedShopAnswer"
|
|
:modelValue="selectedProvider?.providerNumber"
|
|
:isMultiSelect="false"
|
|
:readonly="true"
|
|
:questionText="questionText"
|
|
buttonTypeString="shopListButton"
|
|
:buttonTypeObject="shopListButton"
|
|
groupName="chooseShop"
|
|
textPosition="text-start" />
|
|
<div class="text-center">
|
|
<textBlock
|
|
v-if="mobileFeeApplies && isMobileSelected"
|
|
:customText="mobileFeeText"
|
|
cmsWidgetName="MobileFeeDisclaimerWidget"
|
|
typeStyle="caption"
|
|
class="ps-4 pe-4 mt-4" />
|
|
</div>
|
|
<shopQuestionPopup
|
|
modalWidgetName="ShopQuestionPopupWidget"
|
|
:selectedAppointmentType="selectedAppointmentType"
|
|
:modelValue="{
|
|
zipCode: zipCode,
|
|
providerNumber: selectedProvider?.providerNumber,
|
|
}"
|
|
:preselectedProviderNumber="selectedProvider?.providerNumber"
|
|
:shopProviderData="shopProviderData"
|
|
:isServiceableInshop="isServiceableInshop"
|
|
@updated-serviceability="setServiceabilityDetails"
|
|
@shop-selected="onShopSelected"
|
|
@update:modelValue="onShopModelUpdated"
|
|
@updated-zipcode-ctu="setZipcodeCtu"
|
|
@update-shop-provider-data="shopProviderData = $event"
|
|
:zipCode="zipCode"
|
|
:isDisplayed="isShopQuestionDisplayed"
|
|
cmsWidgetName="YourSafeliteShopWidget" />
|
|
|
|
<contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
|
|
|
|
<navbar
|
|
cmsWidgetName="FunnelFooterWidget"
|
|
ref="navbar"
|
|
:isForwardActionDisabled="!meta.valid || isForwardActionDisabled"
|
|
@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 appointmentTypeQuestion from "@/layouts/service-location/appointment-type-question/appointment-type-question";
|
|
import shopQuestion from "@/layouts/service-location/shop-question/shop-question";
|
|
import shopQuestionPopup from "@/layouts/service-location/shop-question/shop-question-popup";
|
|
import buttonQuestion from "@/digital-components/button-question/button-question.vue";
|
|
import shopListButton from "@/layouts/service-location/shop-question/shop-list-button/shop-list-button";
|
|
import { getAvailabilityRating } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
|
|
|
|
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";
|
|
import textBlock from "@/digital-components/text-block/text-block";
|
|
|
|
// 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) => {
|
|
const addressQuestionsValues = Object.values(
|
|
[
|
|
value.addressQuestions.streetAddress,
|
|
value.addressQuestions.city,
|
|
value.isVehicleProtected,
|
|
] || {}
|
|
);
|
|
const filledFields = addressQuestionsValues.filter(
|
|
(val) => val !== null && val !== undefined && val !== ""
|
|
);
|
|
if (
|
|
value.isMobileSelected &&
|
|
filledFields.length > 0 &&
|
|
filledFields.length < addressQuestionsValues.length
|
|
) {
|
|
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,
|
|
isMobileAddressValid: true,
|
|
shopListButton: shopListButton,
|
|
};
|
|
},
|
|
async beforeRouteEnter(to, from, next) {
|
|
// Call APIs
|
|
const cmsContentPromise = fetchCmsContentForPage(to.name);
|
|
|
|
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();
|
|
},
|
|
},
|
|
isMobileSelected() {
|
|
return this.selectedAppointmentType == AppointmentTypeStrings.MOBILE;
|
|
},
|
|
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;
|
|
}
|
|
},
|
|
mobileFeeText() {
|
|
const cmsContentText = this.getCmsContent("MobileFeeDisclaimerWidget", "Text");
|
|
return cmsContentText.replaceAll("{custom:mobileFee}", this.mobileFee);
|
|
},
|
|
mobileFee() {
|
|
if (!this.mobileFeePart) {
|
|
return 0;
|
|
}
|
|
return (
|
|
this.mobileFeePart.laborAmount +
|
|
this.mobileFeePart.sellingPrice +
|
|
this.mobileFeePart.kitPrice
|
|
);
|
|
},
|
|
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;
|
|
},
|
|
isForwardActionDisabled() {
|
|
return this.displayNoShopsAlert || !this.isMobileAddressValid;
|
|
},
|
|
additionalButtonData() {
|
|
const startDate = new Date();
|
|
const endDate = new Date();
|
|
endDate.setDate(startDate.getDate() + 6);
|
|
|
|
const formattedStartDate = startDate.toISOString().split("T")[0];
|
|
const formattedEndDate = endDate.toISOString().split("T")[0];
|
|
|
|
return {
|
|
availabilityRatingCallback: getAvailabilityRating,
|
|
startDate: formattedStartDate,
|
|
endDate: formattedEndDate,
|
|
shopAppointmentType: this.selectedAppointmentType,
|
|
};
|
|
},
|
|
selectedShopAnswer() {
|
|
const toTitleCase = (str) => {
|
|
if (!str) return "";
|
|
return str.replace(/\w\S*/g, function (txt) {
|
|
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
|
|
});
|
|
};
|
|
|
|
if (this.selectedProvider && this.selectedProvider.address) {
|
|
const provider = this.shopProviderData?.shopProviders?.find(
|
|
(p) => p.providerNumber === this.selectedProvider?.providerNumber
|
|
);
|
|
const streetAddress = toTitleCase(this.selectedProvider.address.streetAddress);
|
|
const city = toTitleCase(this.selectedProvider.address.city);
|
|
const state = this.selectedProvider.address.state;
|
|
const zipCode = this.selectedProvider.address.zipCode;
|
|
const distanceInMiles = provider ? Math.round(provider.distanceInMiles * 2) / 2 : 0;
|
|
|
|
return [
|
|
{
|
|
buttonLabel: `${city}`,
|
|
buttonLabelSubCopy: `${distanceInMiles} mi`,
|
|
buttonBodyCopy: `${streetAddress}, ${city}, ${state} ${zipCode}`,
|
|
additionalButtonData: this.additionalButtonData,
|
|
value: this.selectedProvider.providerNumber,
|
|
},
|
|
];
|
|
}
|
|
return [];
|
|
},
|
|
questionText() {
|
|
return this.getCmsContent("YourSafeliteShopWidget", "QuestionText");
|
|
},
|
|
appointmentTypeStrings() {
|
|
return AppointmentTypeStrings;
|
|
},
|
|
},
|
|
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;
|
|
},
|
|
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;
|
|
},
|
|
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.pageName
|
|
);
|
|
}
|
|
},
|
|
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;
|
|
var ctu = this.zipCodeCtu;
|
|
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;
|
|
} else {
|
|
if (this.zipCodeCtu != this.selectedProvider.address.zipCodeCtu) {
|
|
ctu = this.selectedProvider.address.zipCodeCtu;
|
|
}
|
|
this.resetMobileLocation();
|
|
}
|
|
|
|
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();
|
|
|
|
//mocked schedule and should be clear when implement schedule page.
|
|
this.dispatchStoreAction(
|
|
this.storeActions.SAVE_SCHEDULE,
|
|
this.getTimeSlotInfo(),
|
|
false
|
|
);
|
|
|
|
if (this.selectedAppointmentType == AppointmentTypeStrings.MOBILE) {
|
|
//navigate to mobile details page
|
|
this.$router.navigateWithSaving(
|
|
this.navigationScenarios.CLICKED_FORWARD_WITH_MOBILE_SERVICE,
|
|
this.pageName
|
|
);
|
|
} else {
|
|
this.$router.navigateWithSaving(
|
|
this.navigationScenarios.CLICKED_FORWARD,
|
|
this.pageName
|
|
);
|
|
}
|
|
},
|
|
getTimeSlotInfo() {
|
|
// Get the current date
|
|
const currentDate = new Date();
|
|
|
|
// Add 10 days to the current date
|
|
currentDate.setDate(currentDate.getDate() + 10);
|
|
|
|
// Format the date as yyyy-mm-dd
|
|
const year = currentDate.getFullYear();
|
|
const month = String(currentDate.getMonth() + 1).padStart(2, "0");
|
|
const day = String(currentDate.getDate()).padStart(2, "0");
|
|
|
|
const formattedDate = `${year}-${month}-${day}`;
|
|
|
|
return {
|
|
date: formattedDate,
|
|
endTime: "12:00",
|
|
jobMaxMinutes: "180",
|
|
jobMinMinutes: "120",
|
|
routeCode: "3357I-03357-M-I*20988*AM",
|
|
startTime: "08:00",
|
|
};
|
|
},
|
|
onShopSelected(providerObject) {
|
|
const current = this.shopProviderData?.shopProviders?.find(
|
|
(p) => p.providerNumber === this.selectedProvider?.providerNumber
|
|
);
|
|
if (current) {
|
|
this.selectedProvider = current;
|
|
}
|
|
|
|
let provider = this.shopProviderData?.shopProviders?.find(
|
|
(p) => p.providerNumber === providerObject?.providerNumber
|
|
);
|
|
if (!provider && this.shopProviderData?.shopProviders?.length > 0) {
|
|
provider = this.shopProviderData.shopProviders[0];
|
|
}
|
|
this.selectedProvider = provider;
|
|
if (provider && provider.address) {
|
|
this.zipCode = provider.address.zipCode;
|
|
this.state = provider.address.state;
|
|
}
|
|
if (
|
|
!this.selectedProvider ||
|
|
!this.shopProviderData?.shopProviders?.some(
|
|
(p) => p.providerNumber === this.selectedProvider?.providerNumber
|
|
)
|
|
) {
|
|
this.selectedProvider = this.shopProviderData?.shopProviders?.[0];
|
|
}
|
|
if (providerObject && providerObject.address) {
|
|
this.zipCode = providerObject.address.zipCode;
|
|
this.state = providerObject.address.state;
|
|
}
|
|
},
|
|
setZipcodeCtu(zipcodeCtu) {
|
|
this.zipCodeCtu = zipcodeCtu;
|
|
},
|
|
onShopModelUpdated(newModel) {
|
|
if (newModel.zipCode) {
|
|
this.zipCode = newModel.zipCode;
|
|
}
|
|
if (newModel.zipCodeCtu) {
|
|
this.zipCodeCtu = newModel.zipCodeCtu;
|
|
}
|
|
if (newModel.state) {
|
|
this.state = newModel.state;
|
|
}
|
|
if (this.shopProviderData && newModel.selectedProviderNumber) {
|
|
const provider = this.shopProviderData.shopProviders.find(
|
|
(p) => p.providerNumber === newModel.selectedProviderNumber
|
|
);
|
|
if (provider) {
|
|
this.selectedProvider = provider;
|
|
}
|
|
}
|
|
},
|
|
},
|
|
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.isMobileAddressValid = true;
|
|
}
|
|
});
|
|
}
|
|
},
|
|
},
|
|
selectedAppointmentType: {
|
|
handler(newValue) {
|
|
if (newValue === "Mobile") {
|
|
this.selectedProvider = new Provider(
|
|
this.shopProviderData.mobileProviderNumber
|
|
);
|
|
} else {
|
|
this.selectedProvider = this.shopProviderData.shopProviders[0];
|
|
}
|
|
},
|
|
},
|
|
},
|
|
components: {
|
|
alert,
|
|
serviceZipModalQuestion,
|
|
appointmentTypeQuestion,
|
|
funnelHeader,
|
|
navbar,
|
|
funnelSubHeader,
|
|
Form,
|
|
loadingModal,
|
|
contentGroupModal,
|
|
shopQuestionPopup,
|
|
buttonQuestion,
|
|
textBlock,
|
|
},
|
|
};
|
|
</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;
|
|
}
|
|
}
|
|
.shop-question-button .list-button-content {
|
|
background: $blue-100 !important;
|
|
box-shadow: 0 0 0 1px $primary !important;
|
|
}
|
|
</style>
|