CASH-761
remove link button for mobile address question
This commit is contained in:
parent
c53e5d5cbc
commit
22ab7632a5
3 changed files with 12 additions and 74 deletions
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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);
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue