From 0871f740e4b69c5748adad51296ee9aa9db1aeba Mon Sep 17 00:00:00 2001 From: hiteshkumar87 Date: Wed, 27 Sep 2023 17:34:02 +0530 Subject: [PATCH] CSR-1411 Add appointment details & cart to 'confirmation' page --- src/helpers/date-helper.js | 54 ++++++++++ src/layouts/confirmation/confirmation.vue | 122 ++++++++++++++++++++++ 2 files changed, 176 insertions(+) diff --git a/src/helpers/date-helper.js b/src/helpers/date-helper.js index dce497231..48b3122ab 100644 --- a/src/helpers/date-helper.js +++ b/src/helpers/date-helper.js @@ -8,3 +8,57 @@ export function getDateDifferenceInDays(startDate, endDate) { // To calculate the no. of days between two dates return Difference_In_Time / (1000 * 3600 * 24); } + +export function getFullDayName(date) { + if (date instanceof Date !== true) return; + const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; + return days[date.getDay()]; +} +export function getFullMonthName(date) { + if (date instanceof Date !== true) return; + const monthNames = [ + "January", + "February", + "March", + "April", + "May", + "June", + "July", + "August", + "September", + "October", + "November", + "December", + ]; + return monthNames[date.getMonth()]; +} +export function get12HourTimeFormat(time) { + // Check correct time format and split into components + time = time.toString().match(/^([01]\d|2[0-3])(:)([0-5]\d)?$/) || [time]; + + if (time.length > 1) { + // If time format correct + time = time.slice(1); // Remove full string match value + time[5] = +time[0] < 12 ? " AM" : " PM"; // Set AM/PM + time[0] = +time[0] % 12 || 12; // Adjust hours + } + return time.join(""); // return adjusted time or original string +} +export function get12HourTimeMobileFormat(time) { + // Check correct time format and split into components + time = time.toString().match(/^([01]\d|2[0-3])(:)([0-5]\d)?$/) || [time]; + + if (time.length > 1) { + // If time format correct + const min = time[3]; + time = time.slice(1); // Remove full string match value + if (Number(min) == 0) { + time = time.slice(0, 1); // Remove minute value + time[1] = +time[0] < 12 ? " AM" : " PM"; // Set AM/PM + } else { + time[5] = +time[0] < 12 ? " AM" : " PM"; // Set AM/PM + } + time[0] = +time[0] % 12 || 12; // Adjust hours + } + return time.join(""); // return adjusted time or original string +} diff --git a/src/layouts/confirmation/confirmation.vue b/src/layouts/confirmation/confirmation.vue index 6c4645901..30c38983f 100644 --- a/src/layouts/confirmation/confirmation.vue +++ b/src/layouts/confirmation/confirmation.vue @@ -5,6 +5,19 @@
+
+ + +
+
+ +
+
{{ this.getScheduleDate() }}
+
{{ this.getScheduleTime() }}
+
Add to calendar
+
// Components import funnelHeader from "@/fmg-components/funnel-header/funnel-header"; +import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner"; import navbar from "@/fmg-components/nav-bar/nav-bar"; //Supporting files import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { AppointmentTypeStrings } from "@/constants/schedule-constants"; import { settleAllPromises } from "@/helpers/layout-helper"; import store from "@/store"; + +import { + getFullDayName, + getFullMonthName, + get12HourTimeFormat, + get12HourTimeMobileFormat, +} from "@/helpers/date-helper"; export default { name: "confirmation", async beforeRouteEnter(to, from, next) { @@ -47,6 +68,71 @@ export default { vm.setCmsContent(resultMap.cmsContent); }); }, + computed: { + ScheduleConfirmationText() { + return this.getCmsContent("ScheduleConfirmationWidget", "BodyText"); + }, + ScheduleConfirmationImage() { + return this.getCmsContent("ScheduleConfirmationWidget", "Image"); + }, + ScheduleDate() { + return store.getters.order.schedule.date; + }, + AppointmentType() { + return store.getters.order.serviceLocation.appointmentType; + }, + ScheduleStartTime() { + return store.getters.order.schedule.startTime; + }, + ScheduleEndTime() { + return store.getters.order.schedule.endTime; + }, + InShopWordingText() { + return this.getCmsContent("InShopWordingWidget", "BodyText"); + }, + MobileWordingText() { + return this.getCmsContent("MobileWordingWidget", "BodyText"); + }, + DropOffWordingText() { + return this.getCmsContent("DropOffWordingWidget", "BodyText"); + }, + ServiceLocationAddress() { + return store.getters.order.serviceLocation.address; + }, + ServiceLocationAddress2() { + return store.getters.order.serviceLocation.address2; + }, + ServiceLocationCity() { + return store.getters.order.serviceLocation.city; + }, + ServiceLocationState() { + return store.getters.order.serviceLocation.state; + }, + ServiceLocationZipCode() { + return store.getters.order.serviceLocation.zipCode; + }, + ProviderAddress() { + return store.getters.order.serviceLocation.provider.address.streetAddress; + }, + ProviderCity() { + return store.getters.order.serviceLocation.provider.address.city; + }, + ProviderState() { + return store.getters.order.serviceLocation.provider.address.state; + }, + ProviderZipCode() { + return store.getters.order.serviceLocation.provider.address.zipCode; + }, + Year() { + return store.getters.order.vehicle.year; + }, + Make() { + return store.getters.order.vehicle.make; + }, + Model() { + return store.getters.order.vehicle.model; + }, + }, methods: { arePagePrerequisitesValid() { // Service Location @@ -78,10 +164,46 @@ export default { return serviceLocationReqs && scheduleReqs; }, forwardButtonAction() {}, + 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},
${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},
${this.ProviderCity}, ${this.ProviderState} ${this.ProviderZipCode}`; + return this.DropOffWordingText.replace("#ADDRESS", address).replace("#YMM", ymm); + } else { + const address = `${this.ProviderAddress},
${this.ProviderCity}, ${this.ProviderState} ${this.ProviderZipCode}`; + return this.InShopWordingText.replace("#ADDRESS", address).replace("#YMM", ymm); + } + }, }, components: { funnelHeader, navbar, + vehicleBanner, }, };