Update confirmation.vue

replace #YMM #Email with global state and #ADDRESS @MYACCOUNT url with custom state
This commit is contained in:
hiteshkumar87 2023-10-09 16:30:51 +05:30
parent eec75ef94f
commit 3a27911c79

View file

@ -16,8 +16,8 @@
:displayGenericVehicleImage="false" /> :displayGenericVehicleImage="false" />
</div> </div>
<div class="scheduleText"> <div class="scheduleText">
<p>{{ this.getScheduleDate() }}</p> <p>{{ this.ScheduleDateFormatted }}</p>
<p>{{ this.getScheduleTime() }}</p> <p>{{ this.ScheduleTimeFormatted }}</p>
</div> </div>
<div class="calendar-section"> <div class="calendar-section">
@ -34,11 +34,9 @@
</button> </button>
</div> </div>
</div> </div>
<div <div class="appoinmenttext" v-html="this.AppointmentWordingText"></div>
class="appoinmenttext"
v-html="this.getAppointmentWordingText()"></div>
</div> </div>
<div class="emailtext" v-html="this.getConfirmationEmailText()"></div> <div class="emailtext" v-html="this.ConfirmationEmailText"></div>
<navbar <navbar
cmsWidgetName="FunnelFooterWidget" cmsWidgetName="FunnelFooterWidget"
ref="navbar" ref="navbar"
@ -98,7 +96,10 @@ export default {
return this.getCmsContent("ScheduleConfirmationWidget", "Image"); return this.getCmsContent("ScheduleConfirmationWidget", "Image");
}, },
ConfirmationEmailText() { ConfirmationEmailText() {
return this.getCmsContent("ConfirmationEmailWidget", "BodyText"); return this.getCmsContent("ConfirmationEmailWidget", "BodyText")
.replaceAll("{custom:MY_ACCOUNT_URL}", applicationConfig.MY_ACCOUNT)
.replaceAll("&lt;", "<")
.replaceAll("&gt;", ">");
}, },
ScheduleDate() { ScheduleDate() {
return store.getters.order.schedule.date; return store.getters.order.schedule.date;
@ -148,17 +149,50 @@ export default {
ProviderZipCode() { ProviderZipCode() {
return store.getters.order.serviceLocation.provider.address.zipCode; return store.getters.order.serviceLocation.provider.address.zipCode;
}, },
Year() { AppointmentWordingText() {
return store.getters.order.vehicle.year; if (this.AppointmentType == AppointmentTypeStrings.MOBILE) {
return this.MobileWordingText.replaceAll(
"{custom:ADDRESS}",
this.ServiceLocationFullAddress
);
} else if (this.AppointmentType == AppointmentTypeStrings.DROP_OFF) {
return this.DropOffWordingText.replaceAll(
"{custom:ADDRESS}",
this.ProviderFullAddress
);
} else {
return this.InShopWordingText.replaceAll(
"{custom:ADDRESS}",
this.ProviderFullAddress
);
}
}, },
Make() { ServiceLocationFullAddress() {
return store.getters.order.vehicle.make; return `${this.ServiceLocationAddress2 ? this.ServiceLocationAddress2 + "," : ""} ${
this.ServiceLocationAddress
},<br/> ${this.ServiceLocationCity}, ${this.ServiceLocationState} ${
this.ServiceLocationZipCode
}`;
}, },
Model() { ProviderFullAddress() {
return store.getters.order.vehicle.model; return `${this.ProviderAddress},<br/> ${this.ProviderCity}, ${this.ProviderState} ${this.ProviderZipCode}`;
}, },
Email() { ScheduleDateFormatted() {
return store.getters.order.customer.emailAddress; const scheduleDate = new Date(this.ScheduleDate);
return `${getFullDayName(scheduleDate)}, ${getFullMonthName(
scheduleDate
)} ${scheduleDate.getDate()}`;
},
ScheduleTimeFormatted() {
if (this.AppointmentType == AppointmentTypeStrings.MOBILE) {
return `Between ${get12HourTimeMobileFormat(
this.ScheduleStartTime
)} - ${get12HourTimeMobileFormat(this.ScheduleEndTime)}`;
} else if (this.AppointmentType == AppointmentTypeStrings.DROP_OFF) {
return `Drop off before 9:30 AM`;
} else {
return `at ${get12HourTimeFormat(this.ScheduleStartTime)}`;
}
}, },
}, },
methods: { methods: {
@ -187,54 +221,13 @@ export default {
// Schedule // Schedule
const schedule = store.getters.order.schedule; const schedule = store.getters.order.schedule;
const scheduleReqs = !!(schedule.date && schedule.startTime); //removing schedule.endTime for testing const scheduleReqs = !!(schedule.date && schedule.startTime && schedule.endTime);
return serviceLocationReqs && scheduleReqs; return serviceLocationReqs && scheduleReqs;
}, },
forwardButtonAction() { forwardButtonAction() {
window.location.assign("//www.safelite.com/"); window.location.assign("//www.safelite.com/");
}, },
getScheduleDate() {
const scheduleDate = new Date(this.ScheduleDate);
return `${getFullDayName(scheduleDate)}, ${getFullMonthName(
scheduleDate
)} ${scheduleDate.getDate()}`;
},
getScheduleTime() {
if (this.AppointmentType == AppointmentTypeStrings.MOBILE) {
return `Between ${get12HourTimeMobileFormat(
this.ScheduleStartTime
)} - ${get12HourTimeMobileFormat(this.ScheduleEndTime)}`;
} else if (this.AppointmentType == AppointmentTypeStrings.DROP_OFF) {
return `Drop off before 9:30 AM`;
} else {
return `at ${get12HourTimeFormat(this.ScheduleStartTime)}`;
}
},
getAppointmentWordingText() {
const ymm = `${this.Year} ${this.Make} ${this.Model}`;
if (this.AppointmentType == AppointmentTypeStrings.MOBILE) {
const address = `${
this.ServiceLocationAddress2 ? this.ServiceLocationAddress2 + "," : ""
} ${this.ServiceLocationAddress},<br/> ${this.ServiceLocationCity}, ${
this.ServiceLocationState
} ${this.ServiceLocationZipCode}`;
return this.MobileWordingText.replace("#ADDRESS", address).replace("#YMM", ymm);
} else if (this.AppointmentType == AppointmentTypeStrings.DROP_OFF) {
const address = `${this.ProviderAddress},<br/> ${this.ProviderCity}, ${this.ProviderState} ${this.ProviderZipCode}`;
return this.DropOffWordingText.replace("#ADDRESS", address).replace("#YMM", ymm);
} else {
const address = `${this.ProviderAddress},<br/> ${this.ProviderCity}, ${this.ProviderState} ${this.ProviderZipCode}`;
return this.InShopWordingText.replace("#ADDRESS", address).replace("#YMM", ymm);
}
},
getConfirmationEmailText() {
return this.ConfirmationEmailText.replace("#EMAIL", this.Email)
.replace("#MY_ACCOUNT_URL", applicationConfig.MY_ACCOUNT)
.replace(/&lt;/g, "<")
.replace(/&gt;/g, ">");
},
}, },
components: { components: {
funnelHeader, funnelHeader,