Merge pull request #1385 from Safelite/feature/Digital/csr-1411
Update confirmation.vue
This commit is contained in:
commit
4a4143d640
1 changed files with 50 additions and 57 deletions
|
|
@ -17,8 +17,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">
|
||||||
|
|
@ -35,11 +35,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("<", "<")
|
||||||
|
.replaceAll(">", ">");
|
||||||
},
|
},
|
||||||
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)}`;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -192,54 +226,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(/</g, "<")
|
|
||||||
.replace(/>/g, ">");
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
funnelHeader,
|
funnelHeader,
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue