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

Still in progress

Browse source
This commit is contained in:
Michaela Brydon 2024-08-12 14:51:27 -04:00
parent fd633102cc
commit af9a98b11d
1 changed files with 133 additions and 177 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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