From e35071ccf9f80fa81b799de049b44cba086e79dc Mon Sep 17 00:00:00 2001
From: bmauger <bmauger@users.noreply.github.com>
Date: Thu, 30 Jul 2026 11:55:23 -0400
Subject: [PATCH] Update zip search component.

---
 .../scheduling-zip-search.vue                 | 250 ++++++++++++------
 1 file changed, 163 insertions(+), 87 deletions(-)

diff --git a/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.vue b/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.vue
index e288f9058..75aad0029 100644
--- a/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.vue
+++ b/src/layouts/scheduling/scheduling-zip-search/scheduling-zip-search.vue
@@ -1,18 +1,30 @@
 <template>
     <form class="scheduling-zip-search mt-4" @submit.prevent="onZipSearch">
-        <serviceZipQuestion
+        <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" />
+            @keydown.enter="onZipSearch" /> -->
     </form>
 </template>
 
 <script>
-import serviceZipQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-question/service-zip-question";
+//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 {
@@ -48,6 +60,15 @@ export default {
         },
     },
     methods: {
+        onMobileZipCodeClicked() {
+            const zipInput = document.getElementById("sz-service-zip");
+            if (!zipInput) {
+                return;
+            }
+
+            zipInput.scrollIntoView({ behavior: "smooth", block: "center" });
+            zipInput.focus({ preventScroll: true });
+        },
         async onZipSearch(event) {
             event?.preventDefault?.();
 
@@ -77,104 +98,159 @@ export default {
             });
         },
     },
-    components: {
-        serviceZipQuestion,
-    },
+    // components: {
+    //     serviceZipQuestion,
+    // },
 };
 </script>
 
 <style lang="scss" scoped>
-.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) {
+.sz-form-group {
+    label {
         display: flex;
-        align-items: stretch;
-        flex: 1 1 0;
-        height: 100%;
-        margin-bottom: 0;
-
-        input,
-        .form-control {
-            width: 100%;
+        margin-bottom: 0.5rem;
+        font-weight: 600;
+    }
+    .sz-zip-input-wrapper {
+        position: relative;
+        .sz-zip-input {
             height: 48px;
-            min-height: 48px;
-            max-height: 48px;
+            width: 100%;
+            border-radius: 50rem;
             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,
+            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 {
-                box-shadow: none;
+                outline: 2px solid #0070d1;
                 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;
+        .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;
         }
     }
-
-    :deep(.form-test-error) {
-        position: absolute;
-        top: 100%;
-        left: 0;
-        right: 0;
+    .sz-error-message {
+        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>