In progress
This commit is contained in:
Michaela Brydon
parent
23de2db48e
commit
93ed73da31
2 changed files with 640 additions and 471 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -7,7 +7,7 @@
|
|||
<div class="container-fluid fade-on-route-transition">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 px-0 px-md-2">
|
||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||
<siteHeader :cmsWidgetName="widgets.siteHeader" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
|
|
@ -21,13 +21,13 @@
|
|||
<div class="appointment-details">
|
||||
<div>
|
||||
<vehicleBanner
|
||||
cmsWidgetName="VehicleBannerWidget"
|
||||
:cmsWidgetName="widgets.vehicleBanner"
|
||||
:displayGenericVehicleImage="false">
|
||||
</vehicleBanner>
|
||||
</div>
|
||||
<div class="appointment-date-time text-center mt-4">
|
||||
<p>{{ formatDate(schedule.date) }}</p>
|
||||
<p class="mt-2">{{ appointmentTimeFormatted }}</p>
|
||||
<p class="mt-2">{{ appointmentTimeText }}</p>
|
||||
</div>
|
||||
<addToCalendar
|
||||
mobileWidgetName="AddToCalendar_Mobile"
|
||||
|
|
@ -36,9 +36,7 @@
|
|||
overnightDropOffWidgetName="AddToCalendar_OvernightDropOff"
|
||||
allDayDropOffWidgetName="AddToCalendar_AllDayDropOff"
|
||||
sameDayDropOffWidgetName="AddToCalendar_SameDayDropOff"
|
||||
:serviceLocationFullAddress="
|
||||
serviceLocationFullAddress
|
||||
"
|
||||
:serviceLocationFullAddress="serviceLocationFullAddress"
|
||||
:providerFullAddress="providerFullAddress"
|
||||
:appointmentType="appointmentType"
|
||||
:scheduleDate="schedule.date"
|
||||
|
|
@ -69,7 +67,7 @@
|
|||
<siteFooter
|
||||
v-if="carrierUrl"
|
||||
ref="siteFooter"
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
:cmsWidgetName="widgets.siteFooter"
|
||||
:isStackedVertically="true"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@ForwardClicked="forwardButtonAction"
|
||||
|
|
@ -154,7 +152,7 @@ export default {
|
|||
var { issConfig } = this.mainStore;
|
||||
return {
|
||||
vehicle,
|
||||
customerEmail: customer.emailAddress,
|
||||
customerEmail: customer?.emailAddress,
|
||||
payment,
|
||||
schedule,
|
||||
serviceLocation,
|
||||
|
|
@ -164,10 +162,13 @@ export default {
|
|||
carrierName: issConfig.clientName,
|
||||
carrierUrl: issConfig.successReturnURL,
|
||||
widgets: {
|
||||
siteHeader: 'SiteHeaderWidget',
|
||||
vehicleBanner: 'VehicleBannerWidget',
|
||||
emailConfirmation: 'EmailConfirmationWordingWidget',
|
||||
orderConfirmation: 'OrderConfirmationContent',
|
||||
mobile: 'MobileWordingWidget',
|
||||
dropOffAndInShop: 'DropOffAndInShopWordingWidget'
|
||||
dropOffAndInShop: 'DropOffAndInShopWordingWidget',
|
||||
siteFooter: 'SiteFooterWidget'
|
||||
},
|
||||
}
|
||||
},
|
||||
|
|
@ -176,10 +177,10 @@ export default {
|
|||
return {
|
||||
inShopAppointment: this.isInShopAppointment,
|
||||
dropOffAppointment: this.isDropOffAppointment,
|
||||
vehicleYear: this.vehicle.year,
|
||||
vehicleMake: this.vehicle.make,
|
||||
vehicleModel: this.vehicle.model,
|
||||
address: this.appointmentAddress,
|
||||
vehicleYear: this.vehicle?.year,
|
||||
vehicleMake: this.vehicle?.make,
|
||||
vehicleModel: this.vehicle?.model,
|
||||
address: this.appointmentLocation,
|
||||
inShopDuration: this.inShopAppointmentDuration,
|
||||
email: this.customerEmail,
|
||||
CUSTOMER_PORTAL_URL: applicationConfig.CUSTOMER_PORTAL_URL,
|
||||
|
|
@ -204,23 +205,6 @@ export default {
|
|||
this.widgets.orderConfirmation,
|
||||
widgetFields.CONTENT_GROUP_WIDGET.IMAGE);
|
||||
},
|
||||
appointmentTimeFormatted() {
|
||||
const { startTime, endTime } = this.schedule;
|
||||
var appointmentTime = null;
|
||||
if (this.isDropOffAppointment){
|
||||
appointmentTime = 'Drop off before 9:30 AM';
|
||||
}
|
||||
if (this.isInShopAppointment){
|
||||
const formattedStartTime = get12HourTimeFormat(startTime);
|
||||
appointmentTime = `at ${formattedStartTime}`
|
||||
}
|
||||
if (this.isMobileAppointment) {
|
||||
const mobileStartTime = get12HourTimeMobileFormat(startTime);
|
||||
const mobileEndTime = get12HourTimeMobileFormat(endTime);
|
||||
appointmentTime = `Between ${mobileStartTime} - ${mobileEndTime}`;
|
||||
}
|
||||
return appointmentTime;
|
||||
},
|
||||
mobileWordingText() {
|
||||
return this.getCmsContentWithCustomValues(
|
||||
this.widgets.mobile,
|
||||
|
|
@ -231,36 +215,33 @@ export default {
|
|||
this.widgets.mobile,
|
||||
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2);
|
||||
},
|
||||
dropOffAndInShopWordingText() {
|
||||
nonMobileWordingText() {
|
||||
return this.getCmsContentWithCustomValues(
|
||||
this.widgets.dropOffAndInShop,
|
||||
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
|
||||
},
|
||||
dropOffAndInShopWordingText2() {
|
||||
nonMobileWordingText2() {
|
||||
return this.getCmsContentWithCustomValues(
|
||||
this.widgets.dropOffAndInShop,
|
||||
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2);
|
||||
},
|
||||
serviceLocationFullAddress() {
|
||||
// var { address, address2, city, state, zipCode } = this.serviceLocation;
|
||||
// console.log(JSON.stringify(this.serviceLocation));
|
||||
// return `${address}, ${address2 ? `${address2},` : ''}<br/> ${city}, ${state} ${zipCode}`;
|
||||
|
||||
return `${this.serviceLocation.address}, ${
|
||||
this.serviceLocation.address2
|
||||
? `${this.serviceLocation.address2},`
|
||||
: ''
|
||||
}<br/> ${this.serviceLocation.city}, ${this.serviceLocation.state} ${
|
||||
this.serviceLocation.zipCode
|
||||
}`;
|
||||
appointmentTimeText() {
|
||||
const { startTime, endTime } = this.schedule;
|
||||
if (this.isDropOffAppointment){
|
||||
return 'Drop off before 9:30 AM';
|
||||
}
|
||||
if (this.isInShopAppointment){
|
||||
const formattedStartTime = get12HourTimeFormat(startTime);
|
||||
return `at ${formattedStartTime}`
|
||||
}
|
||||
if (this.isMobileAppointment) {
|
||||
const mobileStartTime = get12HourTimeMobileFormat(startTime);
|
||||
const mobileEndTime = get12HourTimeMobileFormat(endTime);
|
||||
return `Between ${mobileStartTime} - ${mobileEndTime}`;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
titleCaseProviderAddress() {
|
||||
return toTitleCase(this.providerAddress?.streetAddress);
|
||||
},
|
||||
titleCaseProviderCity() {
|
||||
return toTitleCase(this.providerAddress?.city);
|
||||
},
|
||||
appointmentAddress() {
|
||||
appointmentLocation() {
|
||||
if (this.isMobileAppointment){
|
||||
return this.serviceLocationFullAddress;
|
||||
}
|
||||
|
|
@ -269,31 +250,33 @@ export default {
|
|||
}
|
||||
return null
|
||||
},
|
||||
serviceLocationFullAddress() {
|
||||
var { address, address2, city, state, zipCode } = this.serviceLocation;
|
||||
return `${address}, ${address2 ? `${address2},` : ''}<br/> ${city}, ${state} ${zipCode}`;
|
||||
},
|
||||
providerFullAddress() {
|
||||
var { state, zipCode } = this.providerAddress;
|
||||
return this.titleCaseProviderAddress
|
||||
? `${this.titleCaseProviderAddress},<br/> ${this.titleCaseProviderCity}, ${state} ${zipCode}`
|
||||
var { streetAddress, city, state, zipCode } = this.providerAddress;
|
||||
return streetAddress
|
||||
? `${toTitleCase(streetAddress)},<br/> ${toTitleCase(city)}, ${state} ${zipCode}`
|
||||
: '';
|
||||
},
|
||||
appointmentWordingText() {
|
||||
var wording = null;
|
||||
if (this.isMobileAppointment){
|
||||
wording = this.mobileWordingText;
|
||||
return this.mobileWordingText;
|
||||
}
|
||||
if (this.isInShopAppointment || this.isDropOffAppointment){
|
||||
wording = this.dropOffAndInShopWordingText;
|
||||
return this.nonMobileWordingText;
|
||||
}
|
||||
return wording;
|
||||
return null;
|
||||
},
|
||||
appointmentWordingText2() {
|
||||
var wording = null;
|
||||
if (this.isMobileAppointment){
|
||||
wording = this.mobileWordingText2;
|
||||
return this.mobileWordingText2;
|
||||
}
|
||||
if (this.isInShopAppointment || this.isDropOffAppointment){
|
||||
wording = this.dropOffAndInShopWordingText2;
|
||||
return this.nonMobileWordingText2;
|
||||
}
|
||||
return wording;
|
||||
return null;
|
||||
},
|
||||
isMobileAppointment() {
|
||||
const mobileAppointmentTypes = [
|
||||
|
|
@ -398,7 +381,9 @@ export default {
|
|||
'custom',
|
||||
(v) => { return this.customValueMap[v] }
|
||||
)
|
||||
return getStringWithCustomValues(processedIfStatements, this.customValueMap);
|
||||
const x = getStringWithCustomValues(processedIfStatements, this.customValueMap);
|
||||
console.log(JSON.stringify(x));
|
||||
return x;
|
||||
},
|
||||
formatDate(date) {
|
||||
// This conversion ensures we don't get get GMT induced date changes
|
||||
|
|
|
|||
Loading…
Reference in a new issue