diff --git 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
index d1aa4dd4b..b4f9a1d2e 100644
--- 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
@@ -4,7 +4,6 @@
for="mobileLocationLinkPromptId"
:aria-label="mobileLocationLinkPromptText"
class="form-label fw-bold w-100 ps-4 pe-4 pt-4"
- :class="[questionAlignment === 'center' ? 'text-center w-100 mb-5' : '']"
v-html="mobileLocationLinkPromptText">
{
+ this.mobileFee = result;
+ });
},
computed: {
- mobileFeeText() {
- const cmsContentText = this.getCmsContent("MobileFeeDisclaimerWidget", "Text");
- return cmsContentText.replaceAll("{custom:mobileFee}", this.mobileFee);
- },
mobileLocationLinkPromptText() {
return this.getCmsContent(this.linkWidgetName, "HeaderText");
},
@@ -119,12 +115,13 @@ export default {
modalHeaderText() {
return this.getCmsContent(this.modalWidgetName, "HeaderText");
},
+ mobileFeeText() {
+ const cmsContentText = this.getCmsContent("MobileFeeDisclaimerWidget", "Text");
+ return cmsContentText.replaceAll("{custom:mobileFee}", this.mobileFee);
+ },
modalFooterText() {
return this.getCmsContent(this.modalWidgetName, "FooterText");
},
- modalName() {
- return this.modalWidgetName;
- },
addressModel: {
get: function () {
return this.modelValue.addressQuestions;
@@ -143,12 +140,25 @@ export default {
zipCode: modelToCopy.addressQuestions.zipCode,
},
isVehicleProtected: modelToCopy.isVehicleProtected,
- isZipServiceableMobile: modelToCopy.isZipServiceableMobile,
- isZipServiceableInShop: modelToCopy.isZipServiceableInShop,
+ serviceZipCode: modelToCopy.serviceZipCode
};
},
+ setServiceZipCode(serviceZipCode) {
+ this.internalModel.serviceZipCode = serviceZipCode;
+ },
+
+ getServiceZipCodeFromStore() {
+ return this.$store.getters.order.serviceLocation.zipCode;
+ },
+
async getMobileFee() {
+ if (!this.internalModel.serviceZipCode) {
+ return "";
+ }
+
+ const zipCodeData = await this.getZipCodeData(this.internalModel.serviceZipCode);
+
// Get the Mobile Fee Part
const mobileFeePart = await baseMixin.methods.dispatchStoreAction(
storeActions.GET_MOBILE_FEE_PART,
@@ -159,7 +169,11 @@ export default {
// Get the Mobile Fee Part Price
const pricingResults = await baseMixin.methods.dispatchStoreAction(
storeActions.PRICE_ORDER_ITEMS,
- [mobileFeePart.data],
+ {
+ availableLineItems: [mobileFeePart.data],
+ serviceZipCode: zipCodeData.zipCode,
+ zipCodeCtu: zipCodeData.zipCodeCtu
+ },
false
);
@@ -206,7 +220,15 @@ export default {
this.displayInvalidZipAlert = true;
} else {
// Update the page level model
+ this.internalModel.serviceZipCode = this.internalModel.addressQuestions.zipCode;
this.$emit("update:modelValue", this.internalModel);
+
+ // Emit the update service zip code information to the parent to update the service zipcode details
+ this.$emit("updated-zip-code", {
+ zipCode: this.internalModel.addressQuestions.zipCode,
+ state: zipCodeData.state,
+ isServiceable: zipCodeData.isServiceable
+ });
this.closeModal();
}
@@ -216,6 +238,11 @@ export default {
modelValue(newValue) {
this.internalModel = this.copyModel(newValue);
},
+ "modelValue.serviceZipCode": {
+ async handler(newValue) {
+ this.mobileFee = await this.getMobileFee(newValue);
+ },
+ },
},
components: {
textLink,
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 6406519dd..06ae0ed12 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -6,18 +6,15 @@
+ modalWidgetName="ServiceZipModalWidget" />
+ modalWidgetName="MobileLocationModalWidget" />