+
+
// 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, defineRule } from "vee-validate";
+import { errorMessages } from "@/constants/error-messages";
import datePicker from "@/digital-components/date-picker/date-picker";
import locationAlerts from "@/layouts/schedule/location-alerts/location-alerts";
+import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
import textBlock from "@/digital-components/text-block/text-block";
// Supporting files
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import baseMixin from "@/mixins/base-mixin.js";
-import { storeActions } from "@/constants/store-actions";
-import { settleAllPromises } from "@/helpers/layout-helper";
-import { splitCopyOnCMSPlaceHolder } from "@/helpers/cms-content-helper";
-import {
- calcDaysBetweenDates,
- convertDateStringToDate,
- sumDateString,
-} from "@/layouts/schedule/helpers/schedule-helper";
+import experimentMixin from "@/mixins/experiment-mixin.js";
+import { experimentSettings } from "@/constants/experiments";
import {
AppointmentTypeStrings,
RouteCodeFlags,
PREMIUM_FEE_PART_TYPE,
PRICING_BY_DAY_PART_TYPE,
} from "@/constants/schedule-constants";
-import { DAYS_OF_WEEK } from "@/digital-components/date-picker/mixins/constants";
-import { errorMessages } from "@/constants/error-messages";
-import { required } from "@/helpers/validation-rules";
+
+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";
-import experimentMixin from "@/mixins/experiment-mixin.js";
-import { experimentSettings } from "@/constants/experiments";
+
+import { storeActions } from "@/constants/store-actions";
+import { splitCopyOnCMSPlaceHolder } from "@/helpers/cms-content-helper";
+import {
+ calcDaysBetweenDates,
+ convertDateStringToDate,
+ sumDateString,
+} from "@/layouts/schedule/helpers/schedule-helper";
+
+import { DAYS_OF_WEEK } from "@/digital-components/date-picker/mixins/constants";
+import { required } from "@/helpers/validation-rules";
import { getAmountDue, getPricingByDayPartWithPrice } from "@/helpers/pricing-helper.js";
import { getItemsWithoutRecalParts } from "@/helpers/recal-helper";
-import { partNumberStrings } from "@/constants/part-number-strings";
import { deepClone } from "@/helpers/object-helper";
import { debugLog } from "@/helpers/debug-log-helper";
// 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;
+});
defineRule("date-required", required(errorMessages.DATE_REQUIRED));
// Define constants
const TIME_SLOTS_CALL_DAYS_LIMIT = 34; // needs to be 34 for API limits (35 does not consistently work)
const NUMBER_OF_CALENDAR_ROWS_TO_SHOW_FOR_INITIAL_VIEW = 2;
+const MOBILE_FEE_PART_TYPE = "MOBILE FEE";
const getScheduleApiResponse = async (startDateString, endDateString, providerNumber) => {
const apiEndDateLimit = sumDateString(startDateString, TIME_SLOTS_CALL_DAYS_LIMIT);
@@ -237,7 +393,32 @@ export default {
showPricingByDay: null,
selectableDatesInshop: [],
selectableDatesMobile: [],
- isMobileSelected: false,
+
+ 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) {
@@ -277,17 +458,20 @@ export default {
const priceString = getAmountDue(lineItemsToBePriced, false); // pass the IncludeTax param as false
const priceStringIntegerRoundedDown = priceString?.split(".")[0]; // same method used as getDisplayPrice() in service-package-radio used on /quote
const pricingByDayBasePrice = parseInt(priceStringIntegerRoundedDown);
- const isMobileSelected =
- store.getters.order.serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE;
let includePricingByDayUpcharge = false;
+ let selectedAppointmentType = store.getters.order.serviceLocation.appointmentType;
// Check to see if date should be pre-selected
let preSelectedSlot = await store.getters.order.schedule;
- let preSelectedDate = preSelectedSlot ? preSelectedSlot.date : null;
- if (isMobileSelected && preSelectedDate) preSelectedDate += "-mobile";
- if (!preSelectedSlot.date || preSelectedSlot?.date?.length < 1) {
- preSelectedSlot = null;
- } else {
+ let preSelectedDate;
+
+ if (preSelectedSlot.date && preSelectedSlot.date.length > 0) {
+ preSelectedDate = preSelectedSlot.date;
+
+ if (selectedAppointmentType === AppointmentTypeStrings.MOBILE) {
+ preSelectedDate += "-mobile";
+ }
+
// Check to see if pre-selected date should have pricing by day upcharge
if (showPricingByDay) {
// is this preSelectedDate a higher priced pricingByDay day?
@@ -307,13 +491,24 @@ export default {
store.getters.order.serviceLocation.provider?.address?.zipCodeCtu
);
- // While Pricing By Day Experiment is active, using the updated datePicker
+ 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 shopProviderData = await getShopProviderData(serviceZipCode); // shopQuestion.methods.loadInitialData(serviceZipCode);
+ const providerNumber = shopProviderData?.data?.shopProviders[0]?.providerNumber;
+
const datePickerInitialDataPromise = await datePicker.methods.loadInitialData({
// setup config options for date-picker
selectableDatesSetting: "custom",
initialViewRowsToShow: NUMBER_OF_CALENDAR_ROWS_TO_SHOW_FOR_INITIAL_VIEW,
getSelectableDatesCallback: getScheduleApiResponse,
preSelectedDate: preSelectedDate,
+ providerNumber: providerNumber,
});
// Get pricingByDayUpcharge needed for Pricing By Day
@@ -363,16 +558,29 @@ export default {
resultKey: "premiumFeeWithPrice",
promise: premiumFeeWithPricePromise,
},
+ {
+ resultKey: "zipCodeData",
+ promise: zipCodeDataPromise,
+ },
+ {
+ resultKey: "mobileFeePart",
+ promise: mobileFeePartPromise,
+ },
+ {
+ resultKey: "serviceabilityDetails",
+ promise: serviceabilityDetailsPromise,
+ },
];
const resultMap = await settleAllPromises(promiseResultMap);
- const pricingByDayUpcharge = showPricingByDay
- ? await baseMixin.methods.getTotalLineItemPrice(
- resultMap.pricingByDayUpchargePart,
- false
- )
- : null;
+ const pricingByDayUpcharge =
+ showPricingByDay && resultMap.pricingByDayUpchargePart
+ ? await baseMixin.methods.getTotalLineItemPrice(
+ resultMap.pricingByDayUpchargePart,
+ false
+ )
+ : null;
const datePickerInitialData = resultMap.datePickerInitialData;
datePickerInitialData.pricingByDayBasePrice = pricingByDayBasePrice;
@@ -398,7 +606,14 @@ export default {
vm.pricingByDayBasePrice = pricingByDayBasePrice;
vm.pricingByDayUpcharge = pricingByDayUpcharge;
vm.showPricingByDay = showPricingByDay;
- vm.isMobileSelected = isMobileSelected;
+
+ vm.selectedAppointmentType = selectedAppointmentType;
+ vm.setData(
+ resultMap.zipCodeData,
+ resultMap.serviceabilityDetails,
+ resultMap.mobileFeePart,
+ shopProviderData.data
+ );
});
},
mounted() {
@@ -435,6 +650,212 @@ export default {
});
},
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() {
+ // temporary adjustment
+ return true;
+ // 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;
+ },
+
ChangeShopLinkText() {
return this.getCmsContent("ChangeShopLink", "Text");
},
@@ -442,15 +863,6 @@ export default {
// Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
},
- appointmentType() {
- // TODO - THIS HAS TO BE CHANGED. APPOINTMENT TYPE CAN NOW CHANGE ON THE FLY, NOT FROM STORE ANYMORE.
- // return this.$store.getters.order.serviceLocation.appointmentType;
- if (this.isMobileSelected) {
- return "Mobile";
- } else {
- return "InshopOrDropoff";
- }
- },
getServiceMinutesMin() {
return this.isMobileSelected
? this.selectableDatesMobile.estimatedServiceMinutesMinimum
@@ -480,39 +892,336 @@ export default {
methods: {
splitCopyOnCMSPlaceHolder,
arePagePrerequisitesValid() {
- const serviceLocation = store.getters.order.serviceLocation; // TODO - MAY NEED TO REMOVE THIS AS A PREREQ
-
- const serviceLocationPreReqs = serviceLocation.zipCode && serviceLocation.zipCodeCtu; // TODO - MAY NEED TO ADD IN SERVICE LOCATION PREREQS HERE TOO
-
const paymentInfo = store.getters.payment.isInsurance !== null;
-
const damageInfo =
store.getters.order.damage.isRepair ||
(store.getters.order.lineItems?.glassParts != null &&
store.getters.order.lineItems.glassParts.length > 0);
+ const parentAccountNumberInfo =
+ store.getters.payment.parentAccountNumber !==
+ applicationConfig.CASH_PARENT_ACCOUNT_NUMBER;
+ const policyNumberInfo = store.getters.order.policy.policyNumber;
+ const zipCodeInfo = store.getters.order.serviceLocation.zipCode;
+ const supportingItemsInfo = store.getters.lineItems.supportingItems;
- const preReqResult = serviceLocationPreReqs && paymentInfo && damageInfo;
+ // insurance drops the recycle fee on replace orders so it won't be in supportingItems
+ const insurancePreReqResult =
+ parentAccountNumberInfo &&
+ policyNumberInfo &&
+ zipCodeInfo &&
+ paymentInfo &&
+ damageInfo;
+ const cashPreReqResult =
+ supportingItemsInfo && zipCodeInfo && paymentInfo && damageInfo;
- // prettier-ignore
- {
+ const outputDebugLog = (preReqResult) => {
+ // prettier-ignore
debugLog("--- schedule.vue pagePrereqs start ---", null, !preReqResult);
- debugLog("store.getters.order.serviceLocation.zipCode:", serviceLocation.zipCode, !preReqResult);
- debugLog("store.getters.order.serviceLocation.zipCodeCtu:", serviceLocation.zipCodeCtu, !preReqResult);
- debugLog("store.getters.order.serviceLocation.appointmentType:", serviceLocation.appointmentType, !preReqResult);
- debugLog("store.getters.order.serviceLocation.provider.providerNumber:", serviceLocation.provider?.providerNumber, !preReqResult);
- debugLog("store.getters.payment.isInsurance:", store.getters.payment?.isInsurance, !preReqResult);
- debugLog("store.getters.order.damage.isRepair:", store.getters.order.damage?.isRepair, !preReqResult);
- debugLog("store.getters.order.lineItems.glassParts:", store.getters.order.lineItems?.glassParts, !preReqResult);
+ debugLog(
+ "store.getters.payment.isInsurance:",
+ store.getters.payment?.isInsurance,
+ !preReqResult
+ );
+ debugLog(
+ "store.getters.order.damage.isRepair:",
+ store.getters.order.damage?.isRepair,
+ !preReqResult
+ );
+ debugLog(
+ "store.getters.order.lineItems.glassParts:",
+ store.getters.order.lineItems?.glassParts,
+ !preReqResult
+ );
+ debugLog(
+ "store.getters.payment.parentAccountNumber:",
+ store.getters.payment.parentAccountNumber,
+ !preReqResult
+ );
+ debugLog(
+ "store.getters.order.policy.policyNumber:",
+ store.getters.order.policy.policyNumber,
+ !preReqResult
+ );
+ debugLog(
+ "store.getters.order.serviceLocation.zipCode:",
+ store.getters.order.serviceLocation.zipCode,
+ !preReqResult
+ );
+ debugLog(
+ "store.getters.lineItems.supportingItems:",
+ store.getters.lineItems.supportingItems,
+ !preReqResult
+ );
debugLog("--- schedule.vue pagePrereqs end ---", null, !preReqResult);
+ };
+
+ if (store.getters.payment.isInsurance) {
+ outputDebugLog(insurancePreReqResult);
+ return insurancePreReqResult;
+ } else {
+ outputDebugLog(cashPreReqResult);
+ return cashPreReqResult;
+ }
+ },
+
+ 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();
+ },
+ 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
+ );
+ }
+ },
+ 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;
+ }
}
- return preReqResult;
},
async getMoreScheduleData(startDate, endDate) {
// called only when "View more dates" is clicked; not on initial page load
const moreShopTimeSlots = await getScheduleApiResponse(
startDate,
endDate,
- this.$store.getters.order.serviceLocation.provider.providerNumber
+ this.selectedProvider.providerNumber
);
// ADD API CALL RESULTS TO EXISTING DATE DATA
@@ -532,9 +1241,7 @@ export default {
getSelectedDate() {
let isMobileSelected = this.isMobileSelected;
if (isMobileSelected === undefined) {
- isMobileSelected =
- store.getters.order.serviceLocation.appointmentType ===
- AppointmentTypeStrings.MOBILE;
+ isMobileSelected = this.selectedAppointmentType === AppointmentTypeStrings.MOBILE;
}
let storedDate = store.getters.order.schedule.date;
if (isMobileSelected) storedDate += "-mobile";
@@ -570,7 +1277,7 @@ export default {
timeSlotInfo.timeSlot.date
)}`;
- if (this.appointmentType === AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF) {
+ if (this.selectedAppointmentType === AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF) {
if (
!timeSlotInfo.timeSlot.routeCode.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)
) {
@@ -579,7 +1286,7 @@ export default {
)}`;
}
} else if (
- this.appointmentType === AppointmentTypeStrings.MOBILE &&
+ this.selectedAppointmentType === AppointmentTypeStrings.MOBILE &&
!timeSlotInfo.isPremiumAppointment
) {
navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
@@ -612,13 +1319,80 @@ export default {
}
},
backButtonAction() {
- this.$router.navigateWithoutSaving(
- this.navigationScenarios.CLICKED_BACK,
- this.pageName
- );
+ 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
+ );
+ }
},
- forwardButtonAction() {
- // TODO - WILL NEED TO SAVE THE APPOINTMENT TYPE ALSO (AND ANYTHING ELSE THAT SERVICE-LOCATION DID TOO)
+ 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();
+
this.updateSupportingItems();
if (this.displayWaitList) {
@@ -677,10 +1451,18 @@ export default {
);
}
- this.$router.navigateWithSaving(
- this.navigationScenarios.CLICKED_FORWARD,
- this.pageName
- );
+ 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
+ );
+ }
},
setDisplayWaitList() {
if (
@@ -688,7 +1470,7 @@ export default {
experimentSettings.DISPLAY_WAITLIST,
"true"
) &&
- this.selectableDatesInshop.days[0] && // TODO - ASK BUSINESS... WHAT LOGIC SHOULD WE USE HERE FOR WHEN TO DISPLAY THE WAIT LIST?
+ this.selectableDatesInshop.days[0] &&
this.selectableDatesMobile.days[0]
) {
const dateString = this.isMobileSelected
@@ -744,7 +1526,7 @@ export default {
// if we have a premium fee(early bird), then save/update supporting items
if (
- this.appointmentType === AppointmentTypeStrings.MOBILE &&
+ this.selectedAppointmentType === AppointmentTypeStrings.MOBILE &&
this.selectedTimeSlotInfo?.isPremiumAppointment
) {
const premiumFeeIndex = supportingItems.findIndex(
@@ -798,6 +1580,35 @@ export default {
},
},
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, oldValue) {
+ if (newValue === "Mobile") {
+ this.selectedProvider = new Provider(
+ this.shopProviderData.mobileProviderNumber
+ );
+ this.isMobileSelected = true;
+ } else {
+ this.selectedProvider = this.shopProviderData.shopProviders[0];
+ }
+ },
+ },
+
selectedDate(newValue, oldValue) {
// Clear time slot selection if date selected changes
if (newValue !== oldValue) {
@@ -827,6 +1638,13 @@ export default {
datePicker,
locationAlerts,
textBlock,
+
+ alert,
+ serviceZipModalQuestion,
+ appointmentTypeQuestion,
+ contentGroupModal,
+ shopQuestionPopup,
+ buttonQuestion,
},
};
@@ -861,6 +1679,10 @@ export default {
.change-location a {
font-family: UrbanistSemibold;
}
+ .date-picker-wrapper {
+ border-top: 1px solid $gray-500;
+ margin-top: 1.5rem;
+ }
.time-slots-question {
padding: 0 0.75rem;
}
diff --git a/src/layouts/service-location/appointment-type-question/appointment-type-question.spec.js b/src/layouts/service-location/appointment-type-question/appointment-type-question.spec.js
index 23435a8f7..102584b79 100644
--- a/src/layouts/service-location/appointment-type-question/appointment-type-question.spec.js
+++ b/src/layouts/service-location/appointment-type-question/appointment-type-question.spec.js
@@ -59,7 +59,7 @@ afterEach(() => {
});
describe("appointment-type-question.vue", () => {
- it("Should display all options if in-shop, mobile, and dropoff are available", async () => {
+ it("Should display all options if in-shop and mobile are available", async () => {
// Arrange/Act
const { wrapper } = setupMocks({
mixins: [mockMixin],
@@ -67,7 +67,6 @@ describe("appointment-type-question.vue", () => {
cmsWidgetName: cmsWidgetName,
isServiceableInshop: true,
isServiceableMobile: true,
- isServiceableDropoff: true,
},
mountOptions: {
attachTo: document.body,
@@ -90,13 +89,6 @@ describe("appointment-type-question.vue", () => {
SubWidgetName: "",
Text: "In-shop",
},
- {
- AnswerImageUrl: "",
- Name: "Dropoff",
- SubText: "",
- SubWidgetName: "",
- Text: "Drop-off",
- },
]);
});
@@ -108,7 +100,6 @@ describe("appointment-type-question.vue", () => {
cmsWidgetName: cmsWidgetName,
isServiceableInshop: true,
isServiceableMobile: false,
- isServiceableDropoff: false,
},
mountOptions: {
attachTo: document.body,
@@ -127,74 +118,6 @@ describe("appointment-type-question.vue", () => {
]);
});
- it("Should display only the In-Shop and Drop-Off answers when mobile service is not available", async () => {
- // Arrange/Act
- const { wrapper } = setupMocks({
- mixins: [mockMixin],
- props: {
- cmsWidgetName: cmsWidgetName,
- isServiceableInshop: true,
- isServiceableMobile: false,
- isServiceableDropoff: true,
- },
- mountOptions: {
- attachTo: document.body,
- },
- });
-
- // Assert
- expect(wrapper.vm.answersToDisplay).toEqual([
- {
- AnswerImageUrl: "",
- Name: "Inshop",
- SubText: "",
- SubWidgetName: "",
- Text: "In-shop",
- },
- {
- AnswerImageUrl: "",
- Name: "Dropoff",
- SubText: "",
- SubWidgetName: "",
- Text: "Drop-off",
- },
- ]);
- });
-
- it("Should display only the In-Shop and Drop-Off answers when mobile service is not available", async () => {
- // Arrange/Act
- const { wrapper } = setupMocks({
- mixins: [mockMixin],
- props: {
- cmsWidgetName: cmsWidgetName,
- isServiceableInshop: true,
- isServiceableMobile: false,
- isServiceableDropoff: true,
- },
- mountOptions: {
- attachTo: document.body,
- },
- });
-
- // Assert
- expect(wrapper.vm.answersToDisplay).toEqual([
- {
- AnswerImageUrl: "",
- Name: "Inshop",
- SubText: "",
- SubWidgetName: "",
- Text: "In-shop",
- },
- {
- AnswerImageUrl: "",
- Name: "Dropoff",
- SubText: "",
- SubWidgetName: "",
- Text: "Drop-off",
- },
- ]);
- });
-
it("Should display only the Mobile answer when only mobile service is available", async () => {
// Arrange/Act
const { wrapper } = setupMocks({
@@ -203,7 +126,6 @@ describe("appointment-type-question.vue", () => {
cmsWidgetName: cmsWidgetName,
isServiceableInshop: false,
isServiceableMobile: true,
- isServiceableDropoff: false,
},
mountOptions: {
attachTo: document.body,
@@ -221,46 +143,6 @@ describe("appointment-type-question.vue", () => {
},
]);
});
- it("Should not display Drop off answer when it is repair order", async () => {
- // Arrange/Act
-
- store.getters = {
- damage: {
- isRepair: true,
- },
- };
-
- const { wrapper } = setupMocks({
- mixins: [mockMixin],
- props: {
- cmsWidgetName: cmsWidgetName,
- isServiceableInshop: true,
- isServiceableMobile: true,
- isServiceableDropoff: true,
- },
- mountOptions: {
- attachTo: document.body,
- },
- });
-
- // Assert
- expect(wrapper.vm.answersToDisplay).toEqual([
- {
- AnswerImageUrl: "",
- Name: "Mobile",
- SubText: "",
- SubWidgetName: "",
- Text: "Mobile",
- },
- {
- AnswerImageUrl: "",
- Name: "Inshop",
- SubText: "",
- SubWidgetName: "",
- Text: "In-shop",
- },
- ]);
- });
it("Should display no answers if neither in-shop nor mobile service are available", async () => {
// Arrange/Act
@@ -270,7 +152,6 @@ describe("appointment-type-question.vue", () => {
cmsWidgetName: cmsWidgetName,
isServiceableInshop: false,
isServiceableMobile: false,
- isServiceableDropoff: false,
},
mountOptions: {
attachTo: document.body,
diff --git a/src/layouts/service-location/appointment-type-question/appointment-type-question.vue b/src/layouts/service-location/appointment-type-question/appointment-type-question.vue
index 4e28e0926..5189a15a4 100644
--- a/src/layouts/service-location/appointment-type-question/appointment-type-question.vue
+++ b/src/layouts/service-location/appointment-type-question/appointment-type-question.vue
@@ -33,7 +33,6 @@ export default {
cmsWidgetName: String,
isServiceableMobile: Boolean,
isServiceableInshop: Boolean,
- isServiceableDropoff: Boolean,
mobileFeeApplies: Boolean,
labelBold: {
type: Boolean,
@@ -52,16 +51,13 @@ export default {
answersToDisplay() {
const shouldShowMobile = this.isServiceableMobile;
const shouldShowInshop = this.isServiceableInshop;
- const shouldShowDropoff =
- this.isServiceableDropoff && !this.$store.getters.damage.isRepair;
const zipCode = this.zipCode;
var answers = this.answersFromCms
? this.answersFromCms.filter((answer) => {
return (
(answer.Name == AppointmentTypeStrings.IN_SHOP && shouldShowInshop) ||
- (answer.Name == AppointmentTypeStrings.MOBILE && shouldShowMobile) ||
- (answer.Name == AppointmentTypeStrings.DROP_OFF && shouldShowDropoff)
+ (answer.Name == AppointmentTypeStrings.MOBILE && shouldShowMobile)
);
})
: [];
@@ -87,9 +83,7 @@ export default {
return this.isServiceableMobile && !this.isServiceableInshop;
},
isInshopOnly() {
- return (
- this.isServiceableInshop && !this.isServiceableMobile && !this.isServiceableDropoff
- );
+ return this.isServiceableInshop && !this.isServiceableMobile;
},
},
watch: {
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index 22e17e3b7..3171ea8d9 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -123,8 +123,8 @@ $body-color: $gray-600;
//Fonts
$font-family-sans-serif: UrbanistRegular, Arial, Helvetica, sans-serif;
-$font-family-monospace:
- UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+$font-family-monospace: UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+ monospace;
// stylelint-enable value-keyword-case
$font-family-base: $font-family-sans-serif;
$font-family-code: $font-family-monospace;