State/zip mismatch alert

State/zip mismatch alert

src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js

@@ -337,6 +337,51 @@ describe("mobile-location-modal-questions.vue", () => {
         // Assert
         expect(wrapper.vm.displayInvalidZipAlert).toBe(true);
     });
+    it("Should display mismatch state and zip alert for non-matching state/zip for mobile address zip inputs", async () => {
+        // Arrange
+        const mobileLocationQuestions = {
+            addressQuestions: {
+                streetAddress: "",
+                apartmentNumberOrBusinessName: "",
+                city: "",
+                state: "",
+                zipCode: "",
+            },
+            isVehicleProtected: true,
+            serviceZipCode: "",
+        };
+
+        const newMobileLocationQuestions = {
+            addressQuestions: {
+                streetAddress: "555 Some St",
+                apartmentNumberOrBusinessName: "Apt 1",
+                city: "Funkytown",
+                state: "AK",
+                zipCode: "55555",
+            },
+            isVehicleProtected: true,
+            serviceZipCode: "55555",
+        };
+
+        const wrapper = shallowMount(mobileLocationModalQuestions, {
+            mixins: [mockMixin],
+            props: {
+                modelValue: mobileLocationQuestions,
+                linkWidgetName: linkWidgetName,
+                modalWidgetName: modalWidgetName,
+            },
+            attachTo: document.body,
+        });
+
+        wrapper.vm.internalModel = newMobileLocationQuestions;
+        wrapper.vm.resetModalButtonStyle = jest.fn();
+
+        // Act
+        await wrapper.vm.setMobileLocation();
+
+        // Assert
+        expect(wrapper.vm.displayMismatchStateAndZipAlert).toBe(true);
+    });
 });
 
 function setupMocks({ mountOptions, mixins, props, isShallowMount = true }) {

src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue

@@ -55,6 +55,13 @@
                         cmsWidgetName="AlertInvalidZipWidget"
                         alertClass="alert-danger"
                         v-bind:isDismissible="false" />
+                    <alert
+                        ref="alertMismatchStateAndZip"
+                        v-if="displayMismatchStateAndZipAlert"
+                        class="my-4"
+                        cmsWidgetName="AlertMismatchStateAndZipWidget"
+                        alertClass="alert-danger"
+                        v-bind:isDismissible="false" />
                 </template>
             </modal>
         </div>
@@ -89,6 +96,7 @@ export default {
             internalModel: deepClone(this.modelValue),
             displayInvalidZipAlert: false,
             isModalOpened: false,
+            displayMismatchStateAndZipAlert: false,
         };
     },
     setup(props) {
@@ -213,17 +221,22 @@ export default {
             this.modal.closeModal();
         },
         onModalClosed() {
-            this.displayInvalidZipAlert = false;
+            this.resetAlerts();
             this.internalModel = deepClone(this.modelValue);
         },
         resetModalButtonStyle() {
             this.modal.resetButtonStyle();
         },
+        resetAlerts() {
+            this.displayInvalidZipAlert = false;
+            this.displayMismatchStateAndZipAlert = false;
+        },
         async setMobileLocation() {
             if (
                 this.internalModel.addressQuestions.zipCode !==
                 this.modelValue.addressQuestions.zipCode
             ) {
+                this.resetAlerts();
                 // Validate the Zip Code
                 const zipCodeData = await this.getZipCodeData(
                     this.internalModel.addressQuestions.zipCode,
@@ -233,6 +246,9 @@ export default {
                 if (!zipCodeData.isValid) {
                     this.displayInvalidZipAlert = true;
                     this.resetModalButtonStyle();
+                } else if (zipCodeData.state != this.internalModel.addressQuestions.state) {
+                    this.displayMismatchStateAndZipAlert = true;
+                    this.resetModalButtonStyle();
                 } else {
                     // retrieve mobile fee part
                     const serviceZipCode = this.internalModel.addressQuestions.zipCode;