Merge branch 'release/2026.08.13' into nation/CASH-2801
This commit is contained in:
Carl Nation
commit
8aec8ba5f3
4 changed files with 541 additions and 36 deletions
|
|
@ -0,0 +1,145 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import schedulingZipSearch from "./scheduling-zip-search";
|
||||
import store from "@/store";
|
||||
import { errorMessages } from "@/constants/error-messages";
|
||||
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
||||
import {
|
||||
getBillToAccountNumber,
|
||||
getZipCodeData,
|
||||
} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
|
||||
|
||||
jest.mock("@/store", () => ({
|
||||
dispatch: jest.fn().mockResolvedValue(null),
|
||||
}));
|
||||
|
||||
jest.mock(
|
||||
"@/layouts/service-location/helpers/service-location-helper/service-location-helper",
|
||||
() => ({
|
||||
getZipCodeData: jest.fn().mockResolvedValue({
|
||||
state: "OH",
|
||||
zipCodeCtu: "03357",
|
||||
}),
|
||||
getBillToAccountNumber: jest.fn().mockResolvedValue("87291"),
|
||||
})
|
||||
);
|
||||
|
||||
const MOCK_CMS_CONTENT = {
|
||||
ServiceZipQuestionWidget: {
|
||||
QuestionText: "Service ZIP code:",
|
||||
},
|
||||
};
|
||||
|
||||
function mountComponent(props = {}, cmsContent = {}) {
|
||||
const cmsContentByWidget = {
|
||||
...MOCK_CMS_CONTENT,
|
||||
...cmsContent,
|
||||
ServiceZipQuestionWidget: {
|
||||
...MOCK_CMS_CONTENT.ServiceZipQuestionWidget,
|
||||
...cmsContent.ServiceZipQuestionWidget,
|
||||
},
|
||||
};
|
||||
|
||||
const cmsMixin = {
|
||||
methods: {
|
||||
getCmsContent: jest.fn((widgetName, fieldName) => {
|
||||
return cmsContentByWidget[widgetName]?.[fieldName] ?? "";
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
||||
const mountOptions = getMountOptions({
|
||||
route: { name: "scheduling" },
|
||||
mixins: [cmsMixin],
|
||||
});
|
||||
|
||||
return shallowMount(schedulingZipSearch, {
|
||||
props: {
|
||||
modelValue: "",
|
||||
pageNameToLog: "scheduling",
|
||||
...props,
|
||||
},
|
||||
global: mountOptions.global,
|
||||
});
|
||||
}
|
||||
|
||||
describe("scheduling-zip-search.vue", () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
test("prefills the zip input and CMS label from modelValue / ServiceZipQuestionWidget", () => {
|
||||
const wrapper = mountComponent({ modelValue: "43235" });
|
||||
|
||||
expect(wrapper.find("#sz-service-zip").element.value).toBe("43235");
|
||||
expect(wrapper.vm.zipLabelText).toBe("Service ZIP code:");
|
||||
expect(wrapper.find("label").html()).toContain("Service ZIP code:");
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test("shows required error when searching with a blank zip", async () => {
|
||||
const wrapper = mountComponent({ modelValue: "" });
|
||||
|
||||
await wrapper.vm.onZipSearch({ preventDefault: jest.fn() });
|
||||
|
||||
expect(wrapper.vm.errorMessage).toBe(errorMessages.SERVICE_ZIP_REQUIRED);
|
||||
expect(wrapper.find(".scheduling-zip-search__error").classes()).toContain("active");
|
||||
expect(getZipCodeData).not.toHaveBeenCalled();
|
||||
expect(wrapper.emitted("zip-searched")).toBeUndefined();
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test("shows format error when zip is invalid", async () => {
|
||||
const wrapper = mountComponent({ modelValue: "123" });
|
||||
|
||||
await wrapper.vm.onZipSearch({ preventDefault: jest.fn() });
|
||||
|
||||
expect(wrapper.vm.errorMessage).toBe(errorMessages.SERVICE_ZIP_FORMAT);
|
||||
expect(getZipCodeData).not.toHaveBeenCalled();
|
||||
expect(wrapper.emitted("zip-searched")).toBeUndefined();
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test("does not search when disabled", async () => {
|
||||
const wrapper = mountComponent({ modelValue: "44101", disabled: true });
|
||||
|
||||
await wrapper.vm.onZipSearch({ preventDefault: jest.fn() });
|
||||
|
||||
expect(getZipCodeData).not.toHaveBeenCalled();
|
||||
expect(wrapper.emitted("zip-searched")).toBeUndefined();
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test("saves zip info and emits billToAccountNumber when a valid zip is searched", async () => {
|
||||
const wrapper = mountComponent({ modelValue: "44101" });
|
||||
|
||||
await wrapper.vm.onZipSearch({ preventDefault: jest.fn() });
|
||||
|
||||
expect(getZipCodeData).toHaveBeenCalledWith("44101", "scheduling");
|
||||
expect(getBillToAccountNumber).toHaveBeenCalledWith("03357", "scheduling");
|
||||
expect(store.dispatch).toHaveBeenCalledWith("saveServiceZipCodeInfo", {
|
||||
zipCode: "44101",
|
||||
state: "OH",
|
||||
zipCodeCtu: "03357",
|
||||
});
|
||||
expect(wrapper.emitted("zip-searched")).toEqual([
|
||||
[{ zipCode: "44101", billToAccountNumber: "87291" }],
|
||||
]);
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test("focusZipInput scrolls and focuses the zip input", () => {
|
||||
const wrapper = mountComponent({ modelValue: "43235" });
|
||||
const zipInput = wrapper.find("#sz-service-zip").element;
|
||||
zipInput.scrollIntoView = jest.fn();
|
||||
zipInput.focus = jest.fn();
|
||||
|
||||
wrapper.vm.focusZipInput();
|
||||
|
||||
expect(zipInput.scrollIntoView).toHaveBeenCalledWith({
|
||||
behavior: "smooth",
|
||||
block: "center",
|
||||
});
|
||||
expect(zipInput.focus).toHaveBeenCalledWith({ preventScroll: true });
|
||||
wrapper.unmount();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,207 @@
|
|||
<template>
|
||||
<div class="scheduling-zip-search mt-4">
|
||||
<label for="sz-service-zip" v-html="zipLabelText"></label>
|
||||
<div class="scheduling-zip-search__input-wrapper">
|
||||
<input
|
||||
id="sz-service-zip"
|
||||
ref="zipInput"
|
||||
class="scheduling-zip-search__input"
|
||||
:class="{ 'has-error': hasError }"
|
||||
type="text"
|
||||
name="sz-service-zip"
|
||||
:value="localZipCode"
|
||||
:disabled="disabled"
|
||||
@input="onZipInput"
|
||||
@keydown.enter="onZipSearch" />
|
||||
<button
|
||||
class="scheduling-zip-search__search-button"
|
||||
type="button"
|
||||
aria-label="Search"
|
||||
:disabled="disabled"
|
||||
@click="onZipSearch" />
|
||||
</div>
|
||||
<span class="scheduling-zip-search__error" :class="{ active: hasError }">
|
||||
{{ errorMessage }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from "@/store";
|
||||
import { storeActions } from "@/constants/store-actions";
|
||||
import { defineRule, validate } from "vee-validate";
|
||||
import { required, regex } from "@/helpers/validation-rules";
|
||||
import { errorMessages } from "@/constants/error-messages";
|
||||
import {
|
||||
getBillToAccountNumber,
|
||||
getZipCodeData,
|
||||
} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
|
||||
|
||||
defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
|
||||
defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
|
||||
|
||||
const ZIP_VALIDATION_RULES = "zip-required|zip-format";
|
||||
|
||||
export default {
|
||||
name: "schedulingZipSearch",
|
||||
emits: ["update:modelValue", "zip-searched"],
|
||||
props: {
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
pageNameToLog: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
errorMessage: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
hasError() {
|
||||
return Boolean(this.errorMessage);
|
||||
},
|
||||
zipLabelText() {
|
||||
return this.getCmsContent("ServiceZipQuestionWidget", "QuestionText");
|
||||
},
|
||||
localZipCode: {
|
||||
get() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set(value) {
|
||||
this.$emit("update:modelValue", value);
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onZipInput(event) {
|
||||
const digitsOnly = event.target.value.replace(/\D/g, "").slice(0, 5);
|
||||
event.target.value = digitsOnly;
|
||||
this.localZipCode = digitsOnly;
|
||||
this.errorMessage = "";
|
||||
},
|
||||
focusZipInput() {
|
||||
const zipInput = this.$refs.zipInput;
|
||||
if (!zipInput) {
|
||||
return;
|
||||
}
|
||||
|
||||
zipInput.scrollIntoView({ behavior: "smooth", block: "center" });
|
||||
zipInput.focus({ preventScroll: true });
|
||||
},
|
||||
async onZipSearch(event) {
|
||||
event?.preventDefault?.();
|
||||
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const validationResult = await validate(this.localZipCode, ZIP_VALIDATION_RULES);
|
||||
if (!validationResult.valid) {
|
||||
this.errorMessage = validationResult.errors[0] ?? "";
|
||||
this.$refs.zipInput?.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
this.errorMessage = "";
|
||||
|
||||
const zipCodeData = await getZipCodeData(this.localZipCode, this.pageNameToLog);
|
||||
await store.dispatch(storeActions.SAVE_SERVICE_ZIP_CODE_INFO, {
|
||||
zipCode: this.localZipCode,
|
||||
state: zipCodeData.state,
|
||||
zipCodeCtu: zipCodeData.zipCodeCtu,
|
||||
});
|
||||
const billToAccountNumber = await getBillToAccountNumber(
|
||||
zipCodeData.zipCodeCtu,
|
||||
this.pageNameToLog
|
||||
);
|
||||
|
||||
this.$emit("zip-searched", {
|
||||
zipCode: this.localZipCode,
|
||||
billToAccountNumber,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.scheduling-zip-search {
|
||||
label {
|
||||
display: flex;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__input-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__input {
|
||||
height: 48px;
|
||||
width: 100%;
|
||||
border-radius: 50rem;
|
||||
border: none;
|
||||
outline: 1px solid $gray-300;
|
||||
box-shadow: 0px 1px 4px 0 rgba(0, 0, 0, 0.2);
|
||||
color: $gray-650;
|
||||
font-weight: 400;
|
||||
padding-left: 1rem;
|
||||
padding-right: 3.5rem;
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid #0070d1;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.has-error {
|
||||
outline: 2px solid $red;
|
||||
}
|
||||
}
|
||||
|
||||
&__search-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 48px;
|
||||
border-radius: 0 50rem 50rem 0;
|
||||
width: 50px;
|
||||
border: none;
|
||||
background-color: $blue-150;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7816 14.733L11.825 10.7765C12.8831 9.4503 13.3934 7.76935 13.2512 6.07874C13.1089 4.38812 12.3248 2.81612 11.0599 1.68544C9.79496 0.554768 8.1452 -0.0487819 6.44927 -0.0013033C4.75335 0.0461753 3.13993 0.74108 1.94026 1.94075C0.740592 3.14042 0.045687 4.75384 -0.00179158 6.44976C-0.0492702 8.14569 0.55428 9.79545 1.68495 11.0604C2.81563 12.3253 4.38763 13.1094 6.07825 13.2516C7.76886 13.3939 9.44981 12.8836 10.776 11.8255L14.7347 15.7842C14.8042 15.8529 14.8867 15.9073 14.9773 15.9442C15.0678 15.981 15.1648 15.9997 15.2626 15.9991C15.3604 15.9985 15.4571 15.9787 15.5473 15.9407C15.6374 15.9027 15.7192 15.8474 15.7879 15.7778C15.8567 15.7082 15.911 15.6258 15.9479 15.5352C15.9848 15.4446 16.0035 15.3477 16.0029 15.2499C16.0023 15.1521 15.9824 15.0553 15.9445 14.9652C15.9065 14.8751 15.8511 14.7933 15.7816 14.7246V14.733ZM6.63719 11.7916C5.61784 11.7916 4.62139 11.4893 3.77383 10.923C2.92628 10.3567 2.26569 9.55175 1.8756 8.60999C1.48551 7.66824 1.38345 6.63196 1.58231 5.6322C1.78118 4.63244 2.27204 3.7141 2.99283 2.99332C3.71361 2.27253 4.63195 1.78167 5.63171 1.5828C6.63147 1.38394 7.66775 1.486 8.6095 1.87609C9.55126 2.26618 10.3562 2.92677 10.9225 3.77432C11.4888 4.62188 11.7911 5.61833 11.7911 6.63768C11.7894 8.00406 11.2459 9.314 10.2797 10.2802C9.31351 11.2464 8.00357 11.7899 6.63719 11.7916Z' fill='%230070D1'/%3E%3C/svg%3E%0A");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
&__error {
|
||||
color: $red;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.25rem;
|
||||
display: flex;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
&.active {
|
||||
max-height: 25px;
|
||||
transition: max-height 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -9,7 +9,11 @@ jest.mock("@/store", () => ({
|
|||
getters: {
|
||||
order: {
|
||||
serviceLocation: { zipCode: "43235", appointmentType: null },
|
||||
payment: { isInsurance: false, insuranceCoverage: { isVerified: false } },
|
||||
payment: {
|
||||
isInsurance: false,
|
||||
insuranceCoverage: { isVerified: false },
|
||||
billToAccountNumber: "12345",
|
||||
},
|
||||
referralNumber: "",
|
||||
damage: { isRepair: false },
|
||||
lineItems: { glassParts: [] },
|
||||
|
|
@ -179,4 +183,70 @@ describe("scheduling.vue", () => {
|
|||
wrapper.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
describe("service zip", () => {
|
||||
test("prefills zipSearchCode and billToAccountNumber from store and renders zip search", () => {
|
||||
const { wrapper } = setupMocks();
|
||||
|
||||
expect(wrapper.vm.zipSearchCode).toBe("43235");
|
||||
expect(wrapper.vm.billToAccountNumber).toBe("12345");
|
||||
expect(wrapper.find("scheduling-zip-search-stub").exists()).toBe(true);
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test("reloads providers and timeslots when zip-searched is emitted", async () => {
|
||||
store.dispatch.mockClear();
|
||||
store.dispatch.mockImplementation((action) => {
|
||||
if (action === "getProviders") {
|
||||
return Promise.resolve({
|
||||
data: {
|
||||
shopProviders: [{ providerNumber: "05018" }],
|
||||
mobileProviderNumber: "12345",
|
||||
},
|
||||
});
|
||||
}
|
||||
return Promise.resolve(null);
|
||||
});
|
||||
settleAllPromises.mockResolvedValueOnce({
|
||||
inshopTimeSlots: {
|
||||
providerTimeSlots: [
|
||||
{ providerNumber: "05018", days: [{ date: "2026-07-22", timeSlots: [] }] },
|
||||
],
|
||||
},
|
||||
mobileTimeSlots: { days: [{ date: "2026-07-22", timeSlots: [] }] },
|
||||
});
|
||||
|
||||
const { wrapper } = setupMocks();
|
||||
await wrapper.setData({ isLoadingDates: false });
|
||||
wrapper.vm.datePickerEndDate = "2026-08-15";
|
||||
wrapper.vm.selectedScheduling = { appointmentType: "Mobile" };
|
||||
const initialDatePickerKey = wrapper.vm.datePickerKey;
|
||||
|
||||
await wrapper.vm.onZipSearched({ zipCode: "44101", billToAccountNumber: "87291" });
|
||||
|
||||
expect(store.dispatch).toHaveBeenCalledWith("getProviders", {
|
||||
payload: { serviceZipCode: "44101" },
|
||||
pageNameToLog: undefined,
|
||||
});
|
||||
expect(wrapper.vm.billToAccountNumber).toBe("87291");
|
||||
expect(settleAllPromises).toHaveBeenCalled();
|
||||
expect(wrapper.vm.datePickerKey).toBe(initialDatePickerKey + 1);
|
||||
expect(wrapper.vm.selectedDate).toBeNull();
|
||||
expect(wrapper.vm.selectedScheduling).toBeNull();
|
||||
expect(wrapper.vm.isWaitlistRequested).toBe(false);
|
||||
expect(wrapper.vm.inshopProvidersAndTimeSlots).toHaveLength(1);
|
||||
expect(wrapper.vm.mobileProviderAndTimeSlot.providerNumber).toBe("12345");
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test("anchors to zip search when mobile zip is clicked", () => {
|
||||
const { wrapper } = setupMocks();
|
||||
wrapper.vm.$refs.schedulingZipSearch.focusZipInput = jest.fn();
|
||||
|
||||
wrapper.vm.onMobileZipCodeClicked();
|
||||
|
||||
expect(wrapper.vm.$refs.schedulingZipSearch.focusZipInput).toHaveBeenCalled();
|
||||
wrapper.unmount();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,13 +5,18 @@
|
|||
<div class="container page-container-grouped-styles">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
|
||||
<h5 class="fw-normal mb-0 dark-header" :class="headerColor">
|
||||
<span>
|
||||
{{ serviceLocationText }}
|
||||
</span>
|
||||
</h5>
|
||||
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" alignLeft />
|
||||
<funnelSubHeader
|
||||
cmsWidgetName="FunnelSubHeaderWidget"
|
||||
:overrideHeaderSubText="estimatedTimeText"
|
||||
alignLeft />
|
||||
<schedulingZipSearch
|
||||
ref="schedulingZipSearch"
|
||||
v-model="zipSearchCode"
|
||||
:disabled="isLoadingDates"
|
||||
:pageNameToLog="pageName"
|
||||
@zip-searched="onZipSearched" />
|
||||
<datePicker
|
||||
:key="datePickerKey"
|
||||
class="mt-5"
|
||||
v-model="selectedDate"
|
||||
:startDate="datePickerStartDate"
|
||||
|
|
@ -92,12 +97,15 @@ import mobileSchedulingCard from "@/layouts/scheduling/mobile-scheduling-card/mo
|
|||
import inshopSchedulingCard from "@/layouts/scheduling/inshop-scheduling-card/inshop-scheduling-card";
|
||||
import interceptOverlay from "@/ux-components/intercept-overlay/intercept-overlay";
|
||||
import waitlistQuestion from "@/layouts/scheduling/waitlist-question/waitlist-question";
|
||||
import schedulingZipSearch from "@/layouts/scheduling/scheduling-zip-search/scheduling-zip-search";
|
||||
import textLink from "@/ux-components/text-link/text-link";
|
||||
import store from "@/store";
|
||||
import { storeActions } from "@/constants/store-actions";
|
||||
import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from "@/constants/schedule-constants";
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
|
||||
import { getDisplayTextForDurationLength } from "@/helpers/duration-length-helper";
|
||||
import {
|
||||
flushPagePrereqsLogs,
|
||||
hasServiceZipInfo,
|
||||
|
|
@ -274,38 +282,12 @@ export default {
|
|||
},
|
||||
];
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
const allShopProviders = resultMap.providers?.shopProviders ?? [];
|
||||
const providers = allShopProviders.slice(0, INITIAL_INSHOP_PROVIDER_COUNT);
|
||||
const mobileProviderNumber = resultMap.providers?.mobileProviderNumber ?? null;
|
||||
next(async (vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.allShopProviders = allShopProviders;
|
||||
vm.inshopProvidersAndTimeSlots = providers.map((provider) => ({
|
||||
provider,
|
||||
timeSlots: null,
|
||||
}));
|
||||
vm.mobileProviderAndTimeSlot = mobileProviderNumber
|
||||
? { providerNumber: mobileProviderNumber, timeSlots: null }
|
||||
: null;
|
||||
const startDate = toDateString(0);
|
||||
const endDate = toDateString(SCHEDULE_FETCH_DAYS - 1);
|
||||
const providerNumbers = providers.map((provider) => provider.providerNumber);
|
||||
const timeSlotsResultMap = await fetchTimeSlotsBatch({
|
||||
startDate,
|
||||
endDate,
|
||||
providerNumbers,
|
||||
zipCode: serviceZipCode,
|
||||
includeMobile: Boolean(mobileProviderNumber),
|
||||
await vm.loadSchedulingData(serviceZipCode, {
|
||||
providersResult: resultMap.providers,
|
||||
pageNameToLog: to.name,
|
||||
});
|
||||
assignInshopTimeSlotsFromV2Response(
|
||||
vm.inshopProvidersAndTimeSlots,
|
||||
timeSlotsResultMap.inshopTimeSlots
|
||||
);
|
||||
if (vm.mobileProviderAndTimeSlot) {
|
||||
vm.mobileProviderAndTimeSlot.timeSlots = timeSlotsResultMap.mobileTimeSlots ?? null;
|
||||
}
|
||||
vm.datesLoaded = true;
|
||||
vm.mobilePremiumAppointmentFee = resultMap.mobilePremiumFee ?? null;
|
||||
vm.isLoadingDates = false;
|
||||
});
|
||||
|
|
@ -325,6 +307,19 @@ export default {
|
|||
viewMoreShopsText() {
|
||||
return this.getCmsContent("ViewMoreShopsWidget", "Text");
|
||||
},
|
||||
estimatedTimeText() {
|
||||
if (!this.estimatedServiceMinutesMinimum || !this.estimatedServiceMinutesMaximum) {
|
||||
return " ";
|
||||
}
|
||||
const durationText = getDisplayTextForDurationLength(
|
||||
this.estimatedServiceMinutesMinimum,
|
||||
this.estimatedServiceMinutesMaximum
|
||||
);
|
||||
return this.getCmsContent("FunnelSubHeaderWidget", "HeaderSubText").replace(
|
||||
"{custom:DURATION}",
|
||||
durationText
|
||||
);
|
||||
},
|
||||
serviceZipCode() {
|
||||
return store.getters.order.serviceLocation.zipCode;
|
||||
},
|
||||
|
|
@ -376,6 +371,8 @@ export default {
|
|||
datesLoaded: false,
|
||||
datePickerStartDate: toDateString(0),
|
||||
datePickerEndDate: toDateString(SCHEDULE_FETCH_DAYS - 1),
|
||||
estimatedServiceMinutesMinimum: null,
|
||||
estimatedServiceMinutesMaximum: null,
|
||||
inshopProvidersAndTimeSlots: [],
|
||||
allShopProviders: [],
|
||||
mobileProviderAndTimeSlot: null,
|
||||
|
|
@ -383,9 +380,77 @@ export default {
|
|||
selectedScheduling: null,
|
||||
isWaitlistRequested: false,
|
||||
isLoadingMoreShops: false,
|
||||
zipSearchCode: store.getters.order.serviceLocation.zipCode ?? "",
|
||||
datePickerKey: 0,
|
||||
billToAccountNumber: store.getters.order.payment?.billToAccountNumber ?? null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async loadSchedulingData(
|
||||
serviceZipCode,
|
||||
{ providersResult = null, pageNameToLog = this.pageName } = {}
|
||||
) {
|
||||
let providersData = providersResult;
|
||||
if (!providersData) {
|
||||
providersData = await store.dispatch("getProviders", {
|
||||
payload: { serviceZipCode },
|
||||
pageNameToLog,
|
||||
});
|
||||
}
|
||||
if (providersData?.shopProviders === undefined) {
|
||||
providersData = providersData?.data ?? {};
|
||||
}
|
||||
|
||||
const allShopProviders = providersData.shopProviders ?? [];
|
||||
const providers = allShopProviders.slice(0, INITIAL_INSHOP_PROVIDER_COUNT);
|
||||
const mobileProviderNumber = providersData?.mobileProviderNumber ?? null;
|
||||
|
||||
this.allShopProviders = allShopProviders;
|
||||
this.inshopProvidersAndTimeSlots = providers.map((provider) => ({
|
||||
provider,
|
||||
timeSlots: null,
|
||||
}));
|
||||
this.mobileProviderAndTimeSlot = mobileProviderNumber
|
||||
? { providerNumber: mobileProviderNumber, timeSlots: null }
|
||||
: null;
|
||||
|
||||
const startDate = toDateString(0);
|
||||
const endDate = toDateString(SCHEDULE_FETCH_DAYS - 1);
|
||||
const providerNumbers = providers.map((provider) => provider.providerNumber);
|
||||
const timeSlotsResultMap = await fetchTimeSlotsBatch({
|
||||
startDate,
|
||||
endDate,
|
||||
providerNumbers,
|
||||
zipCode: serviceZipCode,
|
||||
includeMobile: Boolean(mobileProviderNumber),
|
||||
pageNameToLog,
|
||||
});
|
||||
|
||||
if (timeSlotsResultMap.inshopTimeSlots) {
|
||||
this.estimatedServiceMinutesMinimum =
|
||||
timeSlotsResultMap.inshopTimeSlots.estimatedServiceMinutesMinimum;
|
||||
this.estimatedServiceMinutesMaximum =
|
||||
timeSlotsResultMap.inshopTimeSlots.estimatedServiceMinutesMaximum;
|
||||
} else if (timeSlotsResultMap.mobileTimeSlots) {
|
||||
this.estimatedServiceMinutesMinimum =
|
||||
timeSlotsResultMap.mobileTimeSlots.estimatedServiceMinutesMinimum;
|
||||
this.estimatedServiceMinutesMaximum =
|
||||
timeSlotsResultMap.mobileTimeSlots.estimatedServiceMinutesMaximum;
|
||||
} else {
|
||||
this.estimatedServiceMinutesMinimum = null;
|
||||
this.estimatedServiceMinutesMaximum = null;
|
||||
}
|
||||
|
||||
assignInshopTimeSlotsFromV2Response(
|
||||
this.inshopProvidersAndTimeSlots,
|
||||
timeSlotsResultMap.inshopTimeSlots
|
||||
);
|
||||
if (this.mobileProviderAndTimeSlot) {
|
||||
this.mobileProviderAndTimeSlot.timeSlots =
|
||||
timeSlotsResultMap.mobileTimeSlots ?? null;
|
||||
}
|
||||
this.datesLoaded = true;
|
||||
},
|
||||
getInshopTimeSlotsForSelectedDate(providerNumber) {
|
||||
if (!this.selectedDate) {
|
||||
return [];
|
||||
|
|
@ -401,7 +466,24 @@ export default {
|
|||
console.log("onInshopAddressClicked", provider?.providerNumber);
|
||||
},
|
||||
onMobileZipCodeClicked() {
|
||||
// TODO: open service zip modal when zip edit is implemented for scheduling page
|
||||
this.$refs.schedulingZipSearch?.focusZipInput();
|
||||
},
|
||||
async onZipSearched({ zipCode, billToAccountNumber }) {
|
||||
this.billToAccountNumber = billToAccountNumber;
|
||||
this.isLoadingDates = true;
|
||||
try {
|
||||
this.selectedDate = null;
|
||||
this.selectedScheduling = null;
|
||||
this.isWaitlistRequested = false;
|
||||
this.isLoadingMoreShops = false;
|
||||
this.datesLoaded = false;
|
||||
this.datePickerKey += 1;
|
||||
this.datePickerStartDate = toDateString(0);
|
||||
this.datePickerEndDate = toDateString(SCHEDULE_FETCH_DAYS - 1);
|
||||
await this.loadSchedulingData(zipCode);
|
||||
} finally {
|
||||
this.isLoadingDates = false;
|
||||
}
|
||||
},
|
||||
async onViewMoreShopsClick() {
|
||||
if (this.isLoadingDates || this.isLoadingMoreShops) return;
|
||||
|
|
@ -528,6 +610,7 @@ export default {
|
|||
inshopSchedulingCard,
|
||||
interceptOverlay,
|
||||
waitlistQuestion,
|
||||
schedulingZipSearch,
|
||||
textLink,
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue