CASH-502

open mobile address when click on mobile option

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

@@ -58,8 +58,9 @@
                     cmsWidgetName="AlertMismatchStateAndZipWidget"
                     alertClass="alert-danger"
                     v-bind:isDismissible="false" />
-            </div>                
+            </div>
-    </div>
+        </div>
+    </transition>
 </template>
 <script>
 // Components
@@ -90,8 +91,7 @@ export default {
         "updated-contains-military-base",
         "updated-bill-to-account-number",
         "setMobileLocation",
-        "set-mobile-location-invalid",        
+        "set-mobile-location-invalid",
-        "updated-modal-opened",
     ],
     data() {
         return {
@@ -208,10 +208,28 @@ 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);
-            }
+        },
-
         resetAlerts() {
             this.displayInvalidZipAlert = false;
             this.displayMismatchStateAndZipAlert = false;
@@ -282,12 +300,19 @@ export default {
     },
     watch: {
         internalModel: {
-            handler(newValue) {
+            handler() {
-                this.handleChange(newValue);
                 this.setMobileLocation();
             },
             deep: true,
         },
+
+        modelValue: {
+            handler(newValue) {
+                this.internalModel = deepClone(newValue);
+                this.handleChange(newValue);
+            },
+            deep: true,
+        },
     },
     components: {
         addressQuestions,

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

@@ -343,7 +343,6 @@ describe("service-location.vue", () => {
                     zipCode: "43054",
                 },
                 isVehicleProtected: true,
-                isMobileSelectedAndModalClosed: true,
             };
             wrapper.vm.mobileLocationQuestions = mobileLocationQuestions;
 
@@ -356,7 +355,6 @@ describe("service-location.vue", () => {
                     zipCode: "61606",
                 },
                 isVehicleProtected: null,
-                isMobileSelectedAndModalClosed: false,
             };
 
             // Act
@@ -459,7 +457,6 @@ describe("service-location.vue", () => {
                     zipCode: "",
                 },
                 isVehicleProtected: null,
-                isMobileSelectedAndModalClosed: false,
             };
             wrapper.vm.mobileLocationQuestions = mobileLocationQuestions;
             const newMobileLocationQuestions = {
@@ -471,7 +468,6 @@ describe("service-location.vue", () => {
                     zipCode: "43054",
                 },
                 isVehicleProtected: true,
-                isMobileSelectedAndModalClosed: true,
             };
 
             //wrapper.vm.closeModalAction = jest.fn();

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

@@ -100,7 +100,6 @@
                         @updated-serviceability="setServiceabilityDetails"
                         @updated-contains-military-base="setContainsMilitaryBase"
                         @updated-mobile-ctu="setCtuForMobile"
-                        @updated-modal-opened="setMobileLocationModalOpened"
                         validationRules="mobile-location-required"
                         ref="mobileLocationQuestions"
                         linkWidgetName="MobileLocationLinkWidget"
@@ -123,7 +122,7 @@
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
-                        :isForwardActionDisabled="!meta.valid || isForwardActionDisabled || mobileLocationModalOpened"
+                        :isForwardActionDisabled="!meta.valid || isForwardActionDisabled"
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
                 </div>
@@ -177,12 +176,11 @@ const MOBILE_FEE_PART_TYPE = "MOBILE FEE";
 // DEFINE VALIDATION RULES
 defineRule("mobile-location-required", (value) => {
     if (
-        value.isMobileSelectedAndModalClosed &&
+        !value.addressQuestions.streetAddress ||
-        (!value.addressQuestions.streetAddress ||
+        !value.addressQuestions.city ||
-            !value.addressQuestions.city ||
+        !value.addressQuestions.state ||
-            !value.addressQuestions.state ||
+        !value.addressQuestions.zipCode ||
-            !value.addressQuestions.zipCode ||
+        !value.isVehicleProtected
-            !value.isVehicleProtected)
     ) {
         return errorMessages.MOBILE_LOCATION_REQUIRED;
     }
@@ -217,7 +215,6 @@ export default {
             shopProviderData: null,
             navigatingForward: false,
             isMobileAddressValid: true,
-            mobileLocationModalOpened: false,
         };
     },
     async beforeRouteEnter(to, from, next) {
@@ -308,9 +305,6 @@ export default {
                         zipCode: this.zipCode,
                     },
                     isVehicleProtected: this.isVehicleProtected,
-                    isMobileSelectedAndModalClosed:
-                        this.selectedAppointmentType === "Mobile" &&
-                        !this.mobileLocationModalOpened,
                 };
             },
         },
@@ -514,9 +508,6 @@ export default {
         setRecycleFeePart(recycleFeePart) {
             this.recycleFeePart = recycleFeePart;
         },
-        setMobileLocationModalOpened(isModalOpened) {
-            this.mobileLocationModalOpened = isModalOpened;
-        },
         //creating async function as the computed property can not directly handle asynchronous operations or promises.
         async setMobileLocationQuestions(newValue) {
             var newZipCode = newValue.addressQuestions.zipCode;
@@ -784,9 +775,11 @@ export default {
                     this.selectedProvider = new Provider(
                         this.shopProviderData.mobileProviderNumber
                     );
-                    var mobileLocationQs = this.$refs.mobileLocationQuestions;
+                    var mobileLocationQuestionsRef = this.$refs.mobileLocationQuestions;
-                    if (!mobileLocationQs.isMobileAddressComplete()) {
+                    var isMobileAddressComplete =
-                        mobileLocationQs.openModal();
+                        mobileLocationQuestionsRef.isMobileAddressComplete;
+                    if (isMobileAddressComplete) {
+                        mobileLocationQuestionsRef.isMobileLocationOpened = true;
                     }
                 } else {
                     this.selectedProvider = new Provider();