jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

In progress

Browse source
This commit is contained in:
Michaela Brydon 2024-08-15 10:43:06 -04:00
parent 23de2db48e
commit 93ed73da31
2 changed files with 640 additions and 471 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1000
src/layouts/order-confirmation/order-confirmation.spec.js
View file

File diff suppressed because it is too large Load diff

111
src/layouts/order-confirmation/order-confirmation.vue
View file

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