From aaba3ce7c1dae2ca9c65c802a82a9b0353069736 Mon Sep 17 00:00:00 2001 From: Chloe Herd Date: Wed, 26 Jul 2023 17:26:52 -0400 Subject: [PATCH 1/9] Extract logic for use in review component --- .../schedule/helpers/schedule-helper.js | 29 +++++++++++++ .../time-slot-modal-question.vue | 41 ++++--------------- 2 files changed, 38 insertions(+), 32 deletions(-) diff --git a/src/layouts/schedule/helpers/schedule-helper.js b/src/layouts/schedule/helpers/schedule-helper.js index 82c756b5b..930a5ee6e 100644 --- a/src/layouts/schedule/helpers/schedule-helper.js +++ b/src/layouts/schedule/helpers/schedule-helper.js @@ -45,3 +45,32 @@ export function sumDateString(dateString, daysToAdd) { date.setDate(date.getDate() + daysToAdd); return convertDateToDateString(date); } + +export function militaryToTwelveHourTime(timeString) { + // Expected input: "HH:MM" + let hours = parseInt(timeString.split(":")[0]); + const minutes = timeString.split(":")[1]; + const meridianNotation = hours > 11 ? "PM" : "AM"; + + if (hours > 12) { + hours -= 12; + } + + return `${hours}:${minutes} ${meridianNotation}`; +} + +export function getDisplayTextForDurationLength(durationMinimum, durationMaximum) { + const isLongAppointment = durationMaximum >= 120; + const isDurationRange = durationMinimum !== durationMaximum; + + const adjustedMinimum = isLongAppointment ? durationMinimum / 60 : durationMinimum; + const adjustedMaximum = isLongAppointment ? durationMaximum / 60 : durationMaximum; + + const durationText = isDurationRange + ? `${adjustedMinimum} - ${adjustedMaximum}` + : adjustedMinimum; + + const unitText = isLongAppointment ? "hours" : "minutes"; + + return `${durationText} ${unitText}`; +} diff --git a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue index 13f33ae05..4ff62cc4d 100644 --- a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue +++ b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue @@ -47,7 +47,11 @@ import buttonQuestion from "@/digital-components/button-question/button-question import timeSlotModalListButton from "./time-slot-modal-list-button/time-slot-modal-list-button"; // Helpers -import { convertDateStringToDate } from "@/layouts/schedule/helpers/schedule-helper"; +import { + convertDateStringToDate, + militaryToTwelveHourTime, + getDisplayTextForDurationLength, +} from "@/layouts/schedule/helpers/schedule-helper"; import { deepClone } from "@/helpers/object-helper"; // Validation - TODO: Move this somewhere more global? @@ -263,7 +267,7 @@ export default { cmsWidgetFieldMappings.DURATION ); - const inshopDurationTime = this.getDisplayTextForDurationLength( + const inshopDurationTime = getDisplayTextForDurationLength( this.estimatedServiceMinutesMinimum, this.estimatedServiceMinutesMaximum ); @@ -346,33 +350,6 @@ export default { this.$emit("update:modelValue", this.selectedValue); this.closeModal(); }, - getDisplayTextForMilitaryTime(militaryTimeInput) { - // Expected input: "HH:MM" - let hours = parseInt(militaryTimeInput.split(":")[0]); - const minutes = militaryTimeInput.split(":")[1]; - const meridianNotation = hours > 11 ? "PM" : "AM"; - - if (hours > 12) { - hours -= 12; - } - - return `${hours}:${minutes} ${meridianNotation}`; - }, - getDisplayTextForDurationLength(durationMinimum, durationMaximum) { - const isLongAppointment = durationMaximum >= 120; - const isDurationRange = durationMinimum !== durationMaximum; - - const adjustedMinimum = isLongAppointment ? durationMinimum / 60 : durationMinimum; - const adjustedMaximum = isLongAppointment ? durationMaximum / 60 : durationMaximum; - - const durationText = isDurationRange - ? `${adjustedMinimum} - ${adjustedMaximum}` - : adjustedMinimum; - - const unitText = isLongAppointment ? "hours" : "minutes"; - - return `${durationText} ${unitText}`; - }, getRelevantDropOffCmsWidgetNameForSelectedTimeSlot( selectedTimeSlotId, isSameDayRelevant = false @@ -387,7 +364,7 @@ export default { }, getAvailableTimeSlotsForInshop(timeSlotsForSelectedDate) { return timeSlotsForSelectedDate.map((timeSlot) => { - const readableTime = this.getDisplayTextForMilitaryTime(timeSlot.startTime); + const readableTime = militaryToTwelveHourTime(timeSlot.startTime); return { value: timeSlot.id, buttonLabel: readableTime, @@ -415,9 +392,9 @@ export default { }, getAvailableTimeSlotsForMobile(timeSlotsForSelectedDate) { const availableTimeSlots = timeSlotsForSelectedDate.map((timeSlot) => { - const readableTime = `${this.getDisplayTextForMilitaryTime( + const readableTime = `${militaryToTwelveHourTime( timeSlot.startTime - )} - ${this.getDisplayTextForMilitaryTime(timeSlot.endTime)}`; + )} - ${militaryToTwelveHourTime(timeSlot.endTime)}`; return { value: timeSlot.id, buttonLabel: readableTime, From 6728235ed48d731acda42c43224a9d9cb763ac0d Mon Sep 17 00:00:00 2001 From: Chloe Herd Date: Wed, 26 Jul 2023 17:27:09 -0400 Subject: [PATCH 2/9] Schedule review first draft --- .../schedule-review/schedule-review.vue | 90 +++++++++++++++++++ src/layouts/review/review.vue | 16 ++++ 2 files changed, 106 insertions(+) create mode 100644 src/layouts/review/review-sections/schedule-review/schedule-review.vue diff --git a/src/layouts/review/review-sections/schedule-review/schedule-review.vue b/src/layouts/review/review-sections/schedule-review/schedule-review.vue new file mode 100644 index 000000000..65d922821 --- /dev/null +++ b/src/layouts/review/review-sections/schedule-review/schedule-review.vue @@ -0,0 +1,90 @@ + + + diff --git a/src/layouts/review/review.vue b/src/layouts/review/review.vue index 8780e75a7..34b64a88b 100644 --- a/src/layouts/review/review.vue +++ b/src/layouts/review/review.vue @@ -69,6 +69,14 @@ cmsWidgetName="ServiceLocationTitleWidget" :serviceLocation="serviceLocationInfo" @edit-clicked="editServiceLocation" /> + +
+ +
@@ -94,6 +102,7 @@ import vehicleReview from "@/layouts/review/review-sections/vehicle-review/vehic import damageReview from "@/layouts/review/review-sections/damage-review/damage-review"; import servicePackageReview from "@/layouts/review/review-sections/service-package-review/service-package-review"; import serviceLocationReview from "@/layouts/review/review-sections/service-location-review/service-location-review"; +import scheduleReview from "@/layouts/review/review-sections/schedule-review/schedule-review"; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { settleAllPromises } from "@/helpers/layout-helper"; @@ -189,6 +198,12 @@ export default { serviceLocationInfo() { return this.$store.getters.order.serviceLocation; }, + appointmentType() { + return this.$store.getters.order.serviceLocation.appointmentType; + }, + scheduleInfo() { + return this.$store.getters.order.schedule; + }, }, components: { funnelHeader, @@ -200,6 +215,7 @@ export default { damageReview, servicePackageReview, serviceLocationReview, + scheduleReview, }, }; From b5edeb96325823ca1ccb4b25a3e0c45a35213a46 Mon Sep 17 00:00:00 2001 From: Chloe Herd Date: Thu, 27 Jul 2023 09:30:12 -0400 Subject: [PATCH 3/9] Add back-navigation --- src/layouts/review/review.vue | 6 ++++++ src/router/router-constants/navigation-scenarios.js | 1 + src/router/router-constants/routing-table.js | 4 ++++ 3 files changed, 11 insertions(+) diff --git a/src/layouts/review/review.vue b/src/layouts/review/review.vue index 34b64a88b..6a81dcbac 100644 --- a/src/layouts/review/review.vue +++ b/src/layouts/review/review.vue @@ -175,6 +175,12 @@ export default { this.$route ); }, + editSchedule() { + this.$router.navigateWithoutSaving( + this.navigationScenarios.CLICKED_SCHEDULE_EDIT, + this.$route + ); + }, }, computed: { subHeaderTitle() { diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js index ae1c880ae..ce2f32134 100644 --- a/src/router/router-constants/navigation-scenarios.js +++ b/src/router/router-constants/navigation-scenarios.js @@ -51,6 +51,7 @@ const navigationScenarios = { CLICKED_DAMAGE_EDIT: "CLICKED_DAMAGE_EDIT", CLICKED_SERVICE_PACKAGE_EDIT: "CLICKED_SERVICE_PACKAGE_EDIT", CLICKED_SERVICE_LOCATION_EDIT: "CLICKED_SERVICE_LOCATION_EDIT", + CLICKED_SCHEDULE_EDIT: "CLICKED_SCHEDULE_EDIT", }; export { navigationScenarios }; diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js index 017e1372a..f1f83b445 100644 --- a/src/router/router-constants/routing-table.js +++ b/src/router/router-constants/routing-table.js @@ -484,6 +484,10 @@ const routingTable = function (store) { scenario: navigationScenarios.CLICKED_SERVICE_LOCATION_EDIT, destinationFmgPageValue: fmgPageValues.SERVICE_LOCATION, }, + { + scenario: navigationScenarios.CLICKED_SCHEDULE_EDIT, + destinationFmgPageValue: fmgPageValues.SCHEDULE, + }, ], }, ]; From 8bbbdf909a4c8cbbfd56580b36f43d239307b995 Mon Sep 17 00:00:00 2001 From: Chloe Herd Date: Thu, 27 Jul 2023 09:30:23 -0400 Subject: [PATCH 4/9] Formatting --- .../review-sections/schedule-review/schedule-review.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/layouts/review/review-sections/schedule-review/schedule-review.vue b/src/layouts/review/review-sections/schedule-review/schedule-review.vue index 65d922821..3436cb7c2 100644 --- a/src/layouts/review/review-sections/schedule-review/schedule-review.vue +++ b/src/layouts/review/review-sections/schedule-review/schedule-review.vue @@ -80,7 +80,9 @@ export default { ); }, renderedMobileWindow() { - return `${militaryToTwelveHourTime(this.schedule?.startTime)} - ${militaryToTwelveHourTime(this.schedule?.endTime)}`; + return `${militaryToTwelveHourTime( + this.schedule?.startTime + )} - ${militaryToTwelveHourTime(this.schedule?.endTime)}`; }, }, components: { From a4785fa1c5374bf3b5b1ff2667f353d5ac699fac Mon Sep 17 00:00:00 2001 From: Chloe Herd Date: Thu, 27 Jul 2023 13:56:58 -0400 Subject: [PATCH 5/9] Add jobMinMinutes to store and use on review page --- .../review-sections/schedule-review/schedule-review.vue | 2 +- src/layouts/schedule/schedule.vue | 1 + .../time-slot-modal-question/time-slot-modal-question.vue | 3 +++ src/store/index.js | 5 +++++ 4 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/layouts/review/review-sections/schedule-review/schedule-review.vue b/src/layouts/review/review-sections/schedule-review/schedule-review.vue index 3436cb7c2..1cdfdea22 100644 --- a/src/layouts/review/review-sections/schedule-review/schedule-review.vue +++ b/src/layouts/review/review-sections/schedule-review/schedule-review.vue @@ -75,7 +75,7 @@ export default { }, renderedEstimatedDuration() { return getDisplayTextForDurationLength( - this.schedule?.jobMaxMinutes, + this.schedule?.jobMinMinutes, this.schedule?.jobMaxMinutes ); }, diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue index d15e9acec..02fab79a9 100644 --- a/src/layouts/schedule/schedule.vue +++ b/src/layouts/schedule/schedule.vue @@ -463,6 +463,7 @@ export default { startTime: null, endTime: null, jobMaxMinutes: null, + jobMinMinutes: null, }; } }, diff --git a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue index 4ff62cc4d..8b2e63fd3 100644 --- a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue +++ b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue @@ -92,6 +92,7 @@ export default { startTime: null, endTime: null, jobMaxMinutes: null, + jobMinMinutes: null, }), }, cmsWidgetName: String, @@ -449,6 +450,7 @@ export default { startTime: timeSlot.startTime, endTime: timeSlot.endTime, jobMaxMinutes: this.estimatedServiceMinutesMaximum.toString(), + jobMinMinutes: this.estimatedServiceMinutesMinimum.toString(), }; } @@ -458,6 +460,7 @@ export default { endTime: null, routeCode: null, jobMaxMinutes: null, + jobMinMinutes: null, }; }, }, diff --git a/src/store/index.js b/src/store/index.js index fb86b61c3..ec0a324c0 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -91,6 +91,7 @@ const getDefaultState = () => { endTime: null, routeCode: null, jobMaxMinutes: null, + jobMinMinutes: null, }, referralNumber: null, referralDate: null, @@ -279,6 +280,7 @@ export const mutations = { state.order.schedule.endTime = scheduleInfo.endTime; state.order.schedule.routeCode = scheduleInfo.routeCode; state.order.schedule.jobMaxMinutes = scheduleInfo.jobMaxMinutes; + state.order.schedule.jobMinMinutes = scheduleInfo.jobMinMinutes; } }, updateCustomerDetails(state, detailsInfo) { @@ -365,6 +367,7 @@ export const mutations = { state.order.schedule.endTime = null; state.order.schedule.routeCode = null; state.order.schedule.jobMaxMinutes = null; + state.order.schedule.jobMinMinutes = null; //premium appointment fee used on schedule page also needs reset when schedule is reset const supportingItems = state.order.lineItems.supportingItems; @@ -506,6 +509,7 @@ export const mutations = { state.order.schedule.endTime = sessionInformation.order.schedule?.endTime; state.order.schedule.routeCode = sessionInformation.order.schedule?.routeCode; state.order.schedule.jobMaxMinutes = sessionInformation.order.schedule?.jobMaxMinutes; + state.order.schedule.jobMinMinutes = sessionInformation.order.schedule?.jobMinMinutes; }, updateExperiments(state, experiments) { state.applicationUser.experiments = experiments; @@ -1464,6 +1468,7 @@ export const actions = { endTime: order.schedule?.endTime, routeCode: order.schedule?.routeCode, jobMaxMinutes: order.schedule?.jobMaxMinutes, + jobMinMinutes: order.schedule?.jobMinMinutes, }, existingPromoCode: null, referralCorrelationId: order.referralCorrelationId, From 2a746bd7be971a875dfc94e2fe2fecaf82352a3a Mon Sep 17 00:00:00 2001 From: Chloe Herd Date: Fri, 28 Jul 2023 13:23:27 -0400 Subject: [PATCH 6/9] Move copy structure to cms + state getters. --- .../schedule-review/schedule-review.vue | 61 ++----------------- src/layouts/review/review.vue | 6 +- .../schedule/helpers/schedule-helper.js | 1 + src/store/index.js | 32 ++++++++++ 4 files changed, 42 insertions(+), 58 deletions(-) diff --git a/src/layouts/review/review-sections/schedule-review/schedule-review.vue b/src/layouts/review/review-sections/schedule-review/schedule-review.vue index 1cdfdea22..654676829 100644 --- a/src/layouts/review/review-sections/schedule-review/schedule-review.vue +++ b/src/layouts/review/review-sections/schedule-review/schedule-review.vue @@ -1,22 +1,17 @@