remove link button for mobile address question
This commit is contained in:
hiteshkumar87 2025-05-26 11:09:59 +05:30
parent c53e5d5cbc
commit 22ab7632a5
3 changed files with 12 additions and 74 deletions

View file

@ -2,21 +2,7 @@
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<div class="mobile-location-questions"> <div class="mobile-location-questions">
<div class="text-center" :id="componentId"> <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 <span
class="d-inline-flex small mt-0 center-error-message" class="d-inline-flex small mt-0 center-error-message"
aria-atomic="true" aria-atomic="true"
@ -28,9 +14,10 @@
v-if="mobileFeeApplies" v-if="mobileFeeApplies"
:customText="mobileFeeText" :customText="mobileFeeText"
cmsWidgetName="MobileFeeDisclaimerWidget" cmsWidgetName="MobileFeeDisclaimerWidget"
typeStyle="caption" /> typeStyle="caption"
class="ps-4 pe-4 mt-4" />
</div> </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" /> <div v-html="headerText" class="HeaderText" />
<addressQuestions <addressQuestions
ref="addressQuestions" ref="addressQuestions"
@ -64,7 +51,6 @@
</template> </template>
<script> <script>
// Components // Components
import textLink from "@/ux-components/text-link/text-link";
import textBlock from "@/digital-components/text-block/text-block"; import textBlock from "@/digital-components/text-block/text-block";
import alert from "@/ux-components/alert/alert"; import alert from "@/ux-components/alert/alert";
import addressQuestions from "@/fmg-components/address-questions/address-questions"; import addressQuestions from "@/fmg-components/address-questions/address-questions";
@ -82,6 +68,7 @@ import {
// Validation // Validation
import { useField } from "vee-validate"; import { useField } from "vee-validate";
import { v4 as uuidv4 } from "uuid"; import { v4 as uuidv4 } from "uuid";
import { FALSE } from "sass";
export default { export default {
name: "mobile-location-modal-questions", name: "mobile-location-modal-questions",
@ -97,7 +84,6 @@ export default {
return { return {
internalModel: deepClone(this.modelValue), internalModel: deepClone(this.modelValue),
displayInvalidZipAlert: false, displayInvalidZipAlert: false,
isMobileLocationOpened: false,
displayMismatchStateAndZipAlert: false, displayMismatchStateAndZipAlert: false,
}; };
}, },
@ -159,15 +145,6 @@ export default {
mobileFeeApplies: Boolean, mobileFeeApplies: Boolean,
}, },
computed: { 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() { mobileFeeText() {
const cmsContentText = this.getCmsContent("MobileFeeDisclaimerWidget", "Text"); const cmsContentText = this.getCmsContent("MobileFeeDisclaimerWidget", "Text");
return cmsContentText.replaceAll("{custom:mobileFee}", this.mobileFee); return cmsContentText.replaceAll("{custom:mobileFee}", this.mobileFee);
@ -208,25 +185,6 @@ export default {
}, },
}, },
methods: { 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) { setMobileLocationInvalid(isFormInvalid) {
this.$emit("set-mobile-location-invalid", isFormInvalid); this.$emit("set-mobile-location-invalid", isFormInvalid);
}, },
@ -300,9 +258,6 @@ export default {
// update the page level model // update the page level model
this.$emit("setMobileLocation", this.internalModel); this.$emit("setMobileLocation", this.internalModel);
}, },
toggleMobileLocation() {
this.isMobileLocationOpened = !this.isMobileLocationOpened;
},
}, },
watch: { watch: {
internalModel: { internalModel: {
@ -324,7 +279,6 @@ export default {
addressQuestions, addressQuestions,
vehicleProtectedQuestion, vehicleProtectedQuestion,
textBlock, textBlock,
textLink,
alert, alert,
}, },
}; };
@ -350,14 +304,15 @@ export default {
.update-mobile-location-text-link { .update-mobile-location-text-link {
white-space: pre-line; white-space: pre-line;
} }
.address-questions-container { // .address-questions-container {
margin-top: 1rem; // margin-top: 1rem;
} // }
.text-black { .text-black {
color: $black; color: $black;
} }
.HeaderText { .HeaderText {
margin-top: 1rem;
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
line-height: 1.625rem; line-height: 1.625rem;

View file

@ -469,10 +469,9 @@ describe("service-location.vue", () => {
zipCode: "43054", zipCode: "43054",
}, },
isVehicleProtected: true, isVehicleProtected: true,
isMobileSelected: false, isMobileSelected: true,
}; };
//wrapper.vm.closeModalAction = jest.fn();
// Act // Act
// Trigger the event // Trigger the event

View file

@ -305,9 +305,7 @@ export default {
zipCode: this.zipCode, zipCode: this.zipCode,
}, },
isVehicleProtected: this.isVehicleProtected, isVehicleProtected: this.isVehicleProtected,
isMobileSelected: isMobileSelected: this.selectedAppointmentType == AppointmentTypeStrings.MOBILE,
this.selectedAppointmentType == AppointmentTypeStrings.MOBILE &&
!this.getIsMobileLocationOpened(),
}; };
}, },
}, },
@ -758,18 +756,6 @@ export default {
setMobileLocationInValid(isMobileLocationInValid) { setMobileLocationInValid(isMobileLocationInValid) {
this.isMobileAddressValid = !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: { watch: {
zipCode: { zipCode: {
@ -794,10 +780,8 @@ export default {
this.selectedProvider = new Provider( this.selectedProvider = new Provider(
this.shopProviderData.mobileProviderNumber this.shopProviderData.mobileProviderNumber
); );
this.displayMobileAddressQuestion(true);
} else { } else {
this.selectedProvider = new Provider(); this.selectedProvider = new Provider();
this.displayMobileAddressQuestion(false);
} }
}, },
}, },