CASH-816

CASH-816 clean up, defect fixes, looks to be running smoothly now

src/digital-components/modal/modal.vue

@@ -36,6 +36,7 @@
                         :id="modalId + '-modalbtn'"
                         ref="modalButtonMain"
                         loaderColor="white"
+                        :isDisabled="footerButtonDisabled"
                         :buttonText="footerButtonText"
                         @click-event="validateAndEmit"
                         :class="isFooterButtonDisabled && 'form-test-invalid'" />
@@ -59,6 +60,7 @@ export default {
         footerButtonText: String,
         suppressPageScroll: Boolean,
         staticBackdrop: Boolean,
+        footerButtonDisabled: Boolean,
         onModalOpenedCallback: {
             type: Function,
         },
@@ -137,6 +139,9 @@ export default {
     },
     computed: {
         isFooterButtonDisabled() {
+            if (this.footerButtonDisabled !== undefined) {
+                return this.footerButtonDisabled;
+            }
             if (!this.meta.touched) {
                 return !this.meta.valid;
             }

src/layouts/service-location/service-location.vue

@@ -115,9 +115,9 @@
                         :selectedAppointmentType="selectedAppointmentType"
                         :modelValue="{
                             zipCode: zipCode,
-                            providerNumber: selectedProvider?.providerNumber,
+                            state: state,
                         }"
-                        :preselectedProviderNumber="selectedProvider?.providerNumber"
+                        :preSelectedProviderNumber="selectedProvider?.providerNumber"
                         :shopProviderData="shopProviderData"
                         :isServiceableInshop="isServiceableInshop"
                         @updated-serviceability="setServiceabilityDetails"
@@ -844,25 +844,10 @@ export default {
             let provider = this.shopProviderData?.shopProviders?.find(
                 (p) => p.providerNumber === providerObject?.providerNumber
             );
-            if (!provider && this.shopProviderData?.shopProviders?.length > 0) {
-                provider = this.shopProviderData.shopProviders[0];
-            }
             this.selectedProvider = provider;
-            if (provider && provider.address) {
-                this.zipCode = provider.address.zipCode;
-                this.state = provider.address.state;
-            }
-            if (
-                !this.selectedProvider ||
-                !this.shopProviderData?.shopProviders?.some(
-                    (p) => p.providerNumber === this.selectedProvider?.providerNumber
-                )
-            ) {
-                this.selectedProvider = this.shopProviderData?.shopProviders?.[0];
-            }
             if (providerObject && providerObject.address) {
-                this.zipCode = providerObject.address.zipCode;
+                this.zipCode = providerObject.searchedZip;
-                this.state = providerObject.address.state;
+                this.state = providerObject.searchedState;
             }
         },
         setZipcodeCtu(zipcodeCtu) {

src/layouts/service-location/shop-question/shop-question-popup.vue

@@ -24,22 +24,29 @@
         :onModalOpenedCallback="onModalOpened"
         :onModalClosedCallback="onModalClosed"
         :footerButtonText="modalFooterText"
+        :footerButtonDisabled="
+            displayInvalidZipAlert || displayNoShopsAlert || !selectedProviderNumber
+        "
         @footer-button-event="SetZipCodeAndShop">
-        <div class="zip-search-group">
+        <serviceZipQuestion
-            <div class="zip-search-input">
+            ref="serviceZipQuestion"
-                <serviceZipQuestion
+            class="shop-question-zipcode"
-                    ref="serviceZipQuestion"
+            customInputId="serviceZipCode"
-                    class="shop-question-zipcode"
+            v-model="internalModel.zipCode"
-                    customInputId="serviceZipCode"
+            v-on="{ 'textboxQuestionEvent.inputIdAssigned': onInputIdAssigned }"
-                    v-model="internalModel.zipCode"
+            cmsWidgetName="ServiceZipQuestionWidget"
-                    v-on="{ 'textboxQuestionEvent.inputIdAssigned': onInputIdAssigned }"
+            @search-icon-click="onSearchZip"
-                    cmsWidgetName="ServiceZipQuestionWidget"
+            @keydown.enter="onSearchZip"
-                    @search-icon-click="onSearchZip"
+            includeSearchIcon
-                    @keydown.enter="onSearchZip"
+            :isRequired="false"
-                    includeSearchIcon
+            :validationRules="''" />
-                    :isRequired="false" />
+        <alert
-            </div>
+            ref="alertInvalidZip"
-        </div>
+            v-if="displayInvalidZipAlert"
+            class="mb-4"
+            cmsWidgetName="AlertInvalidZipWidget"
+            alertClass="alert-danger"
+            v-bind:isDismissible="false" />
         <alert
             ref="alertMilitaryBaseZip"
             class="my-5"
@@ -81,29 +88,31 @@
             cmsWidgetName="AlertMobileFeeFreeWidget"
             v-if="showMobileFreeAlert"
             alertClass="alert-success" />
-        <buttonQuestion
+        <div v-if="!displayInvalidZipAlert">
-            ref="buttonQuestion"
+            <buttonQuestion
-            buttonTypeString="shopListButton"
+                ref="buttonQuestion"
-            :buttonTypeObject="shopListButton"
+                buttonTypeString="shopListButton"
-            class="radioQuestion"
+                :buttonTypeObject="shopListButton"
-            :questionText="questionText"
+                class="radioQuestion"
-            :answers="answers"
+                :questionText="questionText"
-            groupName="chooseShop"
+                :answers="answers"
-            textPosition="text-start"
+                groupName="chooseShop"
-            v-model="selectedProviderNumber"
+                textPosition="text-start"
-            isRequired
+                v-model="selectedProviderNumber"
-            validationRules="option-required" />
+                isRequired
-        <div class="show-more-shops-link">
+                :validationRules="this.selectedProviderNumber ? '' : 'option-required'" />
-            <textLink
+            <div class="show-more-shops-link">
-                v-if="displaySeeMoreLocationsLink"
+                <textLink
-                ref="showMoreShopsLink"
+                    v-if="displaySeeMoreLocationsLink"
-                id="showMoreShopsId2"
+                    ref="showMoreShopsLink"
-                cmsWidgetName="ShowMoreShopsLinkWidget"
+                    id="showMoreShopsId2"
-                linkType="text"
+                    cmsWidgetName="ShowMoreShopsLinkWidget"
-                :text="showMoreShopsLinkText"
+                    linkType="text"
-                href="#!"
+                    :text="showMoreShopsLinkText"
-                @click-event="getNextShopsFromList(3)"
+                    href="#!"
-                :aria-label="showMoreShopsLinkText" />
+                    @click-event="getNextShopsFromList(3)"
+                    :aria-label="showMoreShopsLinkText" />
+            </div>
         </div>
     </modal>
 </template>
@@ -124,6 +133,7 @@ import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
 import baseMixin from "@/mixins/base-mixin.js";
 import { nextTick } from "vue";
+import { regex } from "@/helpers/validation-rules";
 
 import { getAvailabilityRating } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
 
@@ -141,6 +151,7 @@ import {
 } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
 
 defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
+defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
 
 function getShopsByZip(zipCode, shops, numberToGet = 3) {
     return shops
@@ -167,6 +178,9 @@ export default {
             lastSearchedZip: "",
             lastSuccessfulZip: "",
             hasLoadedShopData: false,
+            displayInvalidZipAlert: false,
+            areShopsAvialable: true,
+            displayNoShopsAlert: false,
         };
     },
     props: {
@@ -193,7 +207,7 @@ export default {
             default: "",
         },
         preSelectedProviderNumber: {
-            type: [String, Number],
+            type: String,
             default: null,
         },
     },
@@ -243,9 +257,6 @@ export default {
         showMoreShopsLinkText() {
             return this.getCmsContent("ShowMoreShopsLinkWidget", "Text");
         },
-        displayNoShopsAlert() {
-            return this.hasLoadedShopData && this.answers.length === 0;
-        },
     },
     methods: {
         openModal(event) {
@@ -369,20 +380,22 @@ export default {
             this.shopIndex = 0;
         },
         onModalOpened() {
-            this.shopIndex = 3;
+            const preSelectedIndex = this.shopProviders.findIndex(
+                (provider) => provider.providerNumber == this.preSelectedProviderNumber
+            );
+
+            if (preSelectedIndex > -1) {
+                this.shopIndex = Math.ceil((preSelectedIndex + 1) / 3) * 3;
+            } else {
+                this.shopIndex = 3;
+            }
             this.internalModel = this.copyModel(this.modelValue);
             this.internalModel.zipCode = this.zipCode;
             this.localShopProviderData = this.shopProviderData;
             this.answers = [];
-            this.updateShopsForZip(this.internalModel.zipCode);
+            this.onSearchZip();
             this.focusOnZipInput();
             this.selectedProviderNumber = this.preSelectedProviderNumber;
-            if (this.internalModel.zipCode && this.shopProviders.length > 0) {
-                this.updateShopsForZip(this.internalModel.zipCode);
-            } else {
-                this.internalModel.zipCode = this.zipCode;
-                this.updateShopsForZip(this.internalModel.zipCode);
-            }
             if (
                 (!this.selectedProviderNumber ||
                     !this.shopProviders.some(
@@ -398,14 +411,7 @@ export default {
         },
         onModalClosed() {
             this.internalModel = this.copyModel(this.modelValue);
-            this.selectedProviderNumber = this.preSelectedProviderNumber;
             this.resetsOnZipInput();
-            let selectedProvider = this.shopProviders.find(
-                (provider) => provider.providerNumber == this.selectedProviderNumber
-            );
-            if (!selectedProvider && this.shopProviders.length > 0) {
-                selectedProvider = this.shopProviders[0];
-            }
         },
         resetsOnZipInput() {
             this.resetAlerts();
@@ -415,33 +421,49 @@ export default {
                 event.preventDefault();
                 event.stopPropagation();
             }
+            this.resetsOnZipInput();
+            this.displayNoShopsAlert = false;
             const zip = this.internalModel.zipCode;
-            if (this.isVehicleHeavyTruck) {
+            const zipCodeData = await this.getZipCodeData(
-                // check the location endpoint to verify this zip can service a heavy truck
+                this.internalModel.zipCode,
-                const closestShops = await getClosestApplicableShops(
+                "service-location"
-                    this.internalModel.zipCode,
+            );
-                    this.carId,
+            if (!zipCodeData.isValid) {
-                    "service-location"
+                this.displayInvalidZipAlert = true;
-                );
+                //this.selectedProviderNumber = null;
-
+                this.focusOnZipInput();
-                if (!closestShops || closestShops.providers?.length === 0) {
+                this.resetModalButtonStyle();
-                    this.displayNoServiceAlert = true;
-                    this.focusOnZipInput();
-                    this.resetModalButtonStyle();
-                    return null;
-                }
             } else {
-                getShopProviderData(zip).then(async (result) => {
+                if (this.isVehicleHeavyTruck) {
-                    this.localShopProviderData = result.data;
+                    // check the location endpoint to verify this zip can service a heavy truck
-                    this.updateShopsForZip(this.internalModel.zipCode);
+                    const closestShops = await getClosestApplicableShops(
-                    if (this.selectedAppointmentType === "Mobile") {
+                        this.internalModel.zipCode,
-                        this.selectedProvider = new Provider(
+                        this.carId,
-                            this.shopProviderData.mobileProviderNumber
+                        "service-location"
-                        );
+                    );
-                    } else {
+
-                        this.selectedProvider = new Provider();
+                    if (!closestShops || closestShops.providers?.length === 0) {
+                        this.displayNoServiceAlert = true;
+                        this.focusOnZipInput();
+                        this.resetModalButtonStyle();
+                        return null;
                     }
-                });
+                } else {
+                    getShopProviderData(zip).then(async (result) => {
+                        if (this.displayNoShopsAlert === true) {
+                            this.displayNoShopsAlert = false;
+                        }
+                        this.localShopProviderData = result.data;
+                        this.updateShopsForZip(this.internalModel.zipCode);
+                        if (this.selectedAppointmentType === "Mobile") {
+                            this.selectedProvider = new Provider(
+                                this.shopProviderData.mobileProviderNumber
+                            );
+                        } else {
+                            this.selectedProvider = new Provider();
+                        }
+                    });
+                }
             }
         },
         async updateShopsForZip(zipCode) {
@@ -458,11 +480,23 @@ export default {
             }
             this.isLoadingShops = true;
             if (!zipCode || !this.shopProviders.length) {
-                this.handleUpdate();
+                this.answers = [];
+                this.displayNoShopsAlert = true;
+                this.displaySeeMoreLocationsLink = false;
+                this.isLoadingShops = false;
                 return;
             }
 
-            const sortedShops = getShopsByZip(zipCode, this.shopProviders, 3);
+            const selectedIndex = this.shopProviders.findIndex(
+                (provider) => provider.providerNumber == this.selectedProviderNumber
+            );
+
+            // If not found, only show the first 3 shops
+            if (selectedIndex === -1) {
+                this.shopIndex = 3;
+            }
+
+            const sortedShops = getShopsByZip(zipCode, this.shopProviders, this.shopIndex);
 
             const toTitleCase = (str) => {
                 return str.replace(/\w\S*/g, function (txt) {
@@ -498,12 +532,22 @@ export default {
                 };
             });
             this.answers = mappedData;
+            if (
+                this.selectedProviderNumber &&
+                !this.answers.some((a) => String(a.value) === String(this.selectedProviderNumber))
+            ) {
+                this.selectedProviderNumber = null;
+            }
             this.shopIndex = mappedData.length;
             this.displaySeeMoreLocationsLink = this.shopIndex < this.shopProviders.length;
             if (mappedData.length > 0) {
                 this.lastSuccessfulZip = zipCode;
             }
             this.isLoadingShops = false;
+            this.displayNoShopsAlert = this.answers.length === 0;
+        },
+        resetModalButtonStyle() {
+            this.modal.resetButtonStyle();
         },
         onInputIdAssigned(inputId) {
             this.serviceZipCodeTextInputId = inputId;
@@ -515,17 +559,24 @@ export default {
         resetAlerts() {
             this.displayInvalidZipAlert = false;
             this.displayNoServiceAlert = false;
+            this.displayNoShopsAlert = false;
         },
         async SetZipCodeAndShop() {
+            if (
+                this.displayInvalidZipAlert ||
+                this.displayNoShopsAlert ||
+                !this.selectedProviderNumber
+            ) {
+                return;
+            }
+            const zipToEmit = this.lastSearchedZip;
+
             const selectedProvider = this.shopProviders.find(
                 (provider) => provider.providerNumber == this.selectedProviderNumber
             );
             this.resetAlerts();
 
-            const zipCodeData = await this.getZipCodeData(
+            const zipCodeData = await this.getZipCodeData(zipToEmit, "service-location");
-                selectedProvider.address.zipCode,
-                "service-location"
-            );
 
             if (!zipCodeData.isValid) {
                 this.displayInvalidZipAlert = true;
@@ -548,7 +599,6 @@ export default {
                     }
                 }
 
-                selectedProvider.address.state = zipCodeData.state;
                 selectedProvider.address.zipCodeCtu = zipCodeData.zipCodeCtu;
 
                 // retrieve mobile fee part
@@ -585,7 +635,13 @@ export default {
 
                 this.$emit("update:modelValue", this.selectedValue);
                 this.$emit("update-shop-provider-data", this.localShopProviderData);
-                this.$emit("shop-selected", selectedProvider);
+                this.internalModel.state = zipCodeData.state;
+                this.$emit("shop-selected", {
+                    providerNumber: selectedProvider?.providerNumber,
+                    address: selectedProvider?.address,
+                    searchedZip: zipToEmit,
+                    searchedState: this.internalModel.state,
+                });
 
                 this.closeModal();
             }
@@ -597,14 +653,8 @@ export default {
             handler(newVal) {
                 this.localShopProviderData = newVal;
                 this.hasLoadedShopData = true;
-                if (this.internalModel && this.internalModel.zipCode) {
-                    this.updateShopsForZip(this.internalModel.zipCode);
-                }
             },
         },
-        preSelectedProviderNumber(newVal) {
-            this.selectedProviderNumber = newVal;
-        },
     },
     components: {
         modal,
@@ -613,9 +663,6 @@ export default {
         buttonQuestion,
         alert,
     },
-    mounted() {
-        this.handleUpdate();
-    },
 };
 </script>
 
@@ -658,7 +705,7 @@ export default {
 .modal.modal-component .modal-dialog .modal-content .modal-body .textbox-question {
     padding: 0;
 }
-.zip-search-group {
+.shop-question-zipcode {
     display: flex;
     flex-direction: row;
     align-items: stretch;
@@ -673,44 +720,40 @@ export default {
         height: auto;
         padding-left: 0;
     }
-    .zip-search-input {
+    .input-wrapper.has-search-icon {
+        display: flex;
         align-items: stretch;
         flex: 1 1 0;
         height: 100%;
         margin-bottom: 0;
-        input {
+        input,
+        .form-control {
             width: 100%;
-            height: 100%;
+            height: 48px;
+            min-height: 48px;
+            max-height: 48px;
             border: none;
-            padding-top: 0;
+            padding: 0 1.5rem 0 1.5rem;
-            padding-bottom: 0;
             outline: none;
             font-size: 1rem;
             background: transparent;
             box-sizing: border-box;
-            border-radius: 48px 0 0 48px;
+            border-radius: 2.5rem 0 0 2.5rem;
-            padding-left: 0;
         }
     }
-    .btn {
+    .search-icon-button {
         display: flex;
         align-items: center;
-        background-color: #e5f1fa;
         justify-content: center;
-        width: 48px;
+        background-color: #e5f1fa !important;
+        width: 2.5rem;
         height: 48px;
-
         border: none;
-
+        max-height: 48px;
-        border-radius: 0 48px 48px 0;
+        border-radius: 0 2.5rem 2.5rem 0;
         cursor: pointer;
     }
 }
-@media (max-width: 767.98px) {
-    .zip-search-group {
-        padding-left: 0;
-    }
-}
 .show-more-shops-link a {
     text-align: center;
     display: block;
@@ -732,4 +775,18 @@ export default {
     border-radius: 2.5rem;
     padding-left: 1.5rem;
 }
+
+.shop-question-zipcode .form-test-error {
+    display: block;
+    width: 100%;
+    margin-top: 0.25rem;
+    margin-left: 0;
+    color: #d32f2f; // or your error color
+    position: static !important;
+    font-size: 0.875rem;
+    clear: both;
+    float: none;
+    display: block;
+    width: 100%;
+}
 </style>