Merge remote-tracking branch 'origin/feature/CASH-816' into feature/CASH-816
This commit is contained in:
Johnny shultz
commit
78b64929ce
16 changed files with 3241 additions and 122 deletions
|
|
@ -31,6 +31,9 @@ module.exports = {
|
|||
"!src/layouts/payment-pia-return/*.vue", // Temp test exclusion while in development
|
||||
"!src/layouts/insurance/*.vue", // Temp test exclusion while in development
|
||||
"!src/layouts/insurance-company/*.vue", // Temp test exclusion while in development
|
||||
|
||||
"!src/**/*-june-2025.vue", // Exclude these temporary files for CASH-845 project
|
||||
|
||||
"!src/layouts/insurance-company/insurance-company-question/*.vue", // Temp test exclusion while in development
|
||||
"!src/experiment-components/*.vue",
|
||||
// END
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ body {
|
|||
padding: 8px;
|
||||
}
|
||||
body h3 {
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
}
|
||||
body .validation-info {
|
||||
display: none;
|
||||
|
|
@ -35,7 +35,7 @@ body .form-group {
|
|||
body .headerlinecontainer .headerline1 {
|
||||
font-size: 20px;
|
||||
line-height: 32px;
|
||||
font-weight: 500;
|
||||
font-weight: 400;
|
||||
margin: 24px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -51,6 +51,8 @@ body select {
|
|||
font-size: 16px;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
font-family: Urbanist, Arial, Helvetica, sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
body input:focus, body input:focus-visible,
|
||||
body select:focus,
|
||||
|
|
@ -96,7 +98,7 @@ body .creditCardSpecific div .headerlinecontainer {
|
|||
display: none;
|
||||
}
|
||||
body .creditCardSpecific div label {
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
}
|
||||
body .creditCardSpecific #infoRow2 {
|
||||
margin-bottom: 0;
|
||||
|
|
@ -140,6 +142,7 @@ body .buttonContainer button {
|
|||
border-radius: 8px;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
font-family: Urbanist, Arial, Helvetica, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
height: 48px;
|
||||
|
|
@ -272,7 +275,7 @@ body .cc-error-container #alert-message {
|
|||
#fmg-checkout-shared #other-payments-container label span.paymentOptionText {
|
||||
margin: auto 0;
|
||||
padding-left: 0;
|
||||
font-weight: 600;
|
||||
font-weight: 400;
|
||||
}
|
||||
#fmg-checkout-shared #other-payments-container #afterpayParentLink label > span:first-of-type {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ body {
|
|||
padding: 8px;
|
||||
|
||||
h3 {
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.validation-info {
|
||||
|
|
@ -42,7 +42,7 @@ body {
|
|||
.headerline1 {
|
||||
font-size: 20px;
|
||||
line-height: 32px;
|
||||
font-weight: 500;
|
||||
font-weight: 400;
|
||||
margin: 24px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -61,6 +61,8 @@ body {
|
|||
font-size: 16px;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
font-family: Urbanist, Arial, Helvetica, sans-serif;
|
||||
font-weight: 400;
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
box-shadow: 0 0 0 2.5px #1574a1;
|
||||
|
|
@ -103,7 +105,7 @@ body {
|
|||
display: none;
|
||||
}
|
||||
label {
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
#infoRow2 {
|
||||
|
|
@ -151,6 +153,7 @@ body {
|
|||
border-radius: 8px;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
font-family: Urbanist, Arial, Helvetica, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
height: 48px;
|
||||
|
|
@ -330,7 +333,7 @@ body {
|
|||
&.paymentOptionText {
|
||||
margin: auto 0;
|
||||
padding-left: 0;
|
||||
font-weight: 600;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,8 +13,9 @@ const pagePercentageMapper = {
|
|||
"capability-questions": 40,
|
||||
quote: 48,
|
||||
"insurance-company": 52,
|
||||
"service-location": 60,
|
||||
schedule: 72,
|
||||
// TODO: REMOVE THIS COMMENT AND BELOW, ONCE CASH-803 (SERVICE-LOCATION AND SCHEDULE PAGE COMBINATION) HAS BEEN VETTED
|
||||
// "service-location": 60,
|
||||
schedule: 64,
|
||||
"mobile-details": 76,
|
||||
"customer-details": 84,
|
||||
"payment-method": 92,
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
|
|||
<div :class="getComponentLoopWrapperClasses" class="button-inner-wrapper">
|
||||
<div
|
||||
:class="getComponentWrapperClasses"
|
||||
v-for="answer in buttonsInfo"
|
||||
v-for="(answer, index) in buttonsInfo"
|
||||
:key="answer.value ? answer.value : answer">
|
||||
<component
|
||||
:is="buttonTypeString"
|
||||
|
|
@ -72,6 +72,13 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
|
|||
<slot></slot>
|
||||
</div>
|
||||
</transition>
|
||||
<div
|
||||
class="or-label"
|
||||
v-if="
|
||||
insertOrLabelBeforeFinalOption && buttonsInfo.length - 2 === index
|
||||
">
|
||||
<span>OR</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
|
@ -149,6 +156,11 @@ export default {
|
|||
required: false,
|
||||
default: false,
|
||||
},
|
||||
insertOrLabelBeforeFinalOption: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const propsClone = Object.assign({}, props);
|
||||
|
|
@ -390,4 +402,16 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
.or-label {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid black;
|
||||
line-height: 1px;
|
||||
margin: 20px 0 20px;
|
||||
|
||||
span {
|
||||
background: #fff;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
1335
src/digital-components/date-picker/date-picker-june-2025.vue
Normal file
1335
src/digital-components/date-picker/date-picker-june-2025.vue
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -481,7 +481,7 @@ describe("date-picker.vue", () => {
|
|||
},
|
||||
});
|
||||
const spy = jest.spyOn(wrapper.vm, "setCalendarData");
|
||||
|
||||
wrapper.vm.$refs.timeSlotModalQuestion.initializeComponent = jest.fn();
|
||||
wrapper.vm.$nextTick();
|
||||
|
||||
// Act
|
||||
|
|
|
|||
|
|
@ -140,6 +140,7 @@
|
|||
dropoffCmsWidgetName="DropOffTimeSlotModal"
|
||||
sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
|
||||
overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
|
||||
dropOffOrPickATimeQuestionCmsWidgetName="DropOffOrPickATimeQuestionWidget"
|
||||
:selectedDate="selectedDate"
|
||||
:appointmentType="appointmentType"
|
||||
:premiumAppointmentFee="premiumAppointmentFee"
|
||||
|
|
@ -292,6 +293,7 @@ export default {
|
|||
methods: {
|
||||
initializeComponent(initialData) {
|
||||
this.setCalendarData(initialData);
|
||||
this.$refs.timeSlotModalQuestion.initializeComponent();
|
||||
},
|
||||
fireDateSelectedEvent(event, date) {
|
||||
// Ignore if arrow key selected radioButton
|
||||
|
|
@ -1356,7 +1358,7 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
:deep(.button-inner-wrapper) {
|
||||
:deep(.timeslots .button-inner-wrapper) {
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
flex-wrap: wrap;
|
||||
|
|
|
|||
782
src/layouts/schedule/schedule-june-2025.vue
Normal file
782
src/layouts/schedule/schedule-june-2025.vue
Normal file
|
|
@ -0,0 +1,782 @@
|
|||
<!-- OLD SCHEDULE BEGINS -->
|
||||
|
||||
<!-- TODO: REMOVE THIS FILE ONCE CASH-803 (SERVICE-LOCATION AND SCHEDULE PAGE COMBINATION) HAS BEEN VETTED -->
|
||||
|
||||
<template>
|
||||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
||||
<loadingModal ref="loadingModal" />
|
||||
<div class="container-fluid page-container-grouped-styles page-schedule">
|
||||
<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">
|
||||
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
|
||||
<template v-if="ChangeShopLink.length">
|
||||
<textBlock
|
||||
cmsWidgetName="ChangeShopLink"
|
||||
justifyText="center"
|
||||
class="mb-5 text-link-small change-location"
|
||||
marginTopSizeOverride="1" />
|
||||
</template>
|
||||
<locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
|
||||
<datePicker
|
||||
customComponentId="dateQuestion"
|
||||
selectableDatesSetting="custom"
|
||||
ref="datePicker"
|
||||
v-model="selectedDate"
|
||||
class="text-link-small"
|
||||
:customSelectableDatesCallback="getAvailableDatesMethod"
|
||||
validationRules="date-required"
|
||||
@date-clicked="handleDateClicked"
|
||||
:pricingByDayBasePrice="pricingByDayBasePrice"
|
||||
:pricingByDayUpcharge="pricingByDayUpcharge"
|
||||
:showPricingByDay="showPricingByDay"
|
||||
:isPricingByDayExperiment="isPricingByDayExperiment"
|
||||
:timeSlotsForSelectedDate="timeSlotsForSelectedDate"
|
||||
:appointmentType="appointmentType"
|
||||
:premiumAppointmentFee="mobilePremiumAppointmentFee"
|
||||
:estimatedServiceMinutesMinimum="
|
||||
selectableDatesData.estimatedServiceMinutesMinimum
|
||||
"
|
||||
:estimatedServiceMinutesMaximum="
|
||||
selectableDatesData.estimatedServiceMinutesMaximum
|
||||
"
|
||||
@TimeSlotSelected="updateTimeSlot"
|
||||
:displayWaitList="displayWaitList"
|
||||
@waitListRequested="handleWaitListRequested" />
|
||||
<navbar
|
||||
cmsWidgetName="FunnelFooterWidget"
|
||||
ref="navbar"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@back-clicked="backButtonAction"
|
||||
@ForwardClicked="forwardButtonAction" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Components
|
||||
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 datePicker from "@/digital-components/date-picker/date-picker";
|
||||
import locationAlerts from "@/layouts/schedule/location-alerts/location-alerts";
|
||||
import textBlock from "@/digital-components/text-block/text-block";
|
||||
|
||||
// Supporting files
|
||||
import { queryStrings } from "@/constants/query-strings";
|
||||
import { getQuerystringParameter } from "@/helpers/querystring-helper";
|
||||
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 {
|
||||
AppointmentTypeStrings,
|
||||
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 store from "@/store";
|
||||
import experimentMixin from "@/mixins/experiment-mixin.js";
|
||||
import { experimentSettings } from "@/constants/experiments";
|
||||
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("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 getAvailableDates = async (
|
||||
startDateString,
|
||||
endDateString,
|
||||
appointmentType,
|
||||
providerNumber
|
||||
) => {
|
||||
const apiEndDateLimit = sumDateString(startDateString, TIME_SLOTS_CALL_DAYS_LIMIT);
|
||||
const difference = calcDaysBetweenDates(startDateString, endDateString);
|
||||
const apiCallsCount = Math.ceil(difference / TIME_SLOTS_CALL_DAYS_LIMIT);
|
||||
const storeActionConfigs = [];
|
||||
const timeSlotsData = {};
|
||||
timeSlotsData.days = [];
|
||||
let apiStartDate = startDateString;
|
||||
let apiEndDate = endDateString;
|
||||
|
||||
for (let i = 1; i <= apiCallsCount; i++) {
|
||||
let storeActionConfig;
|
||||
|
||||
if (i > 1) {
|
||||
apiStartDate = sumDateString(apiEndDate, 1);
|
||||
apiEndDate = sumDateString(apiStartDate, TIME_SLOTS_CALL_DAYS_LIMIT);
|
||||
|
||||
if (i === apiCallsCount) {
|
||||
apiEndDate = endDateString;
|
||||
}
|
||||
} else {
|
||||
if (apiEndDate > apiEndDateLimit) {
|
||||
apiEndDate = apiEndDateLimit;
|
||||
}
|
||||
}
|
||||
|
||||
if (appointmentType === AppointmentTypeStrings.MOBILE) {
|
||||
storeActionConfig = {
|
||||
storeAction: storeActions.GET_MOBILE_TIME_SLOTS,
|
||||
payload: {
|
||||
startDate: apiStartDate,
|
||||
endDate: apiEndDate,
|
||||
},
|
||||
};
|
||||
} else {
|
||||
storeActionConfig = {
|
||||
storeAction: storeActions.GET_SHOP_TIME_SLOTS,
|
||||
payload: {
|
||||
startDate: apiStartDate,
|
||||
endDate: apiEndDate,
|
||||
shopAppointmentType: appointmentType,
|
||||
providerNumber: providerNumber,
|
||||
},
|
||||
};
|
||||
}
|
||||
if (apiStartDate < apiEndDate) storeActionConfigs.push(storeActionConfig);
|
||||
}
|
||||
|
||||
const timeSlotsResponsesData = {
|
||||
days: [],
|
||||
};
|
||||
|
||||
function compareDayStrings(a, b) {
|
||||
if (a.date < b.date) return -1;
|
||||
if (a.date > b.date) return 1;
|
||||
return 0;
|
||||
}
|
||||
|
||||
const makeParallelCalls = async () => {
|
||||
await Promise.all(
|
||||
storeActionConfigs.map(async (storeAction) => {
|
||||
const timeSlotsResponse = await baseMixin.methods.dispatchStoreActionWithLogging(
|
||||
storeAction.storeAction,
|
||||
storeAction.payload,
|
||||
"schedule",
|
||||
false
|
||||
);
|
||||
timeSlotsResponsesData.estimatedServiceMinutesMinimum =
|
||||
timeSlotsResponse.data.estimatedServiceMinutesMinimum;
|
||||
timeSlotsResponsesData.estimatedServiceMinutesMaximum =
|
||||
timeSlotsResponse.data.estimatedServiceMinutesMaximum;
|
||||
timeSlotsResponsesData.days = [
|
||||
...timeSlotsResponsesData.days,
|
||||
...timeSlotsResponse.data.days,
|
||||
];
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
return makeParallelCalls().then(() => {
|
||||
// sort days chronologically
|
||||
timeSlotsResponsesData.days.sort(compareDayStrings);
|
||||
return timeSlotsResponsesData;
|
||||
});
|
||||
};
|
||||
|
||||
export default {
|
||||
name: "schedule",
|
||||
data() {
|
||||
return {
|
||||
selectedDate: this.getSelectedDate(),
|
||||
selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
|
||||
selectableDatesData: [],
|
||||
mobilePremiumAppointmentFee: null,
|
||||
waitListRequested: null,
|
||||
displayWaitList: null,
|
||||
pricingByDayUpchargeLineItem: null,
|
||||
includePricingByDayUpcharge: null,
|
||||
isPricingByDayExperiment: null,
|
||||
pricingByDayBasePrice: null,
|
||||
pricingByDayUpcharge: null,
|
||||
showPricingByDay: null,
|
||||
};
|
||||
},
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
const isPricingByDayExperiment = experimentMixin.methods.hasSettingEqualTo(
|
||||
experimentSettings.PRICING_BY_DAY,
|
||||
"true"
|
||||
);
|
||||
const showPricingByDay = !store.getters.payment.isInsurance && isPricingByDayExperiment;
|
||||
|
||||
// Get pricingByDayBasePrice needed for Pricing By Day
|
||||
const lineItems = deepClone(store.getters.order.lineItems);
|
||||
const isRecalibrationOnOrder = store.getters.isRecalibrationOnOrder;
|
||||
const shouldHideRecalibration =
|
||||
experimentMixin.methods.hasSettingEqualTo(
|
||||
experimentSettings.RECAL_PRICE_REMOVE,
|
||||
"true"
|
||||
) && isRecalibrationOnOrder;
|
||||
const glassParts =
|
||||
isRecalibrationOnOrder && shouldHideRecalibration
|
||||
? getItemsWithoutRecalParts(lineItems.glassParts)
|
||||
: (lineItems.glassParts ?? []);
|
||||
const supportingItemsFromStore = lineItems?.supportingItems;
|
||||
const supportingItemsWithoutFees = baseMixin.methods.filterOutCertainPartTypesOrNumbers(
|
||||
lineItems.supportingItems,
|
||||
{
|
||||
partNumbersToRemove: [
|
||||
partNumberStrings.RECYCLE_FEE,
|
||||
partNumberStrings.PRICING_BY_DAY_UPCHARGE,
|
||||
],
|
||||
}
|
||||
);
|
||||
const lineItemsToBePriced = {
|
||||
glassParts: glassParts,
|
||||
supportingItems: supportingItemsWithoutFees,
|
||||
vaps: lineItems.vaps ?? [],
|
||||
promos: lineItems.promos ?? [],
|
||||
};
|
||||
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);
|
||||
let includePricingByDayUpcharge = false;
|
||||
|
||||
// Check to see if date should be pre-selected
|
||||
let preSelectedSlot = await store.getters.order.schedule;
|
||||
if (!preSelectedSlot.date || preSelectedSlot?.date?.length < 1) {
|
||||
preSelectedSlot = null;
|
||||
} else {
|
||||
// Check to see if pre-selected date should have pricing by day upcharge
|
||||
if (showPricingByDay) {
|
||||
// is this preSelectedDate a higher priced pricingByDay day?
|
||||
const dayIndex = convertDateStringToDate(preSelectedSlot?.date).getDay();
|
||||
const dayObject = DAYS_OF_WEEK[dayIndex];
|
||||
if (dayObject.isPricingByDayUpchargeDay) {
|
||||
includePricingByDayUpcharge = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Set up promises
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.name);
|
||||
|
||||
const alertReasonsPromise = locationAlerts.methods.loadInitialData(
|
||||
store.getters.order.serviceLocation.zipCodeCtu,
|
||||
store.getters.order.serviceLocation.provider?.address?.zipCodeCtu
|
||||
);
|
||||
|
||||
// While Pricing By Day Experiment is active, using the updated datePicker
|
||||
const datePickerInitialDataPromise = await datePicker.methods.loadInitialData({
|
||||
// setup config options for date-picker
|
||||
selectableDatesSetting: "custom",
|
||||
initialViewRowsToShow: 2,
|
||||
customSelectableDatesCallback: getAvailableDates,
|
||||
preSelectedDate: preSelectedSlot ? preSelectedSlot.date : preSelectedSlot,
|
||||
});
|
||||
|
||||
// Get pricingByDayUpcharge needed for Pricing By Day
|
||||
const pricingByDayUpchargePartPromise = showPricingByDay
|
||||
? getPricingByDayPartWithPrice()
|
||||
: null;
|
||||
|
||||
const premiumFeePromise = baseMixin.methods.dispatchStoreActionWithLogging(
|
||||
storeActions.GET_MOBILE_PREMIUM_FEE,
|
||||
null,
|
||||
"schedule"
|
||||
);
|
||||
const premiumFeeWithPricePromise = premiumFeePromise.then((result) => {
|
||||
if (result.data) {
|
||||
return baseMixin.methods.dispatchStoreActionWithLogging(
|
||||
storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
|
||||
{
|
||||
availableLineItems: [result.data],
|
||||
},
|
||||
"schedule",
|
||||
false
|
||||
);
|
||||
} else {
|
||||
return result.data;
|
||||
}
|
||||
});
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: "cmsContent",
|
||||
promise: cmsContentPromise,
|
||||
},
|
||||
{
|
||||
resultKey: "alertReasons",
|
||||
promise: alertReasonsPromise,
|
||||
},
|
||||
{
|
||||
resultKey: "datePickerInitialData",
|
||||
promise: datePickerInitialDataPromise,
|
||||
},
|
||||
{
|
||||
resultKey: "pricingByDayUpchargePart",
|
||||
promise: pricingByDayUpchargePartPromise,
|
||||
},
|
||||
{
|
||||
resultKey: "premiumFeeWithPrice",
|
||||
promise: premiumFeeWithPricePromise,
|
||||
},
|
||||
];
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
const pricingByDayUpcharge = showPricingByDay
|
||||
? await baseMixin.methods.getTotalLineItemPrice(
|
||||
resultMap.pricingByDayUpchargePart,
|
||||
false
|
||||
)
|
||||
: null;
|
||||
|
||||
const datePickerInitialData = resultMap.datePickerInitialData;
|
||||
datePickerInitialData.pricingByDayBasePrice = pricingByDayBasePrice;
|
||||
datePickerInitialData.pricingByDayUpcharge = pricingByDayUpcharge;
|
||||
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.$refs.datePicker.initializeComponent(datePickerInitialData);
|
||||
vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
|
||||
vm.selectableDatesData = datePickerInitialData.initialShopTimeSlotsResponse;
|
||||
vm.mobilePremiumAppointmentFee = resultMap.premiumFeeWithPrice
|
||||
? resultMap.premiumFeeWithPrice[0]
|
||||
: null;
|
||||
vm.updateFooterButtonText(vm.selectedTimeSlotInfo);
|
||||
vm.setDisplayWaitList();
|
||||
vm.pricingByDayUpchargeLineItem = resultMap.pricingByDayUpchargePart;
|
||||
vm.includePricingByDayUpcharge = includePricingByDayUpcharge;
|
||||
vm.isPricingByDayExperiment = isPricingByDayExperiment;
|
||||
vm.pricingByDayBasePrice = pricingByDayBasePrice;
|
||||
vm.pricingByDayUpcharge = pricingByDayUpcharge;
|
||||
vm.showPricingByDay = showPricingByDay;
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
const selectableDatesData = this.selectableDatesData;
|
||||
// if no date selected on load
|
||||
if (!this.selectedDate) {
|
||||
if (selectableDatesData?.days?.length > 0) {
|
||||
this.selectedDate = selectableDatesData.days[0].date;
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
this.$refs.datePicker.showAnotherMonth().then((moreSelectableDatesData) => {
|
||||
this.selectableDatesData = moreSelectableDatesData;
|
||||
if (selectableDatesData?.days?.length > 0) {
|
||||
this.selectedDate = selectableDatesData.days[0].date;
|
||||
}
|
||||
|
||||
this.setDisplayWaitList();
|
||||
});
|
||||
}, 50);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
ChangeShopLinkText() {
|
||||
return this.getCmsContent("ChangeShopLink", "Text");
|
||||
},
|
||||
ChangeShopLink() {
|
||||
// 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() {
|
||||
return this.$store.getters.order.serviceLocation.appointmentType;
|
||||
},
|
||||
timeSlotsForSelectedDate() {
|
||||
if (!this.selectedDate) return null;
|
||||
|
||||
return this.selectableDatesData.days?.find(
|
||||
(selectableDate) => selectableDate.date === this.selectedDate
|
||||
);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
splitCopyOnCMSPlaceHolder,
|
||||
arePagePrerequisitesValid() {
|
||||
const serviceLocation = store.getters.order.serviceLocation;
|
||||
|
||||
const serviceLocationPreReqs =
|
||||
serviceLocation.zipCode &&
|
||||
serviceLocation.zipCodeCtu &&
|
||||
serviceLocation.appointmentType &&
|
||||
(serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE ||
|
||||
serviceLocation.provider.providerNumber);
|
||||
|
||||
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 preReqResult = serviceLocationPreReqs && paymentInfo && damageInfo;
|
||||
|
||||
// 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("--- schedule.vue pagePrereqs end ---", null, !preReqResult);
|
||||
}
|
||||
return preReqResult;
|
||||
},
|
||||
async getAvailableDatesMethod(startDate, endDate) {
|
||||
const newShopTimeSlots = await getAvailableDates(
|
||||
startDate,
|
||||
endDate,
|
||||
this.appointmentType,
|
||||
this.$store.getters.order.serviceLocation.provider.providerNumber
|
||||
);
|
||||
|
||||
// ADD API CALL RESULTS TO EXISTING DATE DATA
|
||||
this.selectableDatesData.days = this.selectableDatesData.days.concat(
|
||||
newShopTimeSlots.days
|
||||
);
|
||||
return newShopTimeSlots;
|
||||
},
|
||||
getAvailableDates,
|
||||
getServiceZipCtuCodeFromStore() {
|
||||
return store.getters.order.serviceLocation.zipCodeCtu;
|
||||
},
|
||||
getSelectedDate() {
|
||||
return store.getters.order.schedule.date;
|
||||
},
|
||||
getSelectedTimeSlotInfo() {
|
||||
const supportingItems = this.getSupportingItems();
|
||||
|
||||
var isPremiumAppointment = false;
|
||||
if (supportingItems) {
|
||||
isPremiumAppointment =
|
||||
!!supportingItems.filter(
|
||||
(lineItem) => lineItem.partType === PREMIUM_FEE_PART_TYPE
|
||||
).length > 0;
|
||||
}
|
||||
|
||||
const selectedTimeSlotInfo = {
|
||||
timeSlot: store.getters.order.schedule,
|
||||
isPremiumAppointment: isPremiumAppointment,
|
||||
};
|
||||
|
||||
return selectedTimeSlotInfo;
|
||||
},
|
||||
getSupportingItems() {
|
||||
return store.getters.lineItems.supportingItems;
|
||||
},
|
||||
updateFooterButtonText(timeSlotInfo) {
|
||||
let navbarButtonText;
|
||||
if (!timeSlotInfo || !timeSlotInfo.timeSlot.date) {
|
||||
navbarButtonText = "Continue";
|
||||
} else {
|
||||
navbarButtonText = `Select ${this.convertSelectedDateToShortMonthAndDay(
|
||||
timeSlotInfo.timeSlot.date
|
||||
)}`;
|
||||
|
||||
if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
|
||||
navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
|
||||
timeSlotInfo.timeSlot.startTime
|
||||
)}`;
|
||||
} else if (
|
||||
this.appointmentType === AppointmentTypeStrings.MOBILE &&
|
||||
!timeSlotInfo.isPremiumAppointment
|
||||
) {
|
||||
navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
|
||||
timeSlotInfo.timeSlot.startTime,
|
||||
true
|
||||
)} - ${this.getDisplayTextForMilitaryTime(
|
||||
timeSlotInfo.timeSlot.endTime,
|
||||
true
|
||||
)}`;
|
||||
}
|
||||
}
|
||||
this.$refs.navbar.updateButtonText(navbarButtonText);
|
||||
},
|
||||
convertSelectedDateToShortMonthAndDay(selectedDate) {
|
||||
// This conversion ensures we don't get get GMT induced date changes
|
||||
const dateObject = convertDateStringToDate(selectedDate);
|
||||
// Ex: April 25
|
||||
return dateObject.toLocaleDateString("en-us", { month: "short", day: "numeric" });
|
||||
},
|
||||
getDisplayTextForMilitaryTime(militaryTimeInput, shouldTrimMinutesIfEmpty = false) {
|
||||
// Expected input: "HH:MM"
|
||||
let hours = parseInt(militaryTimeInput.split(":")[0]);
|
||||
const minutes = militaryTimeInput.split(":")[1];
|
||||
const meridianNotation = hours > 11 ? "PM" : "AM";
|
||||
|
||||
if (hours > 12) {
|
||||
hours -= 12;
|
||||
}
|
||||
|
||||
if (shouldTrimMinutesIfEmpty && minutes === "00") {
|
||||
return `${hours} ${meridianNotation}`;
|
||||
} else {
|
||||
return `${hours}:${minutes} ${meridianNotation}`;
|
||||
}
|
||||
},
|
||||
backButtonAction() {
|
||||
this.$router.navigateWithoutSaving(
|
||||
this.navigationScenarios.CLICKED_BACK,
|
||||
this.pageName
|
||||
);
|
||||
},
|
||||
forwardButtonAction() {
|
||||
this.updateSupportingItems();
|
||||
|
||||
if (this.displayWaitList) {
|
||||
var gaLabel = "";
|
||||
const status = this.waitListRequested ? "checked" : "unchecked";
|
||||
const type = store.getters.isMobileAppointment ? "mobile" : "inshop";
|
||||
gaLabel = `${status}_${type}`;
|
||||
|
||||
const currentDate = new Date();
|
||||
const dateString = this.selectableDatesData.days[0].date;
|
||||
const [year, month, day] = dateString.split("-").map(Number);
|
||||
const appointmentDate = new Date(year, month - 1, day);
|
||||
const timeDifference = appointmentDate - currentDate;
|
||||
|
||||
// Convert the time difference from milliseconds to days
|
||||
const daysUntilAppointment = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));
|
||||
|
||||
gaLabel +=
|
||||
"_" +
|
||||
daysUntilAppointment.toString() +
|
||||
"_" +
|
||||
store.getters.order.serviceLocation.zipCode +
|
||||
"_" +
|
||||
store.getters.order.serviceLocation.zipCodeCtu;
|
||||
this.pushEventToGA("waitlist", "add_to_waitlist_check_box_status", gaLabel, true);
|
||||
}
|
||||
if (this.selectedTimeSlotInfo.timeSlot.jobMinMinutes == null) {
|
||||
this.selectedTimeSlotInfo.timeSlot.jobMinMinutes =
|
||||
this.selectableDatesData?.estimatedServiceMinutesMinimum?.toString();
|
||||
this.selectedTimeSlotInfo.timeSlot.jobMaxMinutes =
|
||||
this.selectableDatesData?.estimatedServiceMinutesMaximum?.toString();
|
||||
}
|
||||
|
||||
this.dispatchStoreAction(
|
||||
this.storeActions.SAVE_SCHEDULE,
|
||||
this.selectedTimeSlotInfo.timeSlot,
|
||||
false
|
||||
);
|
||||
|
||||
if (this.waitListRequested !== null && this.waitListRequested !== undefined) {
|
||||
this.dispatchStoreAction(
|
||||
this.storeActions.SAVE_WAITLIST_REQUESTED,
|
||||
this.waitListRequested,
|
||||
false
|
||||
);
|
||||
}
|
||||
|
||||
this.$router.navigateWithSaving(
|
||||
this.navigationScenarios.CLICKED_FORWARD,
|
||||
this.pageName
|
||||
);
|
||||
},
|
||||
setDisplayWaitList() {
|
||||
if (
|
||||
experimentMixin.methods.hasSettingEqualTo(
|
||||
experimentSettings.DISPLAY_WAITLIST,
|
||||
"true"
|
||||
) &&
|
||||
this.selectableDatesData.days[0]
|
||||
) {
|
||||
const dateString = this.selectableDatesData.days[0].date;
|
||||
const [year, month, day] = dateString.split("-").map(Number);
|
||||
const targetDate = new Date(year, month - 1, day);
|
||||
const currentDate = new Date();
|
||||
const futureDate = new Date(currentDate);
|
||||
const experimentThresholdDays = experimentMixin.methods.hasSetting(
|
||||
experimentSettings.WAITLIST_THRESHOLD_DAYS
|
||||
)
|
||||
? parseInt(
|
||||
experimentMixin.methods.getSettingValue(
|
||||
experimentSettings.WAITLIST_THRESHOLD_DAYS
|
||||
)
|
||||
)
|
||||
: 0;
|
||||
futureDate.setDate(currentDate.getDate() + experimentThresholdDays);
|
||||
|
||||
if (targetDate >= futureDate) {
|
||||
this.displayWaitList = true;
|
||||
} else {
|
||||
this.displayWaitList = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
updateSupportingItems() {
|
||||
const supportingItems = this.getSupportingItems();
|
||||
|
||||
// if we have a pricing by day upcharge, then save/update supporting items with it
|
||||
const pricingByDayUpchargeFeeIndex = supportingItems?.findIndex(
|
||||
(item) => item.partType == PRICING_BY_DAY_PART_TYPE
|
||||
);
|
||||
|
||||
if (this.includePricingByDayUpcharge && this.showPricingByDay) {
|
||||
if (pricingByDayUpchargeFeeIndex && pricingByDayUpchargeFeeIndex > -1) {
|
||||
supportingItems[pricingByDayUpchargeFeeIndex].laborAmount =
|
||||
this.pricingByDayUpchargeLineItem.laborAmount;
|
||||
supportingItems[pricingByDayUpchargeFeeIndex].sellingPrice =
|
||||
this.pricingByDayUpchargeLineItem.sellingPrice;
|
||||
supportingItems[pricingByDayUpchargeFeeIndex].kitPrice =
|
||||
this.pricingByDayUpchargeLineItem.kitPrice;
|
||||
} else {
|
||||
supportingItems.push(this.pricingByDayUpchargeLineItem);
|
||||
}
|
||||
} else {
|
||||
if (pricingByDayUpchargeFeeIndex >= 0) {
|
||||
// remove pricing by day upcharge if it already was in store
|
||||
supportingItems.splice(pricingByDayUpchargeFeeIndex, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// if we have a premium fee(early bird), then save/update supporting items
|
||||
if (
|
||||
this.appointmentType === AppointmentTypeStrings.MOBILE &&
|
||||
this.selectedTimeSlotInfo?.isPremiumAppointment
|
||||
) {
|
||||
const premiumFeeIndex = supportingItems.findIndex(
|
||||
(item) => item.partType == PREMIUM_FEE_PART_TYPE
|
||||
);
|
||||
|
||||
if (premiumFeeIndex > -1) {
|
||||
supportingItems[premiumFeeIndex].laborAmount =
|
||||
this.mobilePremiumAppointmentFee.laborAmount;
|
||||
supportingItems[premiumFeeIndex].sellingPrice =
|
||||
this.mobilePremiumAppointmentFee.sellingPrice;
|
||||
supportingItems[premiumFeeIndex].kitPrice =
|
||||
this.mobilePremiumAppointmentFee.kitPrice;
|
||||
} else {
|
||||
supportingItems.push(this.mobilePremiumAppointmentFee);
|
||||
}
|
||||
} else {
|
||||
if (!supportingItems) {
|
||||
return;
|
||||
}
|
||||
|
||||
// if it's not a mobile and/or premium early bird, then make sure we remove any that may have been added
|
||||
const removePremiumFeeIndex = supportingItems.findIndex(
|
||||
(item) => item.partType == PREMIUM_FEE_PART_TYPE
|
||||
);
|
||||
|
||||
if (removePremiumFeeIndex >= 0) {
|
||||
supportingItems.splice(removePremiumFeeIndex, 1);
|
||||
}
|
||||
}
|
||||
|
||||
this.dispatchStoreAction(
|
||||
this.storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
|
||||
supportingItems,
|
||||
false
|
||||
);
|
||||
},
|
||||
handleWaitListRequested(value) {
|
||||
this.waitListRequested = value;
|
||||
},
|
||||
handleDateClicked(date) {
|
||||
// do something to mark this as upcharge day or not...
|
||||
if (date.isPricingByDayUpchargeDay) {
|
||||
this.includePricingByDayUpcharge = true;
|
||||
} else {
|
||||
this.includePricingByDayUpcharge = false;
|
||||
}
|
||||
},
|
||||
updateTimeSlot(timeSlot) {
|
||||
this.selectedTimeSlotInfo = timeSlot;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
selectedDate(newValue, oldValue) {
|
||||
// Clear time slot selection if date selected changes
|
||||
if (newValue !== oldValue) {
|
||||
this.selectedTimeSlotInfo = {
|
||||
timeSlot: {
|
||||
date: null,
|
||||
routeCode: null,
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
jobMaxMinutes: null,
|
||||
jobMinMinutes: null,
|
||||
},
|
||||
isPremiumAppointment: null,
|
||||
};
|
||||
}
|
||||
},
|
||||
selectedTimeSlotInfo(newValue) {
|
||||
this.updateFooterButtonText(newValue);
|
||||
},
|
||||
},
|
||||
components: {
|
||||
funnelHeader,
|
||||
navbar,
|
||||
funnelSubHeader,
|
||||
Form,
|
||||
loadingModal,
|
||||
datePicker,
|
||||
locationAlerts,
|
||||
textBlock,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container-fluid {
|
||||
&.page-schedule {
|
||||
padding: 0 1rem;
|
||||
.text-link-small {
|
||||
a,
|
||||
.btn-link {
|
||||
width: auto;
|
||||
margin: 0 auto;
|
||||
height: auto;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.75;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
&:focus {
|
||||
outline: 1px solid $blue;
|
||||
}
|
||||
@include media-breakpoint-up(md) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.funnel-sub-header {
|
||||
h5.dark-header {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
}
|
||||
.change-location a {
|
||||
font-family: AvertaSemibold;
|
||||
}
|
||||
.time-slots-question {
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- OLD SCHEDULE ENDS -->
|
||||
|
|
@ -7,11 +7,30 @@
|
|||
justifyText="center"
|
||||
typeStyle="small"
|
||||
class="duration-text-block" />
|
||||
<buttonQuestion
|
||||
v-if="isDropOffAppointmentAvailable"
|
||||
v-model="selectedAnswerForDropOff"
|
||||
:questionText="dropOffOrPickATimeQuestionLabelText"
|
||||
:answers="answersForDropOffQuestion"
|
||||
isRequired
|
||||
insertOrLabelBeforeFinalOption
|
||||
groupName="chooseDropOffOrPickATime">
|
||||
<div>
|
||||
<alert
|
||||
v-if="shouldDisplayDropOffAlert"
|
||||
ref="alertDropoffInformation"
|
||||
class="mb-4 drop-off-alert"
|
||||
:cmsWidgetName="dropOffTimeSlotAlertCMSWidgetName"
|
||||
alertClass="alert-info"
|
||||
v-bind:isDismissible="false" />
|
||||
</div>
|
||||
</buttonQuestion>
|
||||
<buttonQuestion
|
||||
ref="buttonQuestion"
|
||||
v-if="shouldDisplayTimeSlotQuestion"
|
||||
buttonTypeString="timeSlotModalListButton"
|
||||
:buttonTypeObject="timeSlotModalListButton"
|
||||
class="mt-4"
|
||||
class="mt-4 timeslots"
|
||||
:class="[
|
||||
isMobileAppointment ? 'is-mobile-appointment' : '',
|
||||
isInshopOrDropOffAppointment ? 'is-inshop-or-drop-off-appointment' : '',
|
||||
|
|
@ -19,7 +38,7 @@
|
|||
:answers="availableTimeSlots"
|
||||
groupName="chooseTimeSlot"
|
||||
textPosition="text-center"
|
||||
v-model="selectedRouteCode"
|
||||
v-model="selectedAnswerForTimeSlots"
|
||||
isRequired
|
||||
validationRules="time-slot-required" />
|
||||
<div
|
||||
|
|
@ -59,6 +78,7 @@ import textBlock from "@/digital-components/text-block/text-block";
|
|||
import buttonQuestion from "@/digital-components/button-question/button-question";
|
||||
import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
|
||||
import timeSlotModalListButton from "@/layouts/schedule/time-slot-modal-question/time-slot-modal-list-button/time-slot-modal-list-button.vue";
|
||||
import alert from "@/ux-components/alert/alert.vue";
|
||||
import experimentMixin from "@/mixins/experiment-mixin";
|
||||
import { experimentSettings } from "@/constants/experiments";
|
||||
import store from "@/store";
|
||||
|
|
@ -94,10 +114,12 @@ const cmsWidgetFieldMappings = {
|
|||
DURATION: "SubheaderText",
|
||||
};
|
||||
|
||||
const PICK_A_TIME_BUTTON_VALUE = "pick-a-time-selected";
|
||||
|
||||
defineRule("time-slot-required", required(errorMessages.OPTION_REQUIRED));
|
||||
|
||||
export default {
|
||||
name: "time-slot-no-modal-question",
|
||||
name: "time-slot-question",
|
||||
emits: ["update:modelValue", "TimeSlotSelected", "click-event"],
|
||||
props: {
|
||||
modelValue: {
|
||||
|
|
@ -120,6 +142,7 @@ export default {
|
|||
dropoffCmsWidgetName: String,
|
||||
sameDayDropOffCmsWidgetName: String,
|
||||
overnightDropOffCmsWidgetName: String,
|
||||
dropOffOrPickATimeQuestionCmsWidgetName: String,
|
||||
appointmentType: String,
|
||||
timeSlotsForSelectedDate: Object,
|
||||
premiumAppointmentFee: Object,
|
||||
|
|
@ -132,9 +155,11 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
selectedRouteCode: this.getSelectedRouteCode(),
|
||||
selectedRouteCode: null,
|
||||
timeSlotModalListButton: timeSlotModalListButton,
|
||||
waitListRequested: this.getWaitListRequestedFromStore(),
|
||||
selectedAnswerForDropOff: null,
|
||||
selectedAnswerForTimeSlots: null,
|
||||
};
|
||||
},
|
||||
setup(props) {
|
||||
|
|
@ -169,7 +194,11 @@ export default {
|
|||
computed: {
|
||||
supplementalInformationBlock() {
|
||||
let appointmentTypeCmsWidgetName;
|
||||
if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
|
||||
|
||||
if (this.appointmentType === AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF) {
|
||||
// This is planned to be used again for drop-off
|
||||
// Leaving this here with that in mind, move logic from the final else in here
|
||||
// and only apply it when a dropoff slot is selected
|
||||
return null;
|
||||
} else if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
|
||||
appointmentTypeCmsWidgetName = this.selectedRouteCode?.includes(
|
||||
|
|
@ -200,9 +229,16 @@ export default {
|
|||
cmsWidgetFieldMappings.MODAL_CLOSE_BUTTON
|
||||
);
|
||||
},
|
||||
dropOffOrPickATimeQuestionLabelText() {
|
||||
return this.getCmsContent(this.dropOffOrPickATimeQuestionCmsWidgetName, "QuestionText");
|
||||
},
|
||||
pickATimeButtonLabelText() {
|
||||
return this.getCmsContent(this.dropOffOrPickATimeQuestionCmsWidgetName, "Answers")[0]
|
||||
.Text;
|
||||
},
|
||||
premiumAppointmentButtonText() {
|
||||
return this.getCmsContent(
|
||||
this.mobilePremiumCmsWidgetName,
|
||||
this.dropOffOrPickATimeQuestionCmsWidgetName,
|
||||
cmsWidgetFieldMappings.TIME_SLOT_BUTTON
|
||||
);
|
||||
},
|
||||
|
|
@ -287,9 +323,7 @@ export default {
|
|||
durationTextBlockCopy() {
|
||||
if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
|
||||
return null;
|
||||
} else if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
|
||||
return this.inshopDurationText;
|
||||
} else {
|
||||
} else if (this.appointmentType === AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF) {
|
||||
if (this.selectedRouteCode?.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
|
||||
return this.overnightDropoffDurationText;
|
||||
} else if (this.selectedRouteCode?.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
|
||||
|
|
@ -298,10 +332,10 @@ export default {
|
|||
} else {
|
||||
return this.dropOffDurationText;
|
||||
}
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
return this.inshopDurationText;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
isSameDay() {
|
||||
if (!this.timeSlotsForSelectedDate) {
|
||||
|
|
@ -332,11 +366,42 @@ export default {
|
|||
if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
|
||||
return this.getAvailableTimeSlotsForMobile(this.timeSlotsForSelectedDate.timeSlots);
|
||||
} else {
|
||||
return this.getAvailableTimeSlotsForInshopOrDropOff(
|
||||
this.timeSlotsForSelectedDate.timeSlots
|
||||
);
|
||||
return this.getAvailableTimeSlotsForInshop(this.timeSlotsForSelectedDate.timeSlots);
|
||||
}
|
||||
},
|
||||
answersForDropOffQuestion() {
|
||||
if (!this.timeSlotsForSelectedDate) {
|
||||
return null;
|
||||
}
|
||||
const dropOffQuestionAnswers = this.timeSlotsForSelectedDate.timeSlots
|
||||
.filter((timeSlot) => {
|
||||
return this.isDropOffRouteCode(timeSlot.id);
|
||||
})
|
||||
.map((timeSlot) => {
|
||||
let buttonLabelValue;
|
||||
if (timeSlot.id.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
|
||||
buttonLabelValue = this.overnightDropoffButtonText;
|
||||
} else if (this.isSameDay) {
|
||||
buttonLabelValue = this.sameDayDropoffButtonText;
|
||||
} else {
|
||||
buttonLabelValue = this.dropoffButtonText;
|
||||
}
|
||||
return {
|
||||
value: timeSlot.id,
|
||||
buttonLabel: buttonLabelValue,
|
||||
};
|
||||
});
|
||||
if (
|
||||
this.getAvailableTimeSlotsForInshop(this.timeSlotsForSelectedDate.timeSlots)
|
||||
.length !== 0
|
||||
) {
|
||||
dropOffQuestionAnswers.push({
|
||||
value: PICK_A_TIME_BUTTON_VALUE,
|
||||
buttonLabel: this.pickATimeButtonLabelText,
|
||||
});
|
||||
}
|
||||
return dropOffQuestionAnswers;
|
||||
},
|
||||
hasWaitListExperiment() {
|
||||
return experimentMixin.methods.hasSettingEqualTo(
|
||||
experimentSettings.DISPLAY_WAITLIST,
|
||||
|
|
@ -358,8 +423,36 @@ export default {
|
|||
isInshopOrDropOffAppointment() {
|
||||
return this.appointmentType === AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF;
|
||||
},
|
||||
shouldDisplayDropOffAlert() {
|
||||
return this.isDropOffRouteCode(this.selectedAnswerForDropOff);
|
||||
},
|
||||
dropOffTimeSlotAlertCMSWidgetName() {
|
||||
if (this.selectedAnswerForDropOff.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
|
||||
return "OvernightDropOffTimeSlotAlert";
|
||||
} else if (this.isSameDay) {
|
||||
return "SameDayDropOffTimeSlotAlert";
|
||||
} else {
|
||||
return "DropOffTimeSlotAlert";
|
||||
}
|
||||
},
|
||||
isDropOffAppointmentAvailable() {
|
||||
return (
|
||||
this.answersForDropOffQuestion !== null &&
|
||||
this.answersForDropOffQuestion.length !== 0 &&
|
||||
this.answersForDropOffQuestion[0].value !== PICK_A_TIME_BUTTON_VALUE
|
||||
);
|
||||
},
|
||||
shouldDisplayTimeSlotQuestion() {
|
||||
return (
|
||||
this.selectedAnswerForDropOff == PICK_A_TIME_BUTTON_VALUE ||
|
||||
!this.isDropOffAppointmentAvailable
|
||||
);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
initializeComponent() {
|
||||
this.setSelectedRouteCodeFromParent();
|
||||
},
|
||||
async setSelectedTimeSlot() {
|
||||
this.$emit(
|
||||
"update:modelValue",
|
||||
|
|
@ -380,51 +473,17 @@ export default {
|
|||
}
|
||||
},
|
||||
getAvailableTimeSlotsForInshop(timeSlotsForSelectedDate) {
|
||||
return timeSlotsForSelectedDate.map((timeSlot) => {
|
||||
const readableTime = militaryToTwelveHourTime(timeSlot.startTime);
|
||||
return {
|
||||
value: timeSlot.id,
|
||||
buttonLabel: readableTime,
|
||||
};
|
||||
});
|
||||
},
|
||||
getAvailableTimeSlotsForDropOff(timeSlotsForSelectedDate) {
|
||||
const availableTimeSlots = timeSlotsForSelectedDate.map((timeSlot) => {
|
||||
let buttonLabelValue;
|
||||
if (timeSlot.id.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
|
||||
buttonLabelValue = this.overnightDropoffButtonText;
|
||||
} else if (this.isSameDay) {
|
||||
buttonLabelValue = this.sameDayDropoffButtonText;
|
||||
} else {
|
||||
buttonLabelValue = this.dropoffButtonText;
|
||||
}
|
||||
return {
|
||||
value: timeSlot.id,
|
||||
buttonLabel: buttonLabelValue,
|
||||
};
|
||||
});
|
||||
|
||||
return availableTimeSlots;
|
||||
},
|
||||
getAvailableTimeSlotsForInshopOrDropOff(timeSlotsForSelectedDate) {
|
||||
const availableTimeSlots = timeSlotsForSelectedDate.map((timeSlot) => {
|
||||
let buttonLabelValue;
|
||||
if (timeSlot.id.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
|
||||
buttonLabelValue = this.dropoffButtonText;
|
||||
} else if (timeSlot.id.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
|
||||
buttonLabelValue = this.overnightDropoffButtonText;
|
||||
} else if (this.isSameDay) {
|
||||
buttonLabelValue = this.sameDayDropoffButtonText;
|
||||
} else {
|
||||
buttonLabelValue = militaryToTwelveHourTime(timeSlot.startTime);
|
||||
}
|
||||
return {
|
||||
value: timeSlot.id,
|
||||
buttonLabel: buttonLabelValue,
|
||||
};
|
||||
});
|
||||
|
||||
return availableTimeSlots;
|
||||
return timeSlotsForSelectedDate
|
||||
.filter((timeSlot) => {
|
||||
return !this.isDropOffRouteCode(timeSlot.id);
|
||||
})
|
||||
.map((timeSlot) => {
|
||||
const readableTime = militaryToTwelveHourTime(timeSlot.startTime);
|
||||
return {
|
||||
value: timeSlot.id,
|
||||
buttonLabel: readableTime,
|
||||
};
|
||||
});
|
||||
},
|
||||
getAvailableTimeSlotsForMobile(timeSlotsForSelectedDate) {
|
||||
const availableTimeSlots = timeSlotsForSelectedDate.map((timeSlot) => {
|
||||
|
|
@ -461,29 +520,34 @@ export default {
|
|||
},
|
||||
};
|
||||
},
|
||||
getSelectedRouteCode() {
|
||||
let selectedRouteCode;
|
||||
setSelectedRouteCodeFromParent() {
|
||||
if (!this.modelValue?.timeSlot) {
|
||||
selectedRouteCode = null;
|
||||
return;
|
||||
}
|
||||
|
||||
const routeCodeFromParent = this.modelValue.timeSlot.routeCode;
|
||||
if (this.modelValue?.isPremiumAppointment) {
|
||||
selectedRouteCode = this.addPremiumFlagToInput(
|
||||
this.modelValue?.timeSlot?.routeCode
|
||||
);
|
||||
// Mobile Only
|
||||
this.selectedAnswerForTimeSlots = this.addPremiumFlagToInput(routeCodeFromParent);
|
||||
} else {
|
||||
selectedRouteCode = this.modelValue?.timeSlot?.routeCode;
|
||||
if (this.isDropOffRouteCode(routeCodeFromParent)) {
|
||||
this.selectedAnswerForDropOff = routeCodeFromParent;
|
||||
} else {
|
||||
this.selectedAnswerForDropOff = PICK_A_TIME_BUTTON_VALUE;
|
||||
this.selectedAnswerForTimeSlots = routeCodeFromParent;
|
||||
}
|
||||
}
|
||||
|
||||
return selectedRouteCode;
|
||||
},
|
||||
getWaitListRequestedFromStore() {
|
||||
return store.getters.order.customer?.waitListRequested;
|
||||
},
|
||||
autoSelectTimeSlotIfOnlyOneIsAvailable() {
|
||||
const numberOfOptions = this.availableTimeSlots?.length;
|
||||
const numberOfOptions = this.timeSlotsForSelectedDate.timeSlots?.length;
|
||||
if (numberOfOptions === 1) {
|
||||
this.selectedRouteCode = this.availableTimeSlots[0].value;
|
||||
if (this.availableTimeSlots.length > 0) {
|
||||
this.selectedAnswerForTimeSlots = this.availableTimeSlots[0].value;
|
||||
} else {
|
||||
this.selectedAnswerForDropOff = this.answersForDropOffQuestion[0].value;
|
||||
}
|
||||
}
|
||||
},
|
||||
addPremiumFlagToInput(routeCode) {
|
||||
|
|
@ -497,7 +561,6 @@ export default {
|
|||
if (routeCodeIncludesPremium) {
|
||||
routeCode = this.removePremiumFlagFromInput(routeCode);
|
||||
}
|
||||
|
||||
const timeSlot = this.timeSlotsForSelectedDate?.timeSlots?.find(
|
||||
(slot) => slot.id == routeCode
|
||||
);
|
||||
|
|
@ -537,6 +600,15 @@ export default {
|
|||
successMessageElement.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
},
|
||||
isDropOffRouteCode(routeCode) {
|
||||
if (!routeCode) {
|
||||
return false;
|
||||
}
|
||||
return (
|
||||
routeCode.includes(RouteCodeFlags.ALL_DAY_DROP_OFF) ||
|
||||
routeCode.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)
|
||||
);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
waitListRequested(newVal) {
|
||||
|
|
@ -563,12 +635,24 @@ export default {
|
|||
this.setSelectedTimeSlot();
|
||||
}
|
||||
},
|
||||
selectedAnswerForDropOff(newValue) {
|
||||
if (newValue == PICK_A_TIME_BUTTON_VALUE) {
|
||||
this.selectedRouteCode = null;
|
||||
} else {
|
||||
this.selectedAnswerForTimeSlots = null;
|
||||
this.selectedRouteCode = newValue;
|
||||
}
|
||||
},
|
||||
selectedAnswerForTimeSlots(newValue) {
|
||||
if (newValue) this.selectedRouteCode = newValue;
|
||||
},
|
||||
},
|
||||
components: {
|
||||
// Removed modal
|
||||
textBlock,
|
||||
buttonQuestion,
|
||||
checkboxQuestion,
|
||||
alert,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -641,5 +725,23 @@ export default {
|
|||
text-align: left;
|
||||
margin: 1.5rem 0 0;
|
||||
}
|
||||
.drop-off-alert {
|
||||
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_13957_112512)'%3E%3Cpath d='M5.99865 0C4.81147 4.82643e-07 3.65095 0.352111 2.66392 1.01179C1.67688 1.67146 0.907678 2.60907 0.45361 3.70599C-0.000459241 4.80291 -0.11899 6.00986 0.113013 7.17415C0.345015 8.33845 0.917126 9.40778 1.75697 10.2469C2.59682 11.086 3.66666 11.6571 4.83117 11.8881C5.99567 12.119 7.20251 11.9994 8.29902 11.5443C9.39553 11.0893 10.3324 10.3192 10.9912 9.33159C11.65 8.34396 12.0011 7.18313 12 5.99594C11.9971 4.40566 11.3638 2.88142 10.2388 1.75742C9.11375 0.633431 7.58894 0.00143011 5.99865 0V0ZM5.99865 11.2478C4.96135 11.2473 3.94748 10.9392 3.08518 10.3627C2.22288 9.7861 1.55085 8.96685 1.15401 8.00846C0.75718 7.05006 0.653353 5.99554 0.855656 4.97815C1.05796 3.96077 1.55731 3.02618 2.29061 2.29251C3.0239 1.55884 3.95823 1.059 4.97551 0.856176C5.99279 0.653349 7.04737 0.756633 8.00597 1.15297C8.96457 1.54931 9.78416 2.22092 10.3612 3.08293C10.9382 3.94493 11.2467 4.95864 11.2478 5.99594C11.2478 7.38835 10.6949 8.72377 9.71053 9.70861C8.7262 10.6934 7.39106 11.2471 5.99865 11.2478V11.2478Z' fill='%2306577C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.22736 8.84695C6.30613 8.76818 6.35038 8.66135 6.35038 8.54996V5.30996C6.35038 5.19857 6.30613 5.09174 6.22736 5.01298C6.1486 4.93421 6.04177 4.88996 5.93038 4.88996C5.81899 4.88996 5.71216 4.93421 5.63339 5.01298C5.55463 5.09174 5.51038 5.19857 5.51038 5.30996V8.54996C5.51038 8.66135 5.55463 8.76818 5.63339 8.84695C5.71216 8.92571 5.81899 8.96996 5.93038 8.96996C6.04177 8.96996 6.1486 8.92571 6.22736 8.84695ZM5.69704 3.97918C5.76611 4.02533 5.84731 4.04996 5.93038 4.04996C5.98558 4.05012 6.04026 4.03936 6.09129 4.01831C6.14232 3.99726 6.18868 3.96633 6.22771 3.9273C6.26675 3.88827 6.29768 3.8419 6.31873 3.79088C6.33978 3.73985 6.35053 3.68516 6.35038 3.62996C6.35038 3.54689 6.32574 3.46569 6.27959 3.39662C6.23344 3.32755 6.16785 3.27372 6.0911 3.24193C6.01436 3.21014 5.92991 3.20183 5.84844 3.21803C5.76697 3.23424 5.69213 3.27424 5.63339 3.33298C5.57465 3.39171 5.53465 3.46655 5.51845 3.54802C5.50224 3.6295 5.51056 3.71394 5.54235 3.79069C5.57414 3.86743 5.62797 3.93303 5.69704 3.97918Z' fill='%2306577C'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_13957_112512'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 0.75rem;
|
||||
background-position: 0.5rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0.5rem 0.5rem 0.5rem 1.5rem;
|
||||
gap: 0.25rem;
|
||||
background-color: #e4f1f7;
|
||||
|
||||
.alert-heading {
|
||||
text-align: left;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
848
src/layouts/service-location/service-location-june-2025.vue
Normal file
848
src/layouts/service-location/service-location-june-2025.vue
Normal file
|
|
@ -0,0 +1,848 @@
|
|||
<!-- OLD SERVICE LOCATION BEGINS -->
|
||||
|
||||
<!-- TODO: REMOVE THIS FILE ONCE CASH-803 (SERVICE-LOCATION AND SCHEDULE PAGE COMBINATION) HAS BEEN VETTED -->
|
||||
|
||||
<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">
|
||||
<mobileLocationModalQuestions
|
||||
customComponentId="mobileLocationQuestions"
|
||||
v-show="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"
|
||||
@setMobileLocation="setMobileLocationQuestions"
|
||||
@set-mobile-location-invalid="setMobileLocationInValid" />
|
||||
|
||||
<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 || 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 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) => {
|
||||
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,
|
||||
};
|
||||
},
|
||||
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();
|
||||
},
|
||||
},
|
||||
mobileLocationQuestions: {
|
||||
get: function () {
|
||||
return {
|
||||
addressQuestions: {
|
||||
streetAddress: this.streetAddress,
|
||||
apartmentNumberOrBusinessName: this.apartmentNumberOrBusinessName,
|
||||
city: this.city,
|
||||
state: this.state,
|
||||
zipCode: this.zipCode,
|
||||
},
|
||||
isVehicleProtected: this.isVehicleProtected,
|
||||
isMobileSelected: 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;
|
||||
}
|
||||
},
|
||||
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;
|
||||
},
|
||||
},
|
||||
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);
|
||||
this.setMobileLocationInValid(false);
|
||||
} else {
|
||||
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.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 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.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.$router.navigateWithSaving(
|
||||
this.navigationScenarios.CLICKED_FORWARD,
|
||||
this.pageName
|
||||
);
|
||||
},
|
||||
setMobileLocationInValid(isMobileLocationInValid) {
|
||||
this.isMobileAddressValid = !isMobileLocationInValid;
|
||||
},
|
||||
},
|
||||
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
|
||||
);
|
||||
if (this.zipCode == this.getServiceZipCodeFromStore()) {
|
||||
//restore mobile address from store in case user make changes to address but not commit it.
|
||||
this.streetAddress = this.getServiceAddressFromStore();
|
||||
this.apartmentNumberOrBusinessName = this.getServiceAddress2FromStore();
|
||||
this.city = this.getServiceCityFromStore();
|
||||
this.isVehicleProtected = this.getIsVehicleProtectedFromStore();
|
||||
this.$refs.mobileLocationQuestions.resetAlerts();
|
||||
} else {
|
||||
this.resetMobileLocation();
|
||||
}
|
||||
} 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>
|
||||
|
||||
<!-- OLD SERVICE LOCATION ENDS -->
|
||||
|
|
@ -277,23 +277,24 @@ export default {
|
|||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drop-off-alert {
|
||||
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_13957_112512)'%3E%3Cpath d='M5.99865 0C4.81147 4.82643e-07 3.65095 0.352111 2.66392 1.01179C1.67688 1.67146 0.907678 2.60907 0.45361 3.70599C-0.000459241 4.80291 -0.11899 6.00986 0.113013 7.17415C0.345015 8.33845 0.917126 9.40778 1.75697 10.2469C2.59682 11.086 3.66666 11.6571 4.83117 11.8881C5.99567 12.119 7.20251 11.9994 8.29902 11.5443C9.39553 11.0893 10.3324 10.3192 10.9912 9.33159C11.65 8.34396 12.0011 7.18313 12 5.99594C11.9971 4.40566 11.3638 2.88142 10.2388 1.75742C9.11375 0.633431 7.58894 0.00143011 5.99865 0V0ZM5.99865 11.2478C4.96135 11.2473 3.94748 10.9392 3.08518 10.3627C2.22288 9.7861 1.55085 8.96685 1.15401 8.00846C0.75718 7.05006 0.653353 5.99554 0.855656 4.97815C1.05796 3.96077 1.55731 3.02618 2.29061 2.29251C3.0239 1.55884 3.95823 1.059 4.97551 0.856176C5.99279 0.653349 7.04737 0.756633 8.00597 1.15297C8.96457 1.54931 9.78416 2.22092 10.3612 3.08293C10.9382 3.94493 11.2467 4.95864 11.2478 5.99594C11.2478 7.38835 10.6949 8.72377 9.71053 9.70861C8.7262 10.6934 7.39106 11.2471 5.99865 11.2478V11.2478Z' fill='%2306577C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.22736 8.84695C6.30613 8.76818 6.35038 8.66135 6.35038 8.54996V5.30996C6.35038 5.19857 6.30613 5.09174 6.22736 5.01298C6.1486 4.93421 6.04177 4.88996 5.93038 4.88996C5.81899 4.88996 5.71216 4.93421 5.63339 5.01298C5.55463 5.09174 5.51038 5.19857 5.51038 5.30996V8.54996C5.51038 8.66135 5.55463 8.76818 5.63339 8.84695C5.71216 8.92571 5.81899 8.96996 5.93038 8.96996C6.04177 8.96996 6.1486 8.92571 6.22736 8.84695ZM5.69704 3.97918C5.76611 4.02533 5.84731 4.04996 5.93038 4.04996C5.98558 4.05012 6.04026 4.03936 6.09129 4.01831C6.14232 3.99726 6.18868 3.96633 6.22771 3.9273C6.26675 3.88827 6.29768 3.8419 6.31873 3.79088C6.33978 3.73985 6.35053 3.68516 6.35038 3.62996C6.35038 3.54689 6.32574 3.46569 6.27959 3.39662C6.23344 3.32755 6.16785 3.27372 6.0911 3.24193C6.01436 3.21014 5.92991 3.20183 5.84844 3.21803C5.76697 3.23424 5.69213 3.27424 5.63339 3.33298C5.57465 3.39171 5.53465 3.46655 5.51845 3.54802C5.50224 3.6295 5.51056 3.71394 5.54235 3.79069C5.57414 3.86743 5.62797 3.93303 5.69704 3.97918Z' fill='%2306577C'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_13957_112512'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 0.75rem;
|
||||
background-position: 0.5rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0.5rem 0.5rem 0.5rem 1.5rem;
|
||||
gap: 0.25rem;
|
||||
.drop-off-alert {
|
||||
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_13957_112512)'%3E%3Cpath d='M5.99865 0C4.81147 4.82643e-07 3.65095 0.352111 2.66392 1.01179C1.67688 1.67146 0.907678 2.60907 0.45361 3.70599C-0.000459241 4.80291 -0.11899 6.00986 0.113013 7.17415C0.345015 8.33845 0.917126 9.40778 1.75697 10.2469C2.59682 11.086 3.66666 11.6571 4.83117 11.8881C5.99567 12.119 7.20251 11.9994 8.29902 11.5443C9.39553 11.0893 10.3324 10.3192 10.9912 9.33159C11.65 8.34396 12.0011 7.18313 12 5.99594C11.9971 4.40566 11.3638 2.88142 10.2388 1.75742C9.11375 0.633431 7.58894 0.00143011 5.99865 0V0ZM5.99865 11.2478C4.96135 11.2473 3.94748 10.9392 3.08518 10.3627C2.22288 9.7861 1.55085 8.96685 1.15401 8.00846C0.75718 7.05006 0.653353 5.99554 0.855656 4.97815C1.05796 3.96077 1.55731 3.02618 2.29061 2.29251C3.0239 1.55884 3.95823 1.059 4.97551 0.856176C5.99279 0.653349 7.04737 0.756633 8.00597 1.15297C8.96457 1.54931 9.78416 2.22092 10.3612 3.08293C10.9382 3.94493 11.2467 4.95864 11.2478 5.99594C11.2478 7.38835 10.6949 8.72377 9.71053 9.70861C8.7262 10.6934 7.39106 11.2471 5.99865 11.2478V11.2478Z' fill='%2306577C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.22736 8.84695C6.30613 8.76818 6.35038 8.66135 6.35038 8.54996V5.30996C6.35038 5.19857 6.30613 5.09174 6.22736 5.01298C6.1486 4.93421 6.04177 4.88996 5.93038 4.88996C5.81899 4.88996 5.71216 4.93421 5.63339 5.01298C5.55463 5.09174 5.51038 5.19857 5.51038 5.30996V8.54996C5.51038 8.66135 5.55463 8.76818 5.63339 8.84695C5.71216 8.92571 5.81899 8.96996 5.93038 8.96996C6.04177 8.96996 6.1486 8.92571 6.22736 8.84695ZM5.69704 3.97918C5.76611 4.02533 5.84731 4.04996 5.93038 4.04996C5.98558 4.05012 6.04026 4.03936 6.09129 4.01831C6.14232 3.99726 6.18868 3.96633 6.22771 3.9273C6.26675 3.88827 6.29768 3.8419 6.31873 3.79088C6.33978 3.73985 6.35053 3.68516 6.35038 3.62996C6.35038 3.54689 6.32574 3.46569 6.27959 3.39662C6.23344 3.32755 6.16785 3.27372 6.0911 3.24193C6.01436 3.21014 5.92991 3.20183 5.84844 3.21803C5.76697 3.23424 5.69213 3.27424 5.63339 3.33298C5.57465 3.39171 5.53465 3.46655 5.51845 3.54802C5.50224 3.6295 5.51056 3.71394 5.54235 3.79069C5.57414 3.86743 5.62797 3.93303 5.69704 3.97918Z' fill='%2306577C'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_13957_112512'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 0.75rem;
|
||||
background-position: 0.5rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0.5rem 0.5rem 0.5rem 1.5rem;
|
||||
gap: 0.25rem;
|
||||
background-color: #e4f1f7;
|
||||
|
||||
.alert-heading {
|
||||
text-align: left;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.25rem;
|
||||
.alert-heading {
|
||||
text-align: left;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -56,6 +56,7 @@ export const routeData = {
|
|||
path: "/insurance-company",
|
||||
},
|
||||
SERVICE_LOCATION: {
|
||||
// keep even though this page has been removed from the regular flow bc Heritage still points to it
|
||||
name: "service-location",
|
||||
path: "/service-location",
|
||||
},
|
||||
|
|
|
|||
|
|
@ -421,7 +421,7 @@ const routingTable = function () {
|
|||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD_WITH_CASH,
|
||||
destinationPageData: routeData.SERVICE_LOCATION,
|
||||
destinationPageData: routeData.SCHEDULE,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD_WITH_INSURANCE,
|
||||
|
|
@ -449,8 +449,26 @@ const routingTable = function () {
|
|||
},
|
||||
],
|
||||
},
|
||||
// TODO: REMOVE THIS COMMENT AND BELOW, ONCE CASH-803 (SERVICE-LOCATION AND SCHEDULE PAGE COMBINATION) HAS BEEN VETTED
|
||||
// {
|
||||
// pageName: routeData.SERVICE_LOCATION.name,
|
||||
// maps: [
|
||||
// {
|
||||
// scenario: navigationScenarios.CLICKED_BACK,
|
||||
// destinationPageData: routeData.QUOTE,
|
||||
// },
|
||||
// {
|
||||
// scenario: navigationScenarios.CLICKED_FORWARD,
|
||||
// destinationPageData: routeData.SCHEDULE,
|
||||
// },
|
||||
// {
|
||||
// scenario: navigationScenarios.CLICKED_FORWARD_WITH_MOBILE_SERVICE,
|
||||
// destinationPageData: routeData.MOBILE_DETAILS,
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
{
|
||||
pageName: routeData.SERVICE_LOCATION.name,
|
||||
pageName: routeData.SCHEDULE.name,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
|
|
@ -458,37 +476,24 @@ const routingTable = function () {
|
|||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD,
|
||||
destinationPageData: routeData.SCHEDULE,
|
||||
destinationPageData: routeData.CUSTOMER_DETAILS,
|
||||
},
|
||||
// {
|
||||
// scenario: navigationScenarios.CLICKED_CHANGE_LOCATION,
|
||||
// destinationPageData: routeData.SERVICE_LOCATION,
|
||||
// },
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD_WITH_MOBILE_SERVICE,
|
||||
destinationPageData: routeData.MOBILE_DETAILS,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
pageName: routeData.SCHEDULE.name,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationPageData: routeData.SERVICE_LOCATION,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD,
|
||||
destinationPageData: routeData.CUSTOMER_DETAILS,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_CHANGE_LOCATION,
|
||||
destinationPageData: routeData.SERVICE_LOCATION,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
pageName: routeData.MOBILE_DETAILS.name,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationPageData: routeData.SERVICE_LOCATION,
|
||||
destinationPageData: routeData.SCHEDULE,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD,
|
||||
|
|
|
|||
8
src/router/methods/route-logic/service-location.js
Normal file
8
src/router/methods/route-logic/service-location.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import { routeData } from "@/router/constants/routes";
|
||||
|
||||
export async function serviceLocationBeforeEnter(to, from) {
|
||||
return {
|
||||
name: routeData.SCHEDULE.name,
|
||||
replace: true,
|
||||
};
|
||||
}
|
||||
|
|
@ -12,6 +12,7 @@ import { errorBeforeEnter } from "@/router/methods/route-logic/error";
|
|||
import { restartBeforeEnter } from "@/router/methods/route-logic/restart";
|
||||
import { paymentMethodBeforeEnter } from "@/router/methods/route-logic/payment-method";
|
||||
import { paymentBeforeEnter } from "@/router/methods/route-logic/payment";
|
||||
import { serviceLocationBeforeEnter } from "@/router/methods/route-logic/service-location";
|
||||
|
||||
export const routes = [
|
||||
// Non-virtual pages.
|
||||
|
|
@ -29,7 +30,7 @@ export const routes = [
|
|||
createRoute(routeData.CAPABILITY_QUESTIONS),
|
||||
createRoute(routeData.QUOTE, quoteBeforeEnter),
|
||||
createRoute(routeData.INSURANCE_COMPANY, insuranceCompanyBeforeEnter),
|
||||
createRoute(routeData.SERVICE_LOCATION),
|
||||
createRoute(routeData.SERVICE_LOCATION, serviceLocationBeforeEnter),
|
||||
createRoute(routeData.SCHEDULE),
|
||||
createRoute(routeData.CUSTOMER_DETAILS),
|
||||
createRoute(routeData.PAYMENT_METHOD, paymentMethodBeforeEnter),
|
||||
|
|
|
|||
Loading…
Reference in a new issue