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" />
</div>
<div class="scheduleText">
<p>{{ this.getScheduleDate() }}</p>
<p>{{ this.getScheduleTime() }}</p>
<p>{{ this.ScheduleDateFormatted }}</p>
<p>{{ this.ScheduleTimeFormatted }}</p>
</div>
<div class="calendar-section">
@ -34,11 +34,9 @@
</button>
</div>
</div>
<div
class="appoinmenttext"
v-html="this.getAppointmentWordingText()"></div>
<div class="appoinmenttext" v-html="this.AppointmentWordingText"></div>
</div>
<div class="emailtext" v-html="this.getConfirmationEmailText()"></div>
<div class="emailtext" v-html="this.ConfirmationEmailText"></div>
<navbar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
@ -98,7 +96,10 @@ export default {
return this.getCmsContent("ScheduleConfirmationWidget", "Image");
},
ConfirmationEmailText() {
return this.getCmsContent("ConfirmationEmailWidget", "BodyText");
return this.getCmsContent("ConfirmationEmailWidget", "BodyText")
.replaceAll("{custom:MY_ACCOUNT_URL}", applicationConfig.MY_ACCOUNT)
.replaceAll("&lt;", "<")
.replaceAll("&gt;", ">");
},
ScheduleDate() {
return store.getters.order.schedule.date;
@ -148,17 +149,50 @@ export default {
ProviderZipCode() {
return store.getters.order.serviceLocation.provider.address.zipCode;
},
Year() {
return store.getters.order.vehicle.year;
AppointmentWordingText() {
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() {
return store.getters.order.vehicle.make;
ServiceLocationFullAddress() {
return `${this.ServiceLocationAddress2 ? this.ServiceLocationAddress2 + "," : ""} ${
this.ServiceLocationAddress
},<br/> ${this.ServiceLocationCity}, ${this.ServiceLocationState} ${
this.ServiceLocationZipCode
}`;
},
Model() {
return store.getters.order.vehicle.model;
ProviderFullAddress() {
return `${this.ProviderAddress},<br/> ${this.ProviderCity}, ${this.ProviderState} ${this.ProviderZipCode}`;
},
Email() {
return store.getters.order.customer.emailAddress;
ScheduleDateFormatted() {
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: {
@ -187,54 +221,13 @@ export default {
// 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;
},
forwardButtonAction() {
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: {
funnelHeader,