Merge pull request #2470 from Safelite/feature/CASH-376

Feature/cash 376
2025-04-30 11:43:56 -04:00 · 2025-04-30 11:43:56 -04:00 · e585f90a4f
commit e585f90a4f
parent 121b90290f 8176bd1c70
3 changed files with 83 additions and 110 deletions
--- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
+++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
@ -1,70 +1,72 @@
 <template>
-    <div class="mobile-location-questions">
-        <div class="text-center" :id="componentId">
-            <label
-                for="mobileLocationLinkPromptId"
-                :aria-label="mobileLocationLinkPromptText"
-                class="form-label fw-bold w-100 ps-4 pe-4 pt-4 text-black"
-                v-html="mobileLocationLinkPromptText"></label>
-            <div class="update-mobile-location-text-link">
-                <textLink
-                    ref="mobileLocationLink"
-                    id="mobileLocationLinkPromptId"
-                    linkType="text"
-                    :text="mobileLocationLinkText"
-                    href="#!"
-                    @click-event="openModal" />
+    <transition name="fade" mode="out-in">
+        <div class="mobile-location-questions">
+            <div class="text-center" :id="componentId">
+                <label
+                    for="mobileLocationLinkPromptId"
+                    :aria-label="mobileLocationLinkPromptText"
+                    class="form-label fw-bold w-100 ps-4 pe-4 pt-4 text-black"
+                    v-html="mobileLocationLinkPromptText"></label>
+                <div class="update-mobile-location-text-link">
+                    <textLink
+                        ref="mobileLocationLink"
+                        id="mobileLocationLinkPromptId"
+                        linkType="text"
+                        :text="mobileLocationLinkText"
+                        href="#!"
+                        @click-event="openModal" />
+                </div>
+                <div v-show="errorMessage" class="row my-1 form-test-error">
+                    <span
+                        class="d-inline-flex small mt-0 center-error-message"
+                        aria-atomic="true"
+                        aria-live="polite">
+                        {{ errorMessage }}
+                    </span>
+                </div>
+                <textBlock
+                    v-if="mobileFeeApplies"
+                    :customText="mobileFeeText"
+                    cmsWidgetName="MobileFeeDisclaimerWidget"
+                    typeStyle="caption" />
            </div>
-            <div v-show="errorMessage" class="row my-1 form-test-error">
-                <span
-                    class="d-inline-flex small mt-0 center-error-message"
-                    aria-atomic="true"
-                    aria-live="polite">
-                    {{ errorMessage }}
-                </span>
-            </div>
-            <textBlock
-                v-if="mobileFeeApplies"
-                :customText="mobileFeeText"
-                cmsWidgetName="MobileFeeDisclaimerWidget"
-                typeStyle="caption" />
+            <modal
+                :ref="modalName"
+                :headerText="modalHeaderText"
+                :footerButtonText="modalFooterText"
+                :onModalOpenedCallback="onModalOpened"
+                :onModalClosedCallback="onModalClosed"
+                @isModalOpened="setModalStatus"
+                @footer-button-event="setMobileLocation">
+                <template v-if="isModalOpened">
+                    <addressQuestions
+                        ref="addressQuestions"
+                        v-model="internalModel.addressQuestions"
+                        captureApartmentNumberOrBusinessName="true"
+                        preserveCityAndStateOnReset="true" />
+                    <vehicleProtectedQuestion
+                        ref="vehicleProtectedQuestion"
+                        v-model="internalModel.isVehicleProtected"
+                        cmsWidgetName="VehicleProtectedQuestionWidget" />
+                    <textBlock cmsWidgetName="WorkspaceRequirementsWidget" typeStyle="caption" />
+                    <alert
+                        ref="alertInvalidZip"
+                        v-if="displayInvalidZipAlert"
+                        class="my-4"
+                        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>
-        <modal
-            :ref="modalName"
-            :headerText="modalHeaderText"
-            :footerButtonText="modalFooterText"
-            :onModalOpenedCallback="onModalOpened"
-            :onModalClosedCallback="onModalClosed"
-            @isModalOpened="setModalStatus"
-            @footer-button-event="setMobileLocation">
-            <template v-if="isModalOpened">
-                <addressQuestions
-                    ref="addressQuestions"
-                    v-model="internalModel.addressQuestions"
-                    captureApartmentNumberOrBusinessName="true"
-                    preserveCityAndStateOnReset="true" />
-                <vehicleProtectedQuestion
-                    ref="vehicleProtectedQuestion"
-                    v-model="internalModel.isVehicleProtected"
-                    cmsWidgetName="VehicleProtectedQuestionWidget" />
-                <textBlock cmsWidgetName="WorkspaceRequirementsWidget" typeStyle="caption" />
-                <alert
-                    ref="alertInvalidZip"
-                    v-if="displayInvalidZipAlert"
-                    class="my-4"
-                    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>
+    </transition>
 </template>

 <script>
@ -148,7 +150,6 @@ export default {
                    zipCode: "",
                },
                isVehicleProtected: null,
-                isMobileSelected: false,
            }),
        },
        mobileFeePart: {
@ -168,7 +169,17 @@ export default {
            return this.getCmsContent(this.linkWidgetName, "HeaderText");
        },
        mobileLocationLinkText() {
-            if (this.isMobileAddressComplete()) {
+            if (
+                this.addressModel.streetAddress &&
+                this.addressModel.streetAddress !== "" &&
+                this.addressModel.city &&
+                this.addressModel.city !== "" &&
+                this.addressModel.state &&
+                this.addressModel.state !== "" &&
+                this.addressModel.zipCode &&
+                this.addressModel.zipCode !== "" &&
+                this.internalModel.isVehicleProtected !== null
+            ) {
                return `${this.addressModel.streetAddress}\n${this.addressModel.city}, ${this.addressModel.state} ${this.addressModel.zipCode}`;
            }
            return this.getCmsContent(this.linkWidgetName, "BodyText");
@ -207,19 +218,6 @@ export default {
        },
    },
    methods: {
-        isMobileAddressComplete() {
-            return (
-                this.addressModel.streetAddress &&
-                this.addressModel.streetAddress !== "" &&
-                this.addressModel.city &&
-                this.addressModel.city !== "" &&
-                this.addressModel.state &&
-                this.addressModel.state !== "" &&
-                this.addressModel.zipCode &&
-                this.addressModel.zipCode !== "" &&
-                this.internalModel.isVehicleProtected !== null
-            );
-        },
        openModal() {
            this.modal.openModal();
        },
--- a/src/layouts/service-location/service-location.spec.js
+++ b/src/layouts/service-location/service-location.spec.js
@ -81,16 +81,6 @@ jest.mock(
    })
 );

-jest.mock(
-    "@/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue",
-    () => ({
-        isMobileAddressComplete: jest.fn(() => {
-            return true;
-        }),
-        openModal: jest.fn(),
-    })
-);
-
 jest.spyOn(baseMixin.methods, "getZipCodeData").mockImplementation((serviceZipCode) => {
    return new Promise((resolve) => {
        let mockContainsMilitaryBase = false;
@ -353,7 +343,6 @@ describe("service-location.vue", () => {
                    zipCode: "43054",
                },
                isVehicleProtected: true,
-                isMobileSelected: true,
            };
            wrapper.vm.mobileLocationQuestions = mobileLocationQuestions;

@ -366,7 +355,6 @@ describe("service-location.vue", () => {
                    zipCode: "61606",
                },
                isVehicleProtected: null,
-                isMobileSelected: false,
            };

            // Act
@ -469,7 +457,6 @@ describe("service-location.vue", () => {
                    zipCode: "",
                },
                isVehicleProtected: null,
-                isMobileSelected: false,
            };
            wrapper.vm.mobileLocationQuestions = mobileLocationQuestions;
            const newMobileLocationQuestions = {
@ -481,7 +468,6 @@ describe("service-location.vue", () => {
                    zipCode: "43054",
                },
                isVehicleProtected: true,
-                isMobileSelected: true,
            };

            wrapper.vm.closeModalAction = jest.fn();
@ -531,7 +517,6 @@ describe("service-location.vue", () => {
                    zipCode: "",
                },
                isVehicleProtected: null,
-                isMobileSelected: false,
                mobileFeePart: null,
            };
            wrapper.vm.mobileLocationQuestions = mobileLocationQuestions;
@ -545,7 +530,6 @@ describe("service-location.vue", () => {
                    zipCode: "43081",
                },
                isVehicleProtected: true,
-                isMobileSelected: true,
                mobileFeePart: null,
            };

@ -609,7 +593,6 @@ describe("service-location.vue", () => {
                    zipCode: "43081",
                },
                isVehicleProtected: "YesAnswer",
-                isMobileSelected: true,
            };

            wrapper.vm.closeModalAction = jest.fn();
@ -1450,7 +1433,5 @@ function setupMocks({ mountOptionsMockData = {} }) {
    const mountOptions = getMountOptions(mountOptionsMockData);
    const wrapper = shallowMount(serviceLocation, mountOptions);
    wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
-    wrapper.vm.$refs.mobileLocationQuestions.isMobileAddressComplete = jest.fn();
-    wrapper.vm.$refs.mobileLocationQuestions.openModal = jest.fn();
    return { wrapper, apiPromise };
 }
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@ -88,7 +88,7 @@
                <div class="col-md-6 col-xl-4">
                    <mobileLocationModalQuestions
                        customComponentId="mobileLocationQuestions"
-                        v-show="selectedAppointmentType === 'Mobile'"
+                        v-if="selectedAppointmentType === 'Mobile'"
                        v-model="mobileLocationQuestions"
                        :mobileFeePart="mobileFeePart"
                        :mobileFeeApplies="mobileFeeApplies"
@ -171,12 +171,11 @@ const MOBILE_FEE_PART_TYPE = "MOBILE FEE";
 // DEFINE VALIDATION RULES
 defineRule("mobile-location-required", (value) => {
    if (
-        value.isMobileSelected &&
-        (!value.addressQuestions.streetAddress ||
-            !value.addressQuestions.city ||
-            !value.addressQuestions.state ||
-            !value.addressQuestions.zipCode ||
-            !value.isVehicleProtected)
+        !value.addressQuestions.streetAddress ||
+        !value.addressQuestions.city ||
+        !value.addressQuestions.state ||
+        !value.addressQuestions.zipCode ||
+        !value.isVehicleProtected
    ) {
        return errorMessages.MOBILE_LOCATION_REQUIRED;
    }
@ -298,7 +297,6 @@ export default {
                        zipCode: this.zipCode,
                    },
                    isVehicleProtected: this.isVehicleProtected,
-                    isMobileSelected: this.selectedAppointmentType === "Mobile",
                };
            },
        },
@ -767,10 +765,6 @@ export default {
                    this.selectedProvider = new Provider(
                        this.shopProviderData.mobileProviderNumber
                    );
-                    var mobileLocationQs = this.$refs.mobileLocationQuestions;
-                    if (!mobileLocationQs.isMobileAddressComplete()) {
-                        mobileLocationQs.openModal();
-                    }
                } else {
                    this.selectedProvider = new Provider();
                }