Merge pull request #2559 from Safelite/feature/Digital/CASH-761

Feature/digital/cash 761

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

@@ -2,21 +2,7 @@
     <transition name="fade" mode="out-in">
         <div class="mobile-location-questions">
             <div class="text-center" :id="componentId">
-                <label
+                <div v-show="errorMessage" class="row mt-4 form-test-error">
-                    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="toggleMobileLocation" />
-                </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"
@@ -28,9 +14,10 @@
                     v-if="mobileFeeApplies"
                     :customText="mobileFeeText"
                     cmsWidgetName="MobileFeeDisclaimerWidget"
-                    typeStyle="caption" />
+                    typeStyle="caption"
+                    class="ps-4 pe-4 mt-4" />
             </div>
-            <div v-if="isMobileLocationOpened" class="address-questions-container">
+            <div v-if="this.modelValue.isMobileSelected" class="address-questions-container">
                 <div v-html="headerText" class="HeaderText" />
                 <addressQuestions
                     ref="addressQuestions"
@@ -64,7 +51,6 @@
 </template>
 <script>
 // Components
-import textLink from "@/ux-components/text-link/text-link";
 import textBlock from "@/digital-components/text-block/text-block";
 import alert from "@/ux-components/alert/alert";
 import addressQuestions from "@/fmg-components/address-questions/address-questions";
@@ -97,7 +83,6 @@ export default {
         return {
             internalModel: deepClone(this.modelValue),
             displayInvalidZipAlert: false,
-            isMobileLocationOpened: false,
             displayMismatchStateAndZipAlert: false,
         };
     },
@@ -159,15 +144,6 @@ export default {
         mobileFeeApplies: Boolean,
     },
     computed: {
-        mobileLocationLinkPromptText() {
-            return this.getCmsContent(this.linkWidgetName, "HeaderText");
-        },
-        mobileLocationLinkText() {
-            if (this.isMobileAddressComplete()) {
-                return `${this.addressModel.streetAddress}\n${this.addressModel.city}, ${this.addressModel.state} ${this.addressModel.zipCode}`;
-            }
-            return this.getCmsContent(this.linkWidgetName, "BodyText");
-        },
         mobileFeeText() {
             const cmsContentText = this.getCmsContent("MobileFeeDisclaimerWidget", "Text");
             return cmsContentText.replaceAll("{custom:mobileFee}", this.mobileFee);
@@ -208,25 +184,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
-            );
-        },
-        getIsMobleLocationOpened() {
-            if (this.isServiceAddressFromStoreAvailable) {
-                return false;
-            }
-            return true;
-        },
         setMobileLocationInvalid(isFormInvalid) {
             this.$emit("set-mobile-location-invalid", isFormInvalid);
         },
@@ -300,9 +257,6 @@ export default {
             // update the page level model
             this.$emit("setMobileLocation", this.internalModel);
         },
-        toggleMobileLocation() {
-            this.isMobileLocationOpened = !this.isMobileLocationOpened;
-        },
     },
     watch: {
         internalModel: {
@@ -324,7 +278,6 @@ export default {
         addressQuestions,
         vehicleProtectedQuestion,
         textBlock,
-        textLink,
         alert,
     },
 };
@@ -350,14 +303,11 @@ export default {
     .update-mobile-location-text-link {
         white-space: pre-line;
     }
-    .address-questions-container {
-        margin-top: 1rem;
-    }
-
     .text-black {
         color: $black;
     }
     .HeaderText {
+        margin-top: 1rem;
         font-size: 1rem;
         font-weight: 600;
         line-height: 1.625rem;

src/layouts/service-location/service-location.spec.js

@@ -469,10 +469,9 @@ describe("service-location.vue", () => {
                     zipCode: "43054",
                 },
                 isVehicleProtected: true,
-                isMobileSelected: false,
+                isMobileSelected: true,
             };
 
-            //wrapper.vm.closeModalAction = jest.fn();
             // Act
 
             // Trigger the event
@@ -1436,6 +1435,7 @@ function setupMocks({ mountOptionsMockData = {} }) {
     const wrapper = shallowMount(serviceLocation, mountOptions);
     wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
     wrapper.vm.$refs.mobileLocationQuestions.isMobileAddressComplete = jest.fn();
+    wrapper.vm.$refs.mobileLocationQuestions.resetAlerts = jest.fn();
     wrapper.vm.$refs.mobileLocationQuestions.openModal = jest.fn();
     return { wrapper, apiPromise };
 }

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

@@ -174,13 +174,20 @@ const MOBILE_FEE_PART_TYPE = "MOBILE FEE";
 
 // DEFINE VALIDATION RULES
 defineRule("mobile-location-required", (value) => {
+    const addressQuestionsValues = Object.values(
+        [
+            value.addressQuestions.streetAddress,
+            value.addressQuestions.city,
+            value.isVehicleProtected,
+        ] || {}
+    );
+    const filledFields = addressQuestionsValues.filter(
+        (val) => val !== null && val !== undefined && val !== ""
+    );
     if (
         value.isMobileSelected &&
-        (!value.addressQuestions.streetAddress ||
+        filledFields.length > 0 &&
-            !value.addressQuestions.city ||
+        filledFields.length < addressQuestionsValues.length
-            !value.addressQuestions.state ||
-            !value.addressQuestions.zipCode ||
-            !value.isVehicleProtected)
     ) {
         return errorMessages.MOBILE_LOCATION_REQUIRED;
     }
@@ -305,9 +312,7 @@ export default {
                         zipCode: this.zipCode,
                     },
                     isVehicleProtected: this.isVehicleProtected,
-                    isMobileSelected:
+                    isMobileSelected: this.selectedAppointmentType == AppointmentTypeStrings.MOBILE,
-                        this.selectedAppointmentType == AppointmentTypeStrings.MOBILE &&
-                        !this.getIsMobileLocationOpened(),
                 };
             },
         },
@@ -758,18 +763,6 @@ export default {
         setMobileLocationInValid(isMobileLocationInValid) {
             this.isMobileAddressValid = !isMobileLocationInValid;
         },
-        displayMobileAddressQuestion(openMobileLocation) {
-            var mobileLocationQuestionsRef = this.$refs.mobileLocationQuestions;
-            var isMobileAddressComplete = mobileLocationQuestionsRef?.isMobileAddressComplete;
-            if (isMobileAddressComplete?.()) {
-                mobileLocationQuestionsRef.isMobileLocationOpened = false;
-            } else {
-                mobileLocationQuestionsRef.isMobileLocationOpened = openMobileLocation;
-            }
-        },
-        getIsMobileLocationOpened() {
-            return this.$refs.mobileLocationQuestions?.isMobileLocationOpened;
-        },
     },
     watch: {
         zipCode: {
@@ -794,10 +787,18 @@ export default {
                     this.selectedProvider = new Provider(
                         this.shopProviderData.mobileProviderNumber
                     );
-                    this.displayMobileAddressQuestion(true);
+                    if (this.zipCode == this.getServiceZipCodeFromStore()) {
+                        //restore mobile address from store in case user make changes to address but not commit it.
+                        this.streetAddress = this.getServiceAddressFromStore();
+                        this.apartmentNumberOrBusinessName = this.getServiceAddress2FromStore();
+                        this.city = this.getServiceCityFromStore();
+                        this.isVehicleProtected = this.getIsVehicleProtectedFromStore();
+                        this.$refs.mobileLocationQuestions.resetAlerts();
+                    } else {
+                        this.resetMobileLocation();
+                    }
                 } else {
                     this.selectedProvider = new Provider();
-                    this.displayMobileAddressQuestion(false);
                 }
             },
         },