diff --git a/src/helpers/duration-length-helper.js b/src/helpers/duration-length-helper.js new file mode 100644 index 000000000..cd57f2c4e --- /dev/null +++ b/src/helpers/duration-length-helper.js @@ -0,0 +1,15 @@ +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/helpers/duration-length-helper.spec.js b/src/helpers/duration-length-helper.spec.js new file mode 100644 index 000000000..b35585311 --- /dev/null +++ b/src/helpers/duration-length-helper.spec.js @@ -0,0 +1,24 @@ +import { getDisplayTextForDurationLength } from "@/helpers/duration-length-helper"; + +describe("damage-length-helper.js", () => { + it("Should return the expected duration for the appointment in hours", () => { + // Arrange / Act + const durationMinimum = 60; + const durationMaximum = 120; + + const duration = getDisplayTextForDurationLength(durationMinimum, durationMaximum); + + // Assert + expect(duration).toEqual("1 - 2 hours"); + }); + it("Should return the expected duration for the appointment in minutes", () => { + // Arrange / Act + const durationMinimum = 30; + const durationMaximum = 45; + + const duration = getDisplayTextForDurationLength(durationMinimum, durationMaximum); + + // Assert + expect(duration).toEqual("30 - 45 minutes"); + }); +}); diff --git a/src/layouts/confirmation/confirmation.spec.js b/src/layouts/confirmation/confirmation.spec.js index 0d8a1b273..39e5d8b49 100644 --- a/src/layouts/confirmation/confirmation.spec.js +++ b/src/layouts/confirmation/confirmation.spec.js @@ -25,6 +25,8 @@ beforeEach(() => { startTime: "09:00", endTime: "10:00", routeCode: "000", + jobMaxMinutes: "120", + jobMinMinutes: "60", }, lineItems: { glassParts: [ @@ -360,6 +362,41 @@ describe("computed properties...", () => { // Assert expect(testValue).toEqual("test1,
test, AZ 12345"); }); + test("Appointment Duration should return text in expected format.", () => { + //Arrange + + const { wrapper } = setupMocks({}); + + // Act + const testValue = wrapper.vm.AppointmentDuration; + + // Assert + expect(testValue).toEqual("Duration: 1 - 2 hours"); + }); + test("Appointment Duration should return with correct duration values in expected format for hours.", () => { + //Arrange + store.getters.submittedOrder.schedule.jobMaxMinutes = 120; + store.getters.submittedOrder.schedule.jobMinMinutes = 60; + const { wrapper } = setupMocks({}); + + // Act + const testValue = wrapper.vm.AppointmentDuration; + + // Assert + expect(testValue).toEqual("Duration: 1 - 2 hours"); + }); + test("Appointment Duration should return with correct duration values in expected format for minutes.", () => { + //Arrange + store.getters.submittedOrder.schedule.jobMaxMinutes = 45; + store.getters.submittedOrder.schedule.jobMinMinutes = 30; + const { wrapper } = setupMocks({}); + + // Act + const testValue = wrapper.vm.AppointmentDuration; + + // Assert + expect(testValue).toEqual("Duration: 30 - 45 minutes"); + }); }); function setupMocks({ customMountOptions }) { diff --git a/src/layouts/confirmation/confirmation.vue b/src/layouts/confirmation/confirmation.vue index 39ba55f17..efbc2e15f 100644 --- a/src/layouts/confirmation/confirmation.vue +++ b/src/layouts/confirmation/confirmation.vue @@ -42,6 +42,12 @@ :scheduleEndTime="ScheduleEndTime" />
+ +
@@ -82,6 +88,7 @@ import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner"; import navbar from "@/fmg-components/nav-bar/nav-bar"; import addToCalendar from "@/layouts/confirmation/add-to-calendar/add-to-calendar"; import cart from "@/fmg-components/cart/cart"; +import textBlock from "@/digital-components/text-block/text-block"; //Supporting files import baseMixin from "@/mixins/base-mixin.js"; @@ -97,6 +104,7 @@ import { deepClone } from "@/helpers/object-helper"; import { Form } from "vee-validate"; import { get12HourTimeFormat, get12HourTimeMobileFormat } from "@/helpers/date-helper"; import { coverageStatus } from "@/constants/insurance"; +import { getDisplayTextForDurationLength } from "@/helpers/duration-length-helper"; export default { name: "confirmation", @@ -315,6 +323,11 @@ export default { isPia() { return store.getters.submittedOrder?.payment.isPia; }, + AppointmentDuration() { + const durationMaximum = store.getters.submittedOrder?.schedule?.jobMaxMinutes; + const durationMinimum = store.getters.submittedOrder?.schedule?.jobMinMinutes; + return "Duration: " + getDisplayTextForDurationLength(durationMinimum, durationMaximum); + }, }, methods: { arePagePrerequisitesValid() { @@ -365,6 +378,7 @@ export default { vehicleBanner, addToCalendar, cart, + textBlock, }, }; diff --git a/src/layouts/schedule/helpers/schedule-helper.js b/src/layouts/schedule/helpers/schedule-helper.js index b85572e88..633d862d2 100644 --- a/src/layouts/schedule/helpers/schedule-helper.js +++ b/src/layouts/schedule/helpers/schedule-helper.js @@ -60,19 +60,3 @@ export function militaryToTwelveHourTime(timeString) { 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 d04621894..a0b5e9f99 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 @@ -51,8 +51,8 @@ import { deepClone } from "@/helpers/object-helper"; import { convertDateStringToDate, militaryToTwelveHourTime, - getDisplayTextForDurationLength, } from "@/layouts/schedule/helpers/schedule-helper"; +import { getDisplayTextForDurationLength } from "@/helpers/duration-length-helper"; // Validation - TODO: Move this somewhere more global? import { defineRule, useField } from "vee-validate"; diff --git a/src/store/index.js b/src/store/index.js index fdfba35a1..fa421ebe6 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -24,8 +24,8 @@ import { partTypeStrings } from "@/constants/part-type-strings"; import { convertDateStringToDate, militaryToTwelveHourTime, - getDisplayTextForDurationLength, } from "@/layouts/schedule/helpers/schedule-helper"; +import { getDisplayTextForDurationLength } from "@/helpers/duration-length-helper"; import { paymentMethods } from "@/constants/payment-method-constants"; import { getPromoCodeWithoutBundleIdentifier,