Update confirmation.vue
replace #YMM #Email with global state and #ADDRESS @MYACCOUNT url with custom state
This commit is contained in:
parent
eec75ef94f
commit
3a27911c79
1 changed files with 50 additions and 57 deletions
|
|
@ -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("<", "<")
|
||||
.replaceAll(">", ">");
|
||||
},
|
||||
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(/</g, "<")
|
||||
.replace(/>/g, ">");
|
||||
},
|
||||
},
|
||||
components: {
|
||||
funnelHeader,
|
||||
|
|
|
|||
Loading…
Reference in a new issue