CASH-2751 - Scheduling Service zip changes

src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.spec.js

@@ -1,6 +1,7 @@
 import { shallowMount } from "@vue/test-utils";
 import schedulingZipSearch from "./scheduling-zip-search";
 import store from "@/store";
+import { errorMessages } from "@/constants/error-messages";
 import {
     getBillToAccountNumber,
     getZipCodeData,
@@ -21,77 +22,72 @@ jest.mock(
     })
 );
 
-function mountComponent(props = {}) {
+function createWrapper(props = {}) {
     return shallowMount(schedulingZipSearch, {
         props: {
-            modelValue: "43235",
+            modelValue: "",
             pageNameToLog: "scheduling",
             ...props,
         },
+        global: {
+            mocks: {
+                $root: {
+                    cmsContentByWidget: {
+                        ServiceZipQuestionWidget: {
+                            QuestionText: "Service ZIP code:",
+                        },
+                    },
+                },
+            },
+        },
     });
 }
 
 describe("scheduling-zip-search.vue", () => {
-    test("renders serviceZipQuestion with search icon", () => {
-        const wrapper = mountComponent();
-        const zipQuestion = wrapper.find("service-zip-question-stub");
-        expect(zipQuestion.exists()).toBe(true);
-        expect(zipQuestion.attributes("includesearchicon")).toBeDefined();
-        wrapper.unmount();
+    beforeEach(() => {
+        jest.clearAllMocks();
     });
 
-    test("validates zip on search when field is blank", async () => {
-        const validate = jest.fn().mockResolvedValue({ valid: false });
-        const wrapper = mountComponent({ modelValue: "" });
-        Object.defineProperty(wrapper.vm.$refs, "zipCodeSearch", {
-            configurable: true,
-            value: {
-                $refs: {
-                    zipInputTextQuestion: { validate },
-                },
-            },
-        });
+    test("prefills the zip input and CMS label from modelValue / ServiceZipQuestionWidget", () => {
+        const wrapper = createWrapper({ 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:");
+    });
+
+    test("shows required error when searching with a blank zip", async () => {
+        const wrapper = createWrapper({ modelValue: "" });
 
         await wrapper.vm.onZipSearch({ preventDefault: jest.fn() });
 
-        expect(validate).toHaveBeenCalled();
+        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();
+    });
+
+    test("shows format error when zip is invalid", async () => {
+        const wrapper = createWrapper({ 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 validate = jest.fn().mockResolvedValue({ valid: true });
-        const wrapper = mountComponent({ disabled: true });
-        Object.defineProperty(wrapper.vm.$refs, "zipCodeSearch", {
-            configurable: true,
-            value: {
-                $refs: {
-                    zipInputTextQuestion: { validate },
-                },
-            },
-        });
+        const wrapper = createWrapper({ modelValue: "44101", disabled: true });
 
         await wrapper.vm.onZipSearch({ preventDefault: jest.fn() });
 
-        expect(validate).toHaveBeenCalled();
         expect(getZipCodeData).not.toHaveBeenCalled();
-        wrapper.unmount();
+        expect(wrapper.emitted("zip-searched")).toBeUndefined();
     });
 
     test("saves zip info and emits billToAccountNumber when a valid zip is searched", async () => {
-        store.dispatch.mockClear();
-        const wrapper = mountComponent({ modelValue: "44101" });
-        Object.defineProperty(wrapper.vm.$refs, "zipCodeSearch", {
-            configurable: true,
-            value: {
-                $refs: {
-                    zipInputTextQuestion: {
-                        validate: jest.fn().mockResolvedValue({ valid: true }),
-                    },
-                },
-            },
-        });
+        const wrapper = createWrapper({ modelValue: "44101" });
 
         await wrapper.vm.onZipSearch({ preventDefault: jest.fn() });
 
@@ -105,6 +101,20 @@ describe("scheduling-zip-search.vue", () => {
         expect(wrapper.emitted("zip-searched")).toEqual([
             [{ zipCode: "44101", billToAccountNumber: "87291" }],
         ]);
-        wrapper.unmount();
+    });
+
+    test("focusZipInput scrolls and focuses the zip input", () => {
+        const wrapper = createWrapper({ 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 });
     });
 });

src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.vue

@@ -1,37 +1,47 @@
 <template>
-    <form class="scheduling-zip-search mt-4" @submit.prevent="onZipSearch">
-        <form>
-            <div class="sz-form-group">
-                <label for="sz-service-zip">Service ZIP code:</label>
-                <div class="sz-zip-input-wrapper">
-                    <input class="sz-zip-input" type="text" id="sz-service-zip" name="sz-service-zip">
-                    <button class="sz-search-button" type="button" aria-label="Search">
-                        <svg><!-- search icon --></svg>
-                    </button>
-                </div>
-                <span class="sz-error-message">Please enter your service ZIP</span>
-            </div>
-        </form>
-        <!-- <serviceZipQuestion
-            ref="zipCodeSearch"
-            v-model="localZipCode"
-            cmsWidgetName="ServiceZipQuestionWidget"
-            includeSearchIcon
-            isRequired
-            @search-icon-click="onZipSearch"
-            @keydown.enter="onZipSearch" /> -->
-    </form>
+    <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 serviceZipQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-question/service-zip-question";
 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"],
@@ -49,7 +59,18 @@ export default {
             default: null,
         },
     },
+    data() {
+        return {
+            errorMessage: "",
+        };
+    },
     computed: {
+        hasError() {
+            return Boolean(this.errorMessage);
+        },
+        zipLabelText() {
+            return this.getCmsContent("ServiceZipQuestionWidget", "QuestionText");
+        },
         localZipCode: {
             get() {
                 return this.modelValue;
@@ -60,8 +81,14 @@ export default {
         },
     },
     methods: {
-        onMobileZipCodeClicked() {
-            const zipInput = document.getElementById("sz-service-zip");
+        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;
             }
@@ -72,16 +99,19 @@ export default {
         async onZipSearch(event) {
             event?.preventDefault?.();
 
-            const zipInput = this.$refs.zipCodeSearch?.$refs?.zipInputTextQuestion;
-            if (!zipInput) {
+            if (this.disabled) {
                 return;
             }
 
-            const validationResult = await zipInput.validate();
-            if (!validationResult.valid || this.disabled) {
+            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,
@@ -92,165 +122,86 @@ export default {
                 zipCodeData.zipCodeCtu,
                 this.pageNameToLog
             );
+
             this.$emit("zip-searched", {
                 zipCode: this.localZipCode,
                 billToAccountNumber,
             });
         },
     },
-    // components: {
-    //     serviceZipQuestion,
-    // },
 };
 </script>
 
 <style lang="scss" scoped>
-.sz-form-group {
+.scheduling-zip-search {
     label {
         display: flex;
         margin-bottom: 0.5rem;
         font-weight: 600;
     }
-    .sz-zip-input-wrapper {
+
+    &__input-wrapper {
         position: relative;
-        .sz-zip-input {
-            height: 48px;
-            width: 100%;
-            border-radius: 50rem;
+    }
+
+    &__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;
-            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;
-            &:focus {
-                outline: 2px solid #0070d1;
-                border: none;
-            }
         }
-        .sz-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;
+
+        &.has-error {
+            outline: 2px solid $red;
         }
     }
-    .sz-error-message {
+
+    &__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;
         }
     }
 }
-// .scheduling-zip-search {
-//     position: relative;
-//     display: flex;
-//     flex-direction: row;
-//     align-items: stretch;
-//     width: 100%;
-//     height: 48px;
-//     border-radius: 48px;
-//     padding-left: 16px;
-//     border: 1px solid $gray-500;
-//     background: $white;
-//     box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
-
-//     &:has(:deep(.textbox-question.has-error)) {
-//         border-color: $red;
-//     }
-
-//     @include media-breakpoint-up(md) {
-//         height: auto;
-//         padding-left: 0;
-//     }
-
-//     :deep(.textbox-question) {
-//         width: 100%;
-//         margin-bottom: 0;
-//     }
-
-//     :deep(.input-wrapper.has-search-icon) {
-//         display: flex;
-//         align-items: stretch;
-//         flex: 1 1 0;
-//         height: 100%;
-//         margin-bottom: 0;
-
-//         input,
-//         .form-control {
-//             width: 100%;
-//             height: 48px;
-//             min-height: 48px;
-//             max-height: 48px;
-//             border: none;
-//             padding: 0 1.5rem;
-//             outline: none;
-//             font-size: 1rem;
-//             background: transparent;
-//             box-sizing: border-box;
-//             border-radius: 2.5rem 0 0 2.5rem;
-//             box-shadow: none;
-
-//             &:hover,
-//             &:focus {
-//                 box-shadow: none;
-//                 border: none;
-//             }
-//         }
-//     }
-
-//     :deep(.search-icon-button) {
-//         position: static;
-//         transform: none;
-//         display: flex;
-//         align-items: center;
-//         justify-content: center;
-//         flex-shrink: 0;
-//         background-color: $blue-150 !important;
-//         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.7817 14.7328L11.8252 10.7762C12.8833 9.45005 13.3936 7.76911 13.2513 6.07849C13.1091 4.38788 12.325 2.81587 11.0601 1.6852C9.79515 0.554524 8.14538 -0.0490261 6.44946 -0.00154744C4.75353 0.0459312 3.14012 0.740836 1.94045 1.94051C0.740775 3.14018 0.0458701 4.75359 -0.00160848 6.44952C-0.0490871 8.14545 0.554463 9.79521 1.68514 11.0601C2.81581 12.325 4.38782 13.1091 6.07843 13.2514C7.76905 13.3937 9.44999 12.8834 10.7762 11.8252L14.7349 15.7839C14.8044 15.8527 14.8869 15.907 14.9774 15.9439C15.068 15.9808 15.165 15.9995 15.2628 15.9989C15.3606 15.9983 15.4573 15.9784 15.5475 15.9405C15.6376 15.9025 15.7194 15.8471 15.7881 15.7776C15.8568 15.708 15.9112 15.6256 15.9481 15.535C15.985 15.4444 16.0036 15.3474 16.0031 15.2496C16.0025 15.1518 15.9826 15.0551 15.9446 14.965C15.9067 14.8748 15.8513 14.7931 15.7817 14.7243V14.7328ZM6.63737 11.7913C5.61803 11.7913 4.62157 11.4891 3.77402 10.9228C2.92646 10.3564 2.26587 9.5515 1.87578 8.60975C1.4857 7.668 1.38363 6.63172 1.5825 5.63196C1.78136 4.6322 2.27222 3.71386 2.99301 2.99307C3.7138 2.27229 4.63214 1.78142 5.6319 1.58256C6.63166 1.38369 7.66793 1.48576 8.60969 1.87585C9.55144 2.26593 10.3564 2.92652 10.9227 3.77408C11.489 4.62163 11.7913 5.61809 11.7913 6.63743C11.7896 8.00382 11.2461 9.31376 10.2799 10.2799C9.3137 11.2461 8.00376 11.7897 6.63737 11.7913Z' fill='%230070d1'/%3E%3C/svg%3E%0A");
-//         background-repeat: no-repeat;
-//         background-position: center;
-//         width: 2.5rem;
-//         height: 48px;
-//         min-height: 48px;
-//         max-height: 48px;
-//         border: none;
-//         border-radius: 0 2.5rem 2.5rem 0;
-//         cursor: pointer;
-
-//         &:hover,
-//         &:focus {
-//             border: 1px solid $gray-500;
-//             box-shadow: 0 0 0 4px $blue-300;
-//             background-color: $blue-150 !important;
-//             outline: none;
-//         }
-//     }
-
-//     :deep(.form-test-error) {
-//         position: absolute;
-//         top: 100%;
-//         left: 0;
-//         right: 0;
-//         margin-top: 0.25rem;
-//     }
-// }
 </style>

src/layouts/scheduling/scheduling.spec.js

@@ -185,15 +185,11 @@ describe("scheduling.vue", () => {
     });
 
     describe("service zip", () => {
-        test("prefills zipSearchCode and billToAccountNumber from store on mount", () => {
+        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");
-            wrapper.unmount();
-        });
-
-        test("renders schedulingZipSearch", () => {
-            const { wrapper } = setupMocks();
             expect(wrapper.find("scheduling-zip-search-stub").exists()).toBe(true);
             wrapper.unmount();
         });
@@ -228,16 +224,10 @@ describe("scheduling.vue", () => {
 
             await wrapper.vm.onZipSearched({ zipCode: "44101", billToAccountNumber: "87291" });
 
-            const getProvidersDispatch = store.dispatch.mock.calls.find(
-                ([actionName]) => actionName === "getProviders"
-            );
-            expect(getProvidersDispatch).toEqual([
-                "getProviders",
-                {
-                    payload: { serviceZipCode: "44101" },
-                    pageNameToLog: undefined,
-                },
-            ]);
+            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);
@@ -248,5 +238,16 @@ describe("scheduling.vue", () => {
             expect(wrapper.vm.mobileProviderAndTimeSlot.providerNumber).toBe("12345");
             wrapper.unmount();
         });
+
+        test("anchors to zip search when mobile zip is clicked", () => {
+            const { wrapper } = setupMocks();
+            const focusZipInput = jest.fn();
+            wrapper.vm.$refs.schedulingZipSearch = { focusZipInput };
+
+            wrapper.vm.onMobileZipCodeClicked();
+
+            expect(focusZipInput).toHaveBeenCalled();
+            wrapper.unmount();
+        });
     });
 });

src/layouts/scheduling/scheduling.vue

@@ -12,6 +12,7 @@
                     </h5>
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" alignLeft />
                     <schedulingZipSearch
+                        ref="schedulingZipSearch"
                         v-model="zipSearchCode"
                         :disabled="isLoadingDates"
                         :pageNameToLog="pageName"
@@ -434,7 +435,7 @@ 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;