Still in progress
This commit is contained in:
Michaela Brydon
parent
fd633102cc
commit
af9a98b11d
1 changed files with 133 additions and 177 deletions
|
|
@ -26,7 +26,7 @@
|
|||
</vehicleBanner>
|
||||
</div>
|
||||
<div class="appointment-date-time text-center mt-4">
|
||||
<p>{{ appointmentDateFormatted }}</p>
|
||||
<p>{{ formatDate(schedule.date) }}</p>
|
||||
<p class="mt-2">{{ appointmentTimeFormatted }}</p>
|
||||
</div>
|
||||
<addToCalendar
|
||||
|
|
@ -41,9 +41,9 @@
|
|||
"
|
||||
:providerFullAddress="providerFullAddress"
|
||||
:appointmentType="appointmentType"
|
||||
:scheduleDate="appointmentDate"
|
||||
:scheduleStartTime="appointmentStartTime"
|
||||
:scheduleEndTime="appointmentEndTime" />
|
||||
:scheduleDate="schedule.date"
|
||||
:scheduleStartTime="schedule.startTime"
|
||||
:scheduleEndTime="schedule.endTime" />
|
||||
<div
|
||||
class="appointment-text text-center lh-base"
|
||||
v-html="appointmentWordingText"></div>
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
<hr class="mb-0" />
|
||||
<div>
|
||||
<cartDropdown
|
||||
:showAsPaid="isPayInAdvance"
|
||||
:showAsPaid="payment.isPayInAdvance"
|
||||
:readOnly="true"
|
||||
:isInitiallyExpanded="false"
|
||||
:showDropdownHeader="true"
|
||||
|
|
@ -106,6 +106,7 @@ import {
|
|||
import { toTitleCase } from '@/helpers/text-helper.js';
|
||||
import { AppointmentTypeStrings } from '@/constants/schedule-constants';
|
||||
import applicationConfig from '@/constants/application-config';
|
||||
import widgetFields from '@/constants/cms-widget-fields.js';
|
||||
|
||||
export default {
|
||||
name: 'order-confirmation',
|
||||
|
|
@ -143,177 +144,166 @@ export default {
|
|||
return { mainStore, submittedOrder };
|
||||
},
|
||||
data() {
|
||||
var { vehicle, serviceLocation } = this.submittedOrder;
|
||||
return{
|
||||
var {
|
||||
vehicle,
|
||||
serviceLocation,
|
||||
schedule,
|
||||
customer,
|
||||
payment,
|
||||
customerPortalLoginToken } = this.submittedOrder;
|
||||
var { issConfig } = this.mainStore;
|
||||
return {
|
||||
vehicle,
|
||||
customerEmail: customer.email,
|
||||
payment,
|
||||
schedule,
|
||||
serviceLocation,
|
||||
appointmentType: serviceLocation.appointmentType,
|
||||
serviceLocationAddress: serviceLocation.address,
|
||||
serviceLocationAddress2: serviceLocation.address2,
|
||||
serviceLocationCity: serviceLocation.city,
|
||||
serviceLocationState: serviceLocation.state,
|
||||
serviceLocationZipCode: serviceLocation.zipCode,
|
||||
providerAddress: serviceLocation?.provider?.address,
|
||||
customerPortalLoginToken,
|
||||
carrierName: issConfig.clientName,
|
||||
carrierUrl: issConfig.successReturnURL,
|
||||
widgets: {
|
||||
emailConfirmation: 'EmailConfirmationWordingWidget',
|
||||
orderConfirmation: 'OrderConfirmationContent',
|
||||
mobile: 'MobileWordingWidget'
|
||||
mobile: 'MobileWordingWidget',
|
||||
dropOffAndInShop: 'DropOffAndInShopWordingWidget'
|
||||
},
|
||||
customValueMap: {
|
||||
inShopAppointment: (serviceLocation.appointmentType === AppointmentTypeStrings.IN_SHOP),
|
||||
dropOffAppointment: false,
|
||||
vehicleYear: vehicle.year,
|
||||
vehicleMake: vehicle.make,
|
||||
vehicleModel: vehicle.model,
|
||||
address: '100 Pine Tract Rd.', // TODO fix
|
||||
inShopDuration: '12 minutes' //TODO
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
carrierName() {
|
||||
return this.mainStore.issConfig.clientName;
|
||||
},
|
||||
carrierUrl() {
|
||||
return this.mainStore.issConfig.successReturnURL;
|
||||
customValueMap() {
|
||||
return {
|
||||
inShopAppointment: this.isInShopAppointment,
|
||||
dropOffAppointment: this.isDropOffAppointment,
|
||||
vehicleYear: this.vehicle.year,
|
||||
vehicleMake: this.vehicle.make,
|
||||
vehicleModel: this.vehicle.model,
|
||||
address: this.serviceLocationFullAddress,
|
||||
inShopDuration: this.inShopAppointmentDuration,
|
||||
email: this.customerEmail,
|
||||
CUSTOMER_PORTAL_URL: applicationConfig.CUSTOMER_PORTAL_URL,
|
||||
CUSTOMER_PORTAL_LOGIN_TOKEN: this.customerPortalLoginToken
|
||||
}
|
||||
},
|
||||
confirmationEmailText() {
|
||||
var content = this.getCmsContent('EmailConfirmationWordingWidget','BodyText')
|
||||
return getStringWithCustomValues(content, this.customValueMap)
|
||||
var content = this.getCmsContentWithCustomValues(
|
||||
this.widgets.emailConfirmation,
|
||||
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
|
||||
return content
|
||||
?.replaceAll('<', '<')
|
||||
?.replaceAll('>', '>');
|
||||
},
|
||||
orderConfirmationHeaderText() {
|
||||
return this.getCmsContent('OrderConfirmationContent', 'HeaderText');
|
||||
return this.getCmsContent(
|
||||
this.widgets.orderConfirmation,
|
||||
widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
|
||||
},
|
||||
orderConfirmationImage() {
|
||||
return this.getCmsContent('OrderConfirmationContent', 'Image');
|
||||
},
|
||||
appointmentType() {
|
||||
return this.submittedOrder.serviceLocation.appointmentType;
|
||||
},
|
||||
appointmentDate() {
|
||||
return this.submittedOrder.schedule.date;
|
||||
},
|
||||
appointmentStartTime() {
|
||||
return this.submittedOrder.schedule.startTime;
|
||||
},
|
||||
appointmentEndTime() {
|
||||
return this.submittedOrder.schedule.endTime;
|
||||
},
|
||||
appointmentDateFormatted() {
|
||||
// This conversion ensures we don't get get GMT induced date changes
|
||||
const dateObject = convertDateStringToDate(this.appointmentDate);
|
||||
// Ex: Tuesday, April 22
|
||||
return dateObject.toLocaleDateString('en-us', {
|
||||
weekday: 'long',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
});
|
||||
return this.getCmsContent(
|
||||
this.widgets.orderConfirmation,
|
||||
widgetFields.CONTENT_GROUP_WIDGET.IMAGE);
|
||||
},
|
||||
appointmentTimeFormatted() {
|
||||
return this.formatAppointmentTime(this.appointmentType);
|
||||
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.getCmsContent('MobileWordingWidget', 'BodyText');
|
||||
var content = this.getCmsContent('MobileWordingWidget','BodyText');
|
||||
return getStringWithCustomValues(content, this.customValueMap);
|
||||
return this.getCmsContentWithCustomValues(
|
||||
this.widgets.mobile,
|
||||
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
|
||||
},
|
||||
mobileWordingText2() {
|
||||
return this.getCmsContent('MobileWordingWidget', 'BodyText2');
|
||||
return this.getCmsContent(
|
||||
this.widgets.mobile,
|
||||
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2);
|
||||
},
|
||||
dropOffAndInShopWordingText() {
|
||||
// return this.getCmsContent(
|
||||
// 'DropOffAndInShopWordingWidget',
|
||||
// 'BodyText'
|
||||
// );
|
||||
var content = this.getCmsContent('DropOffAndInShopWordingWidget','BodyText');
|
||||
return getStringWithCustomValues(content, this.customValueMap);
|
||||
return this.getCmsContentWithCustomValues(
|
||||
this.widgets.dropOffAndInShop,
|
||||
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
|
||||
},
|
||||
dropOffAndInShopWordingText2() {
|
||||
// var content = this.getCmsContent('DropOffAndInShopWordingWidget','BodyText2');
|
||||
// return getStringWithCustomValues(content, this.customValueMap);
|
||||
//return this.getBodyText2FromCms('DropOffAndInShopWordingWidget');
|
||||
return this.getTextFromCmsWithCustomValues('DropOffAndInShopWordingWidget', 'BodyText2');
|
||||
return this.getCmsContentWithCustomValues(
|
||||
this.widgets.dropOffAndInShop,
|
||||
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2);
|
||||
},
|
||||
serviceLocationFullAddress() {
|
||||
// eslint-disable-next-line max-len
|
||||
return `${this.serviceLocationAddress}, ${
|
||||
this.serviceLocationAddress2
|
||||
? `${this.serviceLocationAddress2},`
|
||||
// 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.serviceLocationCity}, ${this.serviceLocationState} ${
|
||||
this.serviceLocationZipCode
|
||||
}<br/> ${this.serviceLocation.city}, ${this.serviceLocation.state} ${
|
||||
this.serviceLocation.zipCode
|
||||
}`;
|
||||
},
|
||||
providerAddress() {
|
||||
return toTitleCase(this.submittedOrder.serviceLocation.provider.address
|
||||
.streetAddress);
|
||||
return toTitleCase(this.providerAddress?.streetAddress);
|
||||
},
|
||||
providerCity() {
|
||||
return toTitleCase(this.submittedOrder.serviceLocation.provider.address.city);
|
||||
},
|
||||
providerState() {
|
||||
return this.submittedOrder.serviceLocation.provider.address.state;
|
||||
},
|
||||
providerZipCode() {
|
||||
return this.submittedOrder.serviceLocation.provider.address.zipCode;
|
||||
return toTitleCase(this.providerAddress?.city);
|
||||
},
|
||||
providerFullAddress() {
|
||||
// eslint-disable-next-line max-len
|
||||
return this.submittedOrder.serviceLocation?.provider?.address
|
||||
? `${this.providerAddress},<br/> ${this.providerCity}, ${this.providerState} ${this.providerZipCode}`
|
||||
var { state, zipCode } = this.providerAddress;
|
||||
return this.providerAddress
|
||||
? `${this.providerAddress},<br/> ${this.providerCity}, ${state} ${zipCode}`
|
||||
: '';
|
||||
},
|
||||
appointmentWordingText() {
|
||||
const wordingMap = {
|
||||
[AppointmentTypeStrings.MOBILE]: this.mobileWordingText,
|
||||
[AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP]: this.mobileWordingText,
|
||||
[AppointmentTypeStrings.DROP_OFF]: this.dropOffAndInShopWordingText,
|
||||
[AppointmentTypeStrings.IN_SHOP]: this.dropOffAndInShopWordingText
|
||||
};
|
||||
|
||||
return wordingMap[this.appointmentType] || null;
|
||||
var wording = null;
|
||||
if (this.isMobileAppointment){
|
||||
wording = this.mobileWordingText;
|
||||
}
|
||||
if (this.isInShopAppointment || this.isDropOffAppointment){
|
||||
wording = this.dropOffAndInShopWordingText;
|
||||
}
|
||||
return wording;
|
||||
},
|
||||
appointmentWordingText2() {
|
||||
const wordingMap = {
|
||||
[AppointmentTypeStrings.MOBILE]: this.mobileWordingText2,
|
||||
[AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP]: this.mobileWordingText2,
|
||||
[AppointmentTypeStrings.DROP_OFF]: this.dropOffAndInShopWordingText2,
|
||||
[AppointmentTypeStrings.IN_SHOP]: this.dropOffAndInShopWordingText2
|
||||
};
|
||||
|
||||
return wordingMap[this.appointmentType] || null;
|
||||
var wording = null;
|
||||
if (this.isMobileAppointment){
|
||||
wording = this.mobileWordingText2;
|
||||
}
|
||||
if (this.isInShopAppointment || this.isDropOffAppointment){
|
||||
wording = this.dropOffAndInShopWordingText2;
|
||||
}
|
||||
return wording;
|
||||
},
|
||||
mobileAppointment() {
|
||||
return (
|
||||
this.submittedOrder.serviceLocation.appointmentType
|
||||
=== AppointmentTypeStrings.MOBILE
|
||||
|| this.submittedOrder.serviceLocation.appointmentType
|
||||
=== AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
|
||||
);
|
||||
isMobileAppointment() {
|
||||
const mobileAppointmentTypes = [
|
||||
AppointmentTypeStrings.MOBILE,
|
||||
AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
|
||||
]
|
||||
return mobileAppointmentTypes.includes(this.appointmentType);
|
||||
},
|
||||
inShopAppointment() {
|
||||
return (
|
||||
this.submittedOrder.serviceLocation.appointmentType
|
||||
=== AppointmentTypeStrings.IN_SHOP
|
||||
);
|
||||
isInShopAppointment() {
|
||||
return this.appointmentType === AppointmentTypeStrings.IN_SHOP;
|
||||
},
|
||||
dropOffAppointment() {
|
||||
return (
|
||||
this.submittedOrder.serviceLocation.appointmentType
|
||||
=== AppointmentTypeStrings.DROP_OFF
|
||||
);
|
||||
isDropOffAppointment() {
|
||||
return this.appointmentType === AppointmentTypeStrings.DROP_OFF;
|
||||
},
|
||||
inShopAppointmentDuration() {
|
||||
const inshopDurationTime = getDisplayTextForDurationLength(
|
||||
this.submittedOrder.schedule.jobMinMinutes,
|
||||
this.submittedOrder.schedule.jobMaxMinutes
|
||||
return getDisplayTextForDurationLength(
|
||||
this.schedule.jobMinMinutes,
|
||||
this.schedule.jobMaxMinutes
|
||||
);
|
||||
return inshopDurationTime;
|
||||
},
|
||||
isPayInAdvance() {
|
||||
return this.submittedOrder.payment.isPayInAdvance;
|
||||
},
|
||||
selectedVaps() {
|
||||
return this.submittedOrder.lineItems.vaps;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -392,58 +382,24 @@ export default {
|
|||
forwardButtonAction() {
|
||||
this.$router.navigateToExternalUrl(this.carrierUrl);
|
||||
},
|
||||
formatAppointmentTime(appointmentType) {
|
||||
switch (appointmentType) {
|
||||
case AppointmentTypeStrings.MOBILE:
|
||||
case AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP:
|
||||
// eslint-disable-next-line max-len
|
||||
return `Between ${get12HourTimeMobileFormat(this.appointmentStartTime)} - ${get12HourTimeMobileFormat(this.appointmentEndTime)}`;
|
||||
case AppointmentTypeStrings.DROP_OFF:
|
||||
return 'Drop off before 9:30 AM';
|
||||
case AppointmentTypeStrings.IN_SHOP:
|
||||
return `at ${get12HourTimeFormat(this.appointmentStartTime)}`;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
},
|
||||
processIfStatements,
|
||||
getTextFromCmsWithCustomValues(widgetName, widgetField) {
|
||||
getCmsContentWithCustomValues(widgetName, widgetField) {
|
||||
const rawText = this.getCmsContent(widgetName, widgetField);
|
||||
return processIfStatements(
|
||||
const processedIfStatements = processIfStatements(
|
||||
rawText,
|
||||
'custom',
|
||||
//this.getCustomValueFromString
|
||||
(v) => {
|
||||
console.log(v);
|
||||
return this.customValueMap[v];
|
||||
}
|
||||
);
|
||||
(v) => { return this.customValueMap[v] }
|
||||
)
|
||||
return getStringWithCustomValues(processedIfStatements, this.customValueMap);
|
||||
},
|
||||
getCustomValueFromString(str) {
|
||||
switch (str) {
|
||||
case 'inShopAppointment':
|
||||
return this.inShopAppointment;
|
||||
case 'dropOffAppointment':
|
||||
return this.dropOffAppointment;
|
||||
case 'vehicleMake':
|
||||
return 'Test Make'; //this.submittedOrder.vehicle.make;
|
||||
case 'vehicleModel':
|
||||
return 'Test model';//this.submittedOrder.vehicle.model;
|
||||
case 'vehicleYear':
|
||||
return '1000';//this.submittedOrder.vehicle.year;
|
||||
case 'email':
|
||||
return 'test@email.com';//this.submittedOrder.customer.emailAddress;
|
||||
case 'address':
|
||||
return 'a';
|
||||
case 'inShopDuration':
|
||||
return this.inShopAppointmentDuration;
|
||||
case 'CUSTOMER_PORTAL_URL':
|
||||
return applicationConfig.CUSTOMER_PORTAL_URL;
|
||||
case 'CUSTOMER_PORTAL_LOGIN_TOKEN':
|
||||
return this.submittedOrder.customerPortalLoginToken;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
formatDate(date) {
|
||||
// This conversion ensures we don't get get GMT induced date changes
|
||||
const dateObject = convertDateStringToDate(date);
|
||||
// Ex: Tuesday, April 22
|
||||
return dateObject.toLocaleDateString('en-us', {
|
||||
weekday: 'long',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue