jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Mobile fee display and additional functional

Browse source
This commit is contained in:
Leah Schumann 2023-02-24 08:57:04 -05:00
parent 2d01671fef
commit cb917807e7
4 changed files with 83 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
View file

@ -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"></label>
<div class="update-mobile-location-text-link">
<textLink
@ -63,7 +62,8 @@ export default {
return {
internalModel: this.copyModel(this.modelValue),
displayInvalidZipAlert: false,
mobileFee: "",
modalName: "MobileLocationModalWidget",
mobileFee: "",
};
},
props: {
@ -78,26 +78,22 @@ export default {
zipCode: "",
},
isVehicleProtected: null,
}),
serviceZipCode: ""
}),
},
isZipServiceableMobile: Boolean,
isZipServiceableInShop: Boolean,
serviceZipCode: String,
isZipServiceableInShop: Boolean,
linkWidgetName: String,
modalWidgetName: String,
mobileFeeDisclaimerWidgetName: String,
workspaceRequirementsWidgetName: String,
alertNonServiceableZipWidgetName: String,
alertInvalidZipWidgetName: String,
},
async mounted() {
this.mobileFee = await this.getMobileFee();
mounted() {
this.getMobileFee().then((result) => {
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,

30
src/layouts/service-location/service-location.vue
View file

@ -6,18 +6,15 @@
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<serviceZipModalQuestion
v-model="serviceZipCodeQuestion"
@service-zip-updated="resetMobileLocation"
ref="serviceZipCodeQuestion"
linkWidgetName="ServiceZipLinkWidget"
modalWidgetName="ServiceZipModalWidget"
textboxQuestionWidgetName="ServiceZipQuestionWidget"
alertInvalidZipWidgetName="AlertInvalidZipWidget" />
modalWidgetName="ServiceZipModalWidget" />
<mobileLocationModalQuestions
v-model="mobileLocationQuestions"
@updated-zip-code="resetServiceZipCode"
ref="mobileLocationModalQuestions"
linkWidgetName="MobileLocationLinkWidget"
modalWidgetName="MobileLocationModalWidget"
mobileFeeDisclaimerWidgetName="MobileFeeDisclaimerWidget"
workspaceRequirementsWidgetName="WorkspaceRequirementsWidget" />
modalWidgetName="MobileLocationModalWidget" />
<funnel-footer
cmsWidgetName="FunnelFooterWidget"
ref="funnelFooter"
@ -40,7 +37,6 @@ import { Form } from "vee-validate";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
import store from "@/store";
export default {
name: "service-location",
@ -62,6 +58,7 @@ export default {
zipCode: this.getRegistrationZipFromStore(),
},
isVehicleProtected: null,
serviceZipCode: this.getServiceZipCodeFromStore(),
},
};
},
@ -111,7 +108,7 @@ export default {
getIsServiceableFromStore() {
return this.$store.getters.order.serviceLocation.isServiceable;
},
resetMobileLocation() {
resetMobileLocation(updatedServiceZipCode) {
this.mobileLocationQuestions = {
addressQuestions: {
streetAddress: "",
@ -121,10 +118,16 @@ export default {
zipCode: "",
},
isVehicleProtected: null,
serviceZipCode: updatedServiceZipCode,
};
this.$refs.mobileLocationModalQuestions.resetComponent();
},
resetServiceZipCode(newValue) {
this.serviceZipCodeQuestion.state = newValue.state;
this.serviceZipCodeQuestion.zipCode = newValue.zipCode;
this.serviceZipCodeQuestion.isServiceable = newValue.isServiceable;
},
backButtonAction() {
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
},
@ -132,6 +135,15 @@ export default {
navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal });
},
},
watch: {
serviceZipCodeQuestion: {
handler(newValue, oldValue) {
if (newValue !== oldValue) {
this.resetMobileLocation(newValue.zipCode);
}
},
},
},
components: {
serviceZipModalQuestion,
mobileLocationModalQuestions,

11
src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
View file

@ -138,11 +138,6 @@ export default {
this.internalModel.state = zipCodeData.state;
this.internalModel.isServiceable = zipCodeData.isServiceable;
// Notify the page that the service zip has been updated to clear Mobile Location form
if (this.internalModel.zipCode !== this.modelValue.zipCode) {
this.$emit("service-zip-updated");
}
// Update the page level model
this.$emit("update:modelValue", this.internalModel);
@ -151,14 +146,14 @@ export default {
},
},
watch: {
modelValue(newValue) {
this.internalModel = this.copyModel(newValue);
},
"internalModel.zipCode": {
handler() {
this.resetsOnZipInput();
},
},
modelValue(newValue) {
this.internalModel = this.copyModel(newValue);
},
},
components: {
textLink,

16
src/store/index.js
View file

@ -1423,24 +1423,34 @@ export const actions = {
context.commit(storeMutations.UPDATE_VAPS, vaps);
},
// Price order actions
async priceOrderItems(context, availableLineItems) {
async priceOrderItems(context, { availableLineItems, serviceZipCode, ctu }) {
const zipCodeToUse = serviceZipCode
? serviceZipCode
: context.getters.order.serviceLocation.zipCode;
const ctuToUse = ctu ? ctu : context.getters.order.serviceLocation.zipCodeCtu;
const availableLineItemsFormattedForRequest =
getLineItemQueryStringForPricing(availableLineItems);
const vehicle = context.getters.order.vehicle;
let queryString =
`ParentAccountNumber=${applicationConfig.CASH_ACCOUNT_NUMBER}` +
`&CTU=${context.getters.order.serviceLocation.zipCodeCtu}` +
`&CTU=${ctuToUse}` +
`&CarId=${vehicle.carId}` +
`&Make=${vehicle.make}` +
`&Model=${vehicle.model}` +
`&Year=${vehicle.year}` +
`&EON=${context.getters.order.eon}` +
`&ZipCode=${context.getters.order.serviceLocation.zipCode}` +
`&ZipCode=${zipCodeToUse}` +
`${availableLineItemsFormattedForRequest}`;
const lineItemServerData = context.getters.order.lineItems.serverData;
if (lineItemServerData) {
queryString += `&ServerData=${encodeURIComponent(lineItemServerData)}`;
}
const response = await globalMethods.callHttpClient({
method: endpoints.PriceOrderItems.method,
endpoint: `${endpoints.PriceOrderItems.url}?${queryString}`,